ASI Robotics AI · web · robotics

Чат-бот на сайт: окно диалога в стиле вашего сайта

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

Как подключить чат-бот на сайт

Нужен один тег `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. Окно не зависает.

Читайте также

Пришлите адрес сайта — подскажем, какое оформление окна подойдёт и как подключить чат без правок вёрстки.

Обсудим ваш проект?

Оставьте контакты — вернёмся с вопросами и предложением.