Настройка виджета веб-чата

Обзор

Виджет веб-чата — это лёгкое встраиваемое окно чата, через которое посетители вашего сайта общаются с вашей службой поддержки (и с ИИ).

Как подключить

1. Откройте Проекты → ваш проект → Каналы
2. Создайте новый канал Веб-чат
3. Задайте цвета и тексты в разделе Внешний вид, а форму перед чатом — в разделе Главный экран и ход разговора
4. Необязательно: чтобы виджет работал только на вашем сайте, добавьте его адрес в URL и домены → Разрешённые источники
5. Скопируйте код для встраивания
6. Вставьте его в HTML вашего сайта прямо перед закрывающим тегом </body>

Если список Разрешённые источники пуст, виджет работает на любом сайте, куда вы его вставите. Добавьте адрес — и список станет строгим: виджет будет работать только на перечисленных адресах, так что никто другой не сможет поставить ваш чат на свои страницы. Вводите полный адрес вместе с https:// и нажимайте Добавить — просто набрать текст недостаточно. Если сайт открывается и с www, и без него, добавьте оба варианта отдельно, иначе на пропущенном адресе виджет не загрузится.

Код для встраивания

Код для встраивания выглядит так:

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

Подставлять YOUR-CHANNEL-ID вручную не нужно. В коде на странице канала идентификатор вашего канала уже подставлен — копируйте как есть.

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

Если ваше мобильное или десктопное приложение показывает ваш сайт во встроенном браузере (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 и Яндекса и другие, а любой другой встроенный браузер показывает как Другое приложение.

Настройка

Внешний вид виджета настраивается в параметрах канала:

• Цвет виджета — цвет кнопки чата и шапки окна
• Приветственное сообщение — показывается при открытии виджета
• Форма перед чатом — собрать имя и/или email посетителя до начала переписки
• Угол кнопки и Угол окна чата — в каком углу находится кнопка и, отдельно, в каком углу открывается окно чата

Каждый раздел страницы настроек канала показывает повседневные настройки сразу, а остальные прячет за ссылкой Дополнительные настройки. Нажмите её, чтобы добраться до угла и отступов от края экрана, светлой/тёмной цветовой схемы, звука уведомлений, брендинга Chatonio и правил, определяющих, на каких страницах виджет вообще появляется. Если рядом со ссылкой стоит число — столько настроек внутри отличаются от значений по умолчанию, так что ничего настроенного вами не прячется без подсказки.

Виджет полностью адаптивный и работает на мобильных устройствах.

Внешний вид

Внешний вид задаётся для каждого канала отдельно, на странице настроек канала «Веб-чат»: Настройки проекта → Каналы → ваш канал веб-чата. За него отвечают два раздела. Внешний вид раскрыт при загрузке страницы и содержит цвета и тексты окна чата. Кнопка чата свёрнута, пока вы её не откроете, и содержит всё, что касается кнопки в углу экрана. Одна кнопка Сохранить изменения внизу страницы сохраняет всю форму целиком.

Выбор кнопки чата

Откройте раздел Кнопка чата. Здесь два независимых выбора: форма кнопки и то, что находится внутри неё.

Стиль кнопки — это форма:

• AI-сфера — анимированная сфера в цвете вашего бренда.
• Круг — круглая кнопка, которую использует большинство сайтов.
• Кнопка с текстом — скруглённая кнопка с подписью рядом с иконкой.
• Квадрат — квадрат со скруглёнными углами.
• Аватар — круг с изображением аватара вашего ИИ и маленькой точкой присутствия.
• Боковая вкладка — вкладка, прижатая к левому или правому краю окна.
• Ваш логотип — круг с изображением, которое вы загрузили для этого канала.
• Без кнопки — кнопки нет вообще. См. раздел «Без кнопки» — это не то же самое, что скрыть виджет на странице ниже.

Что внутри — это иконка или изображение: Чат, Искра, Гарнитура, Точки, Аватар ИИ, Логотип проекта или Своё изображение. Последним трём сначала нужно изображение, и до этого они остаются неактивными. Аватар ИИ загружается на странице проекта Команда, логотип проекта — в разделе Рабочее пространство → Оформление, а у своего изображения кнопки есть собственное поле загрузки в разделе «Кнопка чата»: оно появляется, как только вы выберете форму Ваш логотип или вариант Своё изображение. Оно сохраняется сразу при выборе файла, не дожидаясь Сохранить изменения. Используйте PNG или JPG до 2 МБ; лучше всего подходят квадратные изображения. Всё, что больше 256 пикселей по длинной стороне, уменьшается, а изображения меньшего размера остаются как есть.

Выбор Аватар или Ваш логотип заодно подставляет и подходящее изображение — при условии, что оно уже существует, и только пока Что внутри остаётся на значении Чат. Выбранное вами вручную содержимое никогда не перезаписывается, а форма без изображения остаётся с иконкой чата, пока вы его не загрузите.

Размер предлагает Маленький, Средний (по умолчанию) и Большой — 46, 54 и 66 пикселей. Всё, что расположено над кнопкой, сдвигается вместе с ней, включая свёрнутое превью сообщения и окно чата.

Настройки, которые появляются только для одного стиля

Если выбрана AI-сфера, появляется строка Стиль сферы с тремя вариантами: Северное сияние (световое кольцо вращается чуть снаружи глянцевой сферы), Жидкое ядро (две мягкие формы плавно движутся внутри стекла с разной скоростью) и Стеклянный шар (размытый вихрь за толстым стеклом с резким бликом). Внешнее вращающееся кольцо рисует только «Северное сияние». Вся анимация идёт непрерывно и полностью отключается для посетителей, чьё устройство просит уменьшить движение. При печати страницы виджет тоже скрывается.

Если выбрана Боковая вкладка, появляется строка Расположение вкладки: Сверху, По центру (по умолчанию) или Снизу. Вкладка прижата к краю окна, поэтому горизонтальному отступу не к чему применяться и он игнорируется — страница показывает об этом подсказку. Вертикальный отступ применяется к расположениям «Сверху» и «Снизу» как расстояние до соответствующего края. «По центру» выровнено по центру и для самой вкладки игнорирует оба отступа — при этом расположении они задают положение окна чата и превью сообщения. На экранах шириной 480 пикселей и меньше боковая вкладка превращается в круглую кнопку в углу, а её подпись скрывается.

Текст кнопки появляется только для стилей Кнопка с текстом и Боковая вкладка и показывается только при закрытом чате. Если подпись задана, она становится доступным именем кнопки вместо «Открыть чат». Версии подписи на разных языках редактируются в разделе Языки и переводы, а не здесь.

Положение

В разделе «Кнопка чата» под ссылкой Дополнительные настройки: Угол кнопки (Снизу справа или Снизу слева), Горизонтальный отступ (пикс.) и Вертикальный отступ (пикс.). Они двигают кнопку и всё, что расположено над ней. У окна чата есть собственные Угол окна чата и отступы — под ссылкой Дополнительные настройки в разделе «Внешний вид»; если их не трогать, окно следует за кнопкой.

Кроме варианта Без кнопки, который не рисует кнопку вообще, любой стиль при открытом чате сворачивается до простого круга с иконкой закрытия, а на закрытой кнопке показывает счётчик непрочитанных — до «9+».

AI-сфера — значение по умолчанию только для новых каналов

Каналы веб-чата, созданные после появления AI-сферы, начинают со стиля AI-сфера. Существующие каналы никто не трогал. Канал, настроенный раньше, по-прежнему разрешается в Круг — или в Кнопку с текстом, если у него задан текст кнопки, так что настроенная вами раньше кнопка с текстом ею и останется. В день выхода этой возможности ни один действующий виджет не изменил внешний вид и не изменит, пока кто-нибудь не выберет другой стиль на этой странице.

«Без кнопки» — это не то же самое, что скрыть виджет на странице

Эти две настройки выглядят похоже, а ведут себя совершенно по-разному.

• Стиль кнопки: Без кнопки — виджет по-прежнему загружается и подключается как обычно. Нет только кнопки в углу. Проактивные приветствия и превью новых сообщений всё так же появляются над углом и всё так же открывают чат по клику. В остальное время его открывает что-то на вашей странице — см. следующий раздел.
• Исключение страницы в разделе URL и домены (внутри Дополнительных настроек этого раздела) — виджет на такой странице не загружается вообще. Открыть его со страницы нечем, и ваша собственная кнопка ничего не сделает.

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

В собственном предпросмотре оператора Проверить виджет вариант Без кнопки показывается как круглая кнопка, чтобы предпросмотр не выглядел сломанным.

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

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

• Добавьте 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 для понятных вопросов в один клик, а подстановку — когда посетителю, скорее всего, захочется что-то дописать, например номер заказа. Короткая подсказка обо всём этом есть на странице канала веб-чата, в разделе Открывайте чат своими кнопками.

Светлая и тёмная схема

Цветовая схема находится в разделе Внешний вид, под ссылкой Дополнительные настройки. У неё три значения: Светлая, Тёмная и Как на сайте.

У всех каналов по умолчанию стоит Светлая — и у созданных до появления этой настройки, и у созданных после. Ни один посетитель не увидит другой виджет, пока вы её не измените, а светлая палитра не отличается от той, что была до появления этой возможности. Теперь виджет ещё и сообщает браузеру, какую схему он использует, поэтому системные полосы прокрутки, поля ввода и автозаполнение внутри чата соответствуют схеме, а не остаются на усмотрение устройства посетителя.

Как «Как на сайте» принимает решение

Сначала читается ваша страница, и только если она не говорит ничего, дело доходит до системной настройки посетителя. По порядку:

• Тема, объявленная на <html> или <body>: data-theme, data-color-mode, data-bs-theme или data-color-scheme со значением dark либо light, а также класс dark, dark-mode или theme-dark (и их светлые аналоги). Это учитывается в обе стороны, поэтому страница, объявившая светлую тему, останется светлой, даже если устройство посетителя настроено на тёмную.
• Объявление CSS color-scheme. И color-scheme: dark, и color-scheme: only dark считаются решением; color-scheme: light dark решением не является и передаётся дальше.
• Фон страницы — первый непрозрачный фон, найденный на <body>, затем на <html>. Тёмный фон означает тёмную схему.
• И только если ничего из перечисленного не подошло — системная настройка посетителя.

Поскольку почти каждая реальная страница закрашивает сплошной фон, обычно решает третий шаг, а до системной настройки дело не доходит. Белая страница откроет светлый виджет даже посетителю, у которого устройство в тёмном режиме; так и задумано, потому что тёмный виджет на светлой странице выглядит как поломка. Значения сопоставляются строго, поэтому data-theme="midnight" или data-theme="corporate-dark" сигналом не считается и передаётся дальше.

Схема перепроверяется на лету. Переключатель темы на вашем сайте переключает вместе с собой и виджет, а изменение системной настройки посетителя подхватывается без перезагрузки страницы. Если на вашей странице светлое содержимое обёрнуто в тёмную оболочку, проверка фона может прочитать её как тёмную; объявите data-theme на <html>, чтобы снять неоднозначность.

Цвет бренда в тёмной схеме

Цвет бренда (тёмная) появляется в том же блоке Дополнительных настроек, как только «Цветовая схема» переключена на Тёмная или Как на сайте. Если оставить поле пустым, виджет выводит цвет из вашего Цвета виджета: по-настоящему тёмный цвет осветляется с сохранением оттенка, а цвет средней яркости или светлый используется без изменений. Поэтому яркий синий или зелёный бренд выглядит одинаково в обеих схемах — это ожидаемый результат, а не ошибка. Если вы задаёте значение, это должен быть цвет в шестнадцатеричном виде; всё остальное игнорируется и используется выведенный цвет. Этот же цвет задаёт два оттенка AI-сферы, которые пересчитываются при каждой смене схемы.

Как переопределить схему со своего сайта

Два способа обхода, и оба имеют приоритет над настройкой канала.

Добавьте data-theme в код для встраивания. Он принимает light, dark или auto:

<script async src="https://chatonio.com/widget/loader.js"
        data-channel-id="YOUR-CHANNEL-ID"
        data-theme="dark"></script>

Атрибут читается один раз при загрузке виджета, поэтому его изменение позже ни на что не влияет, а если на странице несколько фрагментов кода встраивания, читается только последний.

Либо вызовите chatonio('theme', 'dark') — также 'light' или 'auto', — и виджет перекрасится сразу. Если строка-инициализатор выше уже добавлена, вызов, сделанный до монтирования виджета, учитывается на первой отрисовке, так что мигания неправильной темы не будет. Нераспознанное значение игнорируется с сообщением в консоли и не сбрасывает установленное вами ранее переопределение; вызов со значением 'auto' — единственный способ вернуться к определению по странице до конца этого просмотра.

При схеме Как на сайте виджетом можно управлять и чисто из своей разметки, объявив на <html> или <body> один из перечисленных выше атрибутов или классов. Именно это позволяет собственному переключателю темы сайта управлять виджетом без какой-либо интеграции на JavaScript.

Всплывающие окна и панель капчи

Всплывающие окна на сайте следуют той же цветовой схеме, и панель капчи тоже, когда она показывается. Любой цвет, заданный вами в кампании всплывающих окон, сохраняется в обеих схемах, поэтому полностью оформленная кампания выглядит в тёмной схеме так же, и меняется только то, что вы не задали. На странице, где виджет исключён вашими правилами доменов или URL, всплывающие окна всё равно работают, но всегда отрисовываются в светлой схеме, потому что схему определяет виджет, который там не загружается.

На языке ваших посетителей

Виджет подстраивается под каждого посетителя автоматически. Когда кто-то открывает чат, Chatonio показывает его на языке вашей страницы — читается стандартный атрибут <html lang>, поэтому посетитель, просматривающий русскую версию вашего сайта, увидит русский виджет, даже если у него в браузере другой язык. Заданные вами заголовок, подзаголовок, приветствие, сообщение в офлайн-режиме и текст кнопки, отображаемое имя вашего ИИ-ассистента и статьи вашего центра поддержки (база знаний и частые вопросы) показываются на этом языке всякий раз, когда соответствующая версия существует. Если страница не объявляет язык, виджет опирается на язык браузера посетителя.

Собственные кнопки и подписи виджета поставляются на английском, русском и украинском, но всё, что пишете вы и ваш ИИ, можно предложить на стольких языках, сколько вы переведёте. Язык, который посетитель видит до того, как начнёт писать, следует за страницей (с языком браузера как запасным вариантом); как только он начинает писать, ИИ просто отвечает на том языке, которым он пользуется, а первый ответ тоже следует за языком страницы.

Добавление своих переводов

На странице настроек канала веб-чата откройте раздел Языки и переводы и найдите блок Переводы текста. Выберите язык в списке Добавить язык — для него появится вкладка с пятью текстами, которые видит посетитель: Заголовок, Подзаголовок, Приветственное сообщение, Сообщение в офлайн-режиме и Текст кнопки. Оставьте поле пустым — и вместо него подставится текст на языке канала по умолчанию. Языков можно добавить сколько угодно; у каждого будет своя вкладка. Чтобы база знаний и частые вопросы появились на другом языке, добавьте переводы к этим статьям как обычно — виджет подхватит их автоматически.

Как задать конкретный язык принудительно

Если ваш сайт не задаёт стандартный атрибут <html lang> — или вы хотите, чтобы конкретный код встраивания всегда использовал один язык, — добавьте в него атрибут data-lang. Его значение имеет приоритет над автоопределением:

<script async src="https://chatonio.com/widget/loader.js" data-channel-id="YOUR-CHANNEL-ID" data-lang="ru"></script>

Свои поля формы перед чатом

Форма перед чатом не ограничена именем и email. В настройках канала веб-чата откройте Главный экран и ход разговора и найдите под заголовком Форма перед чатом блок Свои поля: там можно добавить собственные поля — короткий текст, email, телефон, длинный текст, выпадающий список или флажок — и отметить любое из них обязательным. Всё, что вводят посетители, сохраняется в их контакте и показывается вашим операторам в информационной панели рядом с чатом. Куда попадает каждый ответ и как (и когда) его можно использовать для маркетинговых рассылок, рассказано в статье Сбор имён, email и других данных в веб-чате.

Как заговорить первым

Тот же виджет может и сам приветствовать посетителей. В разделе Маркетинг настраиваются Проактивные сообщения — автоматическое приветствие в чате, которое появляется после того, как посетитель провёл время на сайте, открыл определённую страницу или собирается уйти, — а также всплывающие окна и баннеры на сайте. Проактивное приветствие сразу открывает настоящий диалог, который ведёт ваш ИИ, поэтому никто не остаётся без ответа. Проактивные сообщения доступны на тарифах Advanced, Pro и Ultimate, всплывающие окна — на Pro и Ultimate. См. Проактивные сообщения.