Виджет веб-чата — это кнопка чата, которую вы добавляете на любую веб-страницу одним тегом <script>. Посетители общаются с вашим ИИ; когда разговор берёт на себя человек, его ответы появляются в том же окне чата — в реальном времени.
wk_…, который направляет каждый чат именно в ваш desk. Используйте там кнопку Copy snippet (скопировать фрагмент), а Preview widget (предпросмотр виджета) — чтобы посмотреть на него ещё до того, как он попадёт на ваш сайт. См. Settings.Как добавить его на сайт
Вставьте фрагмент кода прямо перед закрывающим тегом </body>:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>Виджет загружается в собственном фрейме, поэтому не конфликтует со стилями и скриптами вашего сайта.
Параметры
| Атрибут | Что делает |
|---|---|
data-key |
Обязательный. Ключ виджета вашего desk, из раздела Settings. |
data-position |
right (по умолчанию) или left — в каком углу располагается кнопка. |
data-offset |
Отступ от угла в пикселях (по умолчанию 20). |
data-lang |
Жёстко задаёт язык виджета, например ja. Не указывайте его — и каждый посетитель увидит свой язык браузера. |
Если в том же углу вашей страницы показывается значок reCAPTCHA, виджет автоматически поднимается над ним, чтобы они не перекрывались.
На каком языке говорит виджет
Если ничего не указывать, виджет следует языку браузера каждого посетителя. Японский посетитель англоязычного сайта получит окно чата на японском; настраивать ничего не нужно, и разные посетители одной и той же страницы могут видеть разные языки.
Чтобы вместо этого закрепить один язык — для сайта, рассчитанного на один рынок независимо от того, кто его читает, — добавьте data-lang:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>Переведён на 11 языков: английский, японский, корейский, китайский (упрощённый и традиционный), испанский, французский, немецкий, португальский, арабский и русский. Арабский отображается справа налево, а китайский подстраивается под письменность посетителя — традиционные иероглифы для Тайваня, Гонконга и Макао, упрощённые во всех остальных случаях. Любой другой язык даёт английский, а не наполовину переведённое окно, так что data-lang="it" покажет английский.
data-lang. Ответ ИИ следует языку, на котором пишет клиент. А отвечать ИИ может только по статьям базы знаний, написанным на этом языке, — статья на английском не ответит на вопрос по-японски. Если вы обслуживаете клиентов на двух языках, пишите статьи на обоих. См. ваша база знаний.То же самое относится и к размещённой у нас веб-форме: добавьте ?lang=ja к её адресу, чтобы закрепить язык, или не указывайте ничего, чтобы следовать за посетителем.
Фирменный цвет
Пока вы не выбрали свой цвет, чат окрашен в наш бирюзовый. Выберите собственный — и он будет использоваться для шапки чата, его кнопок и сообщений самого клиента, для значка закрытия (✕), который показывает кнопка чата, пока окно открыто, а также для вашей размещённой у нас веб-формы.
- Откройте раздел Settings вашего desk. В блоке Web chat (веб-чат) найдите Brand colour (фирменный цвет) — сразу под Chat bubble icon (значок кнопки чата).
- Выберите цвет и нажмите Save colour (сохранить цвет).
- Передумали? Reset to default (вернуть значение по умолчанию) возвращает наш бирюзовый цвет.
Ваш цвет появится на сайте примерно через 5 минут, и заново вставлять ничего не нужно. Как и значок, менять его могут только администраторы desk и владелец.
Свой значок кнопки чата
По умолчанию кнопка на вашем сайте — это наш бирюзовый круг со значком речевого облачка (💬). Вы можете заменить его собственным PNG, чтобы виджет выглядел частью вашего сайта. Загруженное изображение становится всей кнопкой целиком: оно заполняет все 56 пикселей кнопки, и наш бирюзовый круг за ним больше не рисуется.
- Откройте раздел Settings вашего desk. Перейдите к блоку Web chat (веб-чат) и найдите Chat bubble icon (значок кнопки чата).
- Нажмите Upload PNG (загрузить PNG) и выберите файл. Образец кнопки рядом покажет, как именно она будет выглядеть.
- Передумали? Reset to default (вернуть значение по умолчанию) возвращает наш значок речевого облачка.
| Изображение | Что подходит |
|---|---|
| Формат | PNG |
| Рекомендуемый размер | Квадрат, не менее 112×112 пикселей |
| Размер на экране | Заполняет всю кнопку, 56×56 пикселей |
| Форма | Задаётся самим изображением — настоятельно рекомендуется прозрачный фон |
| Размер файла | Не более 256 КБ |
Кнопка рисуется размером 56×56 пикселей, поэтому исходник 112×112 (или больше) сохранит ваш знак чётким на экранах с высоким разрешением. Лёгкая тень добавляется за вас и повторяет контур вашего изображения, так что впекать её в PNG не нужно.
Значок кнопки — это изображение, поэтому ваш фирменный цвет его не перекрашивает: посетители видят именно тот значок, который вы загрузили. А поскольку наш круг за вашим изображением больше не рисуется, при прозрачном PNG посетители видят цвет вашего собственного изображения.
Что видит посетитель
- Он открывает окно чата и указывает имя, адрес электронной почты и первое сообщение.
- Отвечает ИИ — по вашим знаниям, со ссылками на источники, прямо в чате, не дожидаясь никого из вашей команды.
- Разговор может взять на себя человек — его ответ появится в том же чате через несколько секунд.
Оставленный адрес электронной почты — это то, по чему посетителя узнают в следующий раз; см. ваша база клиентов.
data-key везде, где вставлен фрагмент кода, и везде, откуда его отправляет ваша форма.Веб-чат — один из пяти способов обратиться к вам; см. как клиенты обращаются к вам и как устроено обращение, когда чат уже начался.