Виджет веб-чата: управление чатом из кода сайта

Всё описанное здесь добавляется в HTML или JavaScript вашего сайта — рядом с кодом для встраивания из статьи Настройка виджета веб-чата. Чтобы убрать саму кнопку в углу, выберите Без кнопки; см. Виджет веб-чата: выбор кнопки чата.

Как открыть чат со своей кнопки

Три способа; все работают с любым стилем кнопки и особенно полезны с вариантом Без кнопки:

Добавьте data-chatonio любому элементу. Сам по себе он открывает чат; можно также задать значение open, close или toggle.
Поставьте ссылку на #chatonio или на #chatonio-open, #chatonio-close, #chatonio-toggle.
Вызовите chatonio('open'), chatonio('close') или chatonio('toggle') из своего кода.

<button data-chatonio>Напишите нам</button>
<a href="#chatonio">Напишите нам</a>

Перед тем как вызывать chatonio(...) из своего JavaScript, добавьте эту строку выше кода для встраивания — скрипт виджета загружается асинхронно, и до его выполнения функции ещё не существует:

<script>window.chatonio = window.chatonio || function(){ (chatonio.q = chatonio.q || []).push(arguments) }</script>

Клик или вызов, сделанный до того, как виджет загрузился, запоминается и повторяется, как только он будет готов, — поэтому кнопка, нажатая сразу же, всё равно сработает; если таких вызовов пришло несколько, выигрывает последний. Триггеры отслеживаются на уровне всей страницы, поэтому кнопке, отрисованной позже меню, блоком CMS или одностраничным приложением, не нужна дополнительная настройка. Обычное поведение ссылок не нарушается: Cmd-клик или Ctrl-клик по <a href="#chatonio"> по-прежнему открывает вкладку браузера. Если в этот момент ждёт проактивное приветствие, открытие чата таким способом подхватывает его, а не отбрасывает.

Как начать разговор сразу с сообщения

Кнопка может принести с собой и сообщение: посетитель нажимает «Рассчитать стоимость» — и оказывается в чате уже с вопросом о стоимости. Добавьте элементу атрибут data-chatonio-message. Что произойдёт дальше, зависит от значения data-chatonio:

Подставить сообщение — data-chatonio без значения или open. Чат открывается, а ваш текст уже стоит в поле ввода. Посетитель может его изменить, и ничего не отправится, пока он сам не нажмёт «Отправить».
Отправить сообщение — data-chatonio="send". Чат открывается, и сообщение сразу уходит так, будто посетитель напечатал его сам, — ассистент начинает отвечать.

<button data-chatonio data-chatonio-message="Хочу узнать стоимость для 50 сотрудников">Рассчитать стоимость</button>
<button data-chatonio="send" data-chatonio-message="Вы работаете с Telegram?">Спросить про Telegram</button>

Из своего кода это работает так же: chatonio('open', 'ваш текст') подставляет сообщение, а chatonio('send', 'ваш текст') отправляет его.

Что важно знать:

Форма перед чатом по-прежнему идёт первой. Если канал просит указать имя, email или другие данные перед началом чата, посетитель, который их ещё не указывал, сначала увидит форму — а над ней сообщение, которое будет отправлено. Оно уйдёт, как только посетитель отправит форму. Тех, кто уже заполнял форму, повторно не спрашивают.
Повторный клик не отправит сообщение дважды. Если последнее сообщение посетителя уже такое же, кнопка просто откроет чат.
Ваша команда это видит. Во входящих сообщение, отправленное кнопкой, помечено «Отправлено кнопкой на сайте», чтобы его не приняли за напечатанное посетителем. Чтобы различать свои кнопки, дайте каждой метку: data-chatonio-ref="pricing-page" или chatonio('send', 'ваш текст', { ref: 'pricing-page' }). Метка показывается рядом с пометкой; посетители её не видят.
Если прошлый разговор посетителя уже завершён, кнопка с send начинает новый.
Длина сообщения — до 4096 символов. Кнопка send без сообщения просто открывает чат.

Используйте send для понятных вопросов в один клик, а подстановку — когда посетителю, скорее всего, захочется что-то дописать, например номер заказа. Короткая подсказка обо всём этом есть на странице канала веб-чата, в разделе Открывайте чат своими кнопками.

Виджет внутри вашего приложения

Если ваше мобильное или десктопное приложение показывает ваш сайт во встроенном браузере (WebView), сообщите об этом Chatonio. Тогда посетители будут видны под названием вашего приложения в списке посетителей онлайн, в панели посетителя в диалоге и на вкладке Приложения в «Аналитике», а не как пользователи обычного браузера. Добавьте к коду виджета атрибут data-app (и при желании data-app-version) на страницах, которые открывает ваше приложение:

<script async src="https://chatonio.com/widget/loader.js" data-channel-id="YOUR-CHANNEL-ID" data-app="Acme iOS" data-app-version="2.4.1"></script>

Добавляйте эти атрибуты только тогда, когда страница действительно открыта внутри приложения — например, пусть приложение добавляет метку к своему user agent или к открываемому адресу, а сайт подставляет атрибуты, когда видит её. Если посетитель один раз определён как пользователь вашего приложения, его следующие страницы сохраняют эту метку, даже если на какой-то из них атрибутов нет.

Для популярных встроенных браузеров ничего делать не нужно: Chatonio сам распознаёт Instagram, Facebook, Messenger, TikTok, Telegram, WeChat, VK, приложения Google и Яндекса и другие, а любой другой встроенный браузер показывает как Другое приложение.

Вход посетителей в чат

Ещё две команды выполняют вход в чат под аккаунтом пользователя, который вошёл на вашем сайте, и выход из него: chatonio('login', …) и chatonio('logout'). Им нужен пропуск с вашего сервера, и они доступны на платных тарифах. См. Виджет веб-чата: вход в чат под аккаунтом посетителя.