Чат-бот на сайт: окно диалога в стиле вашего сайта
Чат-бот на сайт — это окно диалога в углу страницы: посетитель задаёт вопрос, не уходя с сайта, а бот отвечает по вашим данным и принимает заявку. Мы делаем такое окно в стиле вашего сайта, подключаем одним тегом и следим, чтобы виджет не ломал страницы.
Как подключить чат-бот на сайт
Нужен один тег `script` в общем шаблоне сайта, перед закрывающим `body`. В теге указываются идентификатор бота и ключ доступа, которые выдаём мы: бот должен быть заведён у нас, поэтому ключ нельзя придумать самому. Всё оформление задаётся атрибутами этого же тега, вёрстку страниц править не приходится.
Загрузчик отдаётся с запретом кэширования, поэтому обновления виджета доходят до сайта сами. Вам не нужно перевыпускать сайт, чтобы получить исправление или новую возможность окна.
Окно не конфликтует со страницей
Окно чат-бота на сайт живёт в изолированной оболочке, Shadow DOM. Стили вашего сайта не искажают чат, а стили чата не задевают страницу. Кнопка сама встаёт над другими плавающими кнопками сайта — например, над кнопкой «наверх» или над баннером, — потому что виджеты делят общий реестр углов экрана и не перекрывают друг друга.
Оформление чат-бота на сайт под ваш бренд
Для окна есть 11 готовых оформлений: terminal, neon, ink, soft, glass, steel, blue, red, brand, keycap и dark. Дальше настраивается свой цвет, иконка, текст на кнопке и её форма: полоса, круг или квадрат. Окно можно прижать к левому или к правому углу, поднять над нижней панелью, а поле ввода сделать высотой от одной до трёх строк.
Пузыри сообщений тоже стилизуются: доступно семь стилей, от привычных мессенджеров до терминала. Аватарки у сообщений включены по умолчанию, для бота и посетителя можно поставить эмодзи или свою картинку.
Что умеет отвечать чат-бот на сайт
Ответ бота может состоять из текста, картинок альбомом с подписями и кнопок-ответов. Нажатие на кнопку уходит боту как нажатие, а не как набранный текст, поэтому сценарии с выбором — «Цены», «Доставка», «Связаться с менеджером» — работают без опечаток и разночтений.
Если вам нужно несколько способов связи, включается меню каналов: веб-чат, Telegram, WhatsApp и MAX. Telegram, WhatsApp и MAX открываются как ссылки на ваши контакты в этих сервисах. Если канал всего один, меню не показывается, и чат открывается сразу.
Языки окна и поведение при сбое
Интерфейс окна чат-бота работает на трёх языках: русском, английском и казахском. Язык берётся из атрибута `lang` страницы или из настройки тега. Для остальных языков окно покажет русские подписи, и это стоит учесть заранее. На каком языке отвечает сам бот, определяют его настройки.
Если бот временно недоступен, посетитель видит запасной текст: «Не получилось связаться — напишите в Telegram ниже» со ссылкой на Telegram, когда он задан. Чат не зависает и не оставляет человека без пути к вам.
Посетителю не нужен аккаунт
Чат-боту на сайте не нужны регистрации: идентификатор посетителя хранится в браузере, а диалог бот помнит на стороне сервера. Человек не регистрируется и не вводит почту, пока сам не захочет оставить контакт. Для сайтов в России окно и ответы бота отдаются через ваш домен — прокси на стороне сайта, — чтобы чат загружался у всех посетителей.
Где посмотреть чат-бот на сайт вживую
Такой же чат работает на семи сайтах нашей группы, у каждого сайта свой бот. Посмотреть можно на этой странице: кнопка «Написать» справа внизу открывает окно. Тот же способ подключения одним тегом используется в Багфиксе — кнопке «Сообщить о проблеме», но функции у них разные. Ответы на ваших документах — на странице про AI-бота на ваших данных, живой диалог с человеком — на странице про оператора.
Цены и состав — в тарифах, а чтобы обсудить сайт, оставьте заявку через контакты.
Вопросы и ответы
Как поставить чат на сайт?
Вставить один тег `script` в общий шаблон сайта. Идентификатор бота и ключ доступа выдаём мы, оформление задаётся атрибутами тега.
На каких языках работает окно чата?
Интерфейс окна: русский, английский, казахский. На каком языке отвечает бот, зависит от его настроек.
Что увидит посетитель, если бот недоступен?
Запасное сообщение со ссылкой на Telegram. Окно не зависает.
Читайте также
Пришлите адрес сайта — подскажем, какое оформление окна подойдёт и как подключить чат без правок вёрстки.