База знаний

Виджет для сайта

Виджет — это окно чата в углу вашего сайта. Посетитель пишет прямо со страницы, не оставляя её и не заполняя форму, а сообщение попадает в общий инбокс рядом с Telegram, WhatsApp и остальными каналами.

Ставится одной строкой кода, работает на любом сайте, конструктора или CMS. Виджет бесплатен и не занимает платный канал.


Как он устроен

  • Кнопка в углу страницы. Клик открывает окно чата.
  • Диалог заводит только посетитель. Загрузка страницы и даже открытие окна ничего не создают: диалог появляется в инбоксе, когда человек отправит сообщение, нажмёт вопрос из FAQ или пришлёт файл. Поэтому в инбоксе нет пустых обращений от тех, кто просто заглянул в чат.
  • Ответы приходят мгновенно, в обе стороны, без перезагрузки страницы.
  • Изоляция от сайта. Виджет живёт в Shadow DOM: ваши стили его не ломают, а он не ломает вёрстку сайта.

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

Настройки → Интеграции → Виджет. Слева поля, справа живое превью: видно результат до сохранения.

Настройка Что делает
Виджет включён Выключатель. Когда выключен, кнопка на сайте не рисуется, а новые сообщения не принимаются — код со страниц убирать не нужно
Заголовок и подзаголовок Шапка окна чата. Например, «Поддержка» и «Отвечаем за 5 минут»
Приветствие Первое сообщение в ленте. Посетитель видит его сразу, а сохраняется оно вместе с его первым сообщением
Цвет Основной цвет кнопки и сообщений: готовая палитра или свой HEX
Расположение Кнопка справа или слева внизу
Иконка кнопки Своё изображение вместо стандартной иконки чата
Автооткрытие Открыть окно само через N секунд. 0 — выключено
Звук Сигнал при ответе оператора
Оценка качества Просить оценку при закрытии диалога
FAQ Частые вопросы в окне чата: клик отправляет вопрос и сразу показывает готовый ответ
Автоматизация Умные подсказки: показать сообщение через N секунд, при уходе со страницы, при прокрутке или на конкретном адресе
Язык интерфейса Русский, английский или по языку браузера. Приветствие и FAQ остаются вашим текстом
Разрешённые сайты Адреса, с которых виджет принимает обращения. Пусто — с любых
Секрет подписи Для идентификации авторизованных пользователей, см. раздел ниже

Настройки применяются сразу после сохранения, менять код на сайте не нужно.


Что видит посетитель

Первый визит

Кнопка в углу. Если настроены умные подсказки, в нужный момент над кнопкой появится сообщение вроде «Нужна помощь?». Подсказка показывается один раз за визит и не преследует человека на каждой странице.

Открыв окно, посетитель видит приветствие и FAQ. В базе всё ещё ничего нет.

Первое сообщение

Сообщение появляется в ленте сразу с пометкой «Отправляется», а когда сервер подтвердит — со временем отправки. В этот момент в инбоксе появляется новый диалог и уведомление оператору. Если сеть подвела, у сообщения будет кнопка «Повторить», текст не потеряется.

Файлы

Можно приложить файл кнопкой, перетащить на окно или вставить скриншот из буфера. До 5 МБ: изображения, PDF, документы Word и Excel, текст. Картинки показываются превью, остальное — ссылкой.

Возвращение на сайт

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

История подгружается по мере прокрутки вверх.

Правка и закрытие

Своё сообщение можно исправить в течение 5 минут. Когда оператор закрывает диалог, в ленте появляется «Диалог завершён». Написать всё равно можно: новое сообщение переоткрывает тот же диалог, и вся переписка остаётся на месте.

Несколько вкладок

Если сайт открыт в нескольких вкладках, чат в них синхронный: ответ оператора приходит во все, а диалог, начатый в одной вкладке, подхватывают остальные.


Что может оператор

Отвечает из инбокса как в любом другом канале: посетитель видит ответ сразу и видит, когда оператор печатает. Дополнительно в меню диалога есть действия, которые работают только с виджетом:

Действие Что происходит у посетителя
Запросить контакты В окне открывается форма email и телефона. Заполненные данные дописываются в карточку клиента
Запросить оценку Открывается форма оценки от 1 до 5. Диалог при этом не закрывается
Перенаправить на URL В новой вкладке открывается нужная страница — например, оплата или инструкция
Привлечь внимание Кнопка виджета вздрагивает со звуком, если человек отвлёкся на другую вкладку

Если в этот момент посетитель ушёл со страницы, действие не пропадёт: оно выполнится, когда он вернётся в течение суток.


Оценка качества

Когда в настройках включена оценка, закрытие диалога работает так:

  1. Оператор нажимает «Закрыть». Посетителю показывается форма оценки, а диалог в инбоксе помечается «Ждёт оценку».
  2. Посетитель ставит оценку — диалог закрывается сразу, оценка попадает в аналитику и в карточку диалога.
  3. Не ответил — диалог закроется сам через 30 минут.
  4. Написал вместо оценки — закрытие отменяется: значит, вопрос не решён.

Форма переживает перезагрузку страницы: если посетитель обновил вкладку, оценку у него всё равно спросят.


Идентификация пользователей

Если на сайте есть личный кабинет, виджет может узнавать вошедшего пользователя. Тогда оператор видит имя и email вместо «Guest», а сам человек — свою переписку на любом устройстве, где он авторизован.

Чтобы посторонний не мог назваться чужим ID и прочитать чужую переписку, идентификатор подписывается на вашем сервере.

1. Возьмите секрет в настройках виджета, блок «Идентификация пользователей». Он должен остаться на сервере: не выводите его в HTML и не храните в коде страницы.

2. Подпишите ID пользователя на своём бэкенде:

// Node.js
const signature = require('node:crypto')
  .createHmac('sha256', process.env.BABBLER_IDENTITY_SECRET)
  .update(String(user.id))
  .digest('hex')
// PHP
$signature = hash_hmac('sha256', (string) $user->id, getenv('BABBLER_IDENTITY_SECRET'));
# Python
import hashlib, hmac, os
signature = hmac.new(os.environ['BABBLER_IDENTITY_SECRET'].encode(), str(user.id).encode(), hashlib.sha256).hexdigest()

3. Передайте её виджету на странице:

Babbler('identify', {
  id: user.id,
  signature: signature,
  email: 'client@example.com',
  name: 'Алексей',
  phone: '+7 999 000-00-00'
});

Подписывается только id. Имя, email и телефон приходят из браузера, поэтому они лишь дополняют карточку этого пользователя и никогда не подбирают чужую. Без подписи или с неверной подписью сервер ответит отказом, а виджет продолжит работать как для обычного посетителя.

Если пользователь вышел из личного кабинета, вызовите Babbler('logout'): сессия и история в браузере очистятся.

Секрет можно перевыпустить кнопкой «Перевыпустить». Старые подписи сразу перестанут работать, поэтому меняйте его вместе с переменной окружения на своём сервере.


Управление из кода (JS SDK)

Виджет доступен глобальной функцией Babbler. Команды, вызванные до загрузки скрипта, не теряются: они выполнятся после старта.

Команды

Команда Действие
Babbler('open') Открыть окно чата
Babbler('close') Закрыть окно
Babbler('toggle') Переключить
Babbler('identify', {…}) Привязать авторизованного пользователя
Babbler('configure', {…}) Изменить настройки на лету
Babbler('logout') Очистить сессию и историю в браузере
Babbler('destroy') Полностью убрать виджет со страницы
Babbler('on', 'событие', fn) Подписаться на событие
Babbler('off', 'событие', fn) Отписаться

Настройки из кода

Всё, что задано в init или configure, важнее настроек из админки — так можно менять вид виджета на отдельных страницах:

Babbler('configure', {
  title: 'Поддержка Premium',
  primaryColor: '#4f46e5',
  position: 'left',
  locale: 'en'
});

Полезные параметры: title, subtitle, welcomeMessage, primaryColor, position, locale, autoOpenDelay, soundEnabled, showRating, faq, smartTriggers, mode (floating или fullscreen).

События

Babbler('on', 'rating_submitted', (data) => {
  // отправить оценку в свою аналитику
});
Событие Когда срабатывает
widget_booted Виджет загрузился
widget_opened, widget_closed Окно открыли или закрыли
chat_init_started, chat_init_succeeded, chat_init_failed Создание диалога
proactive_bubble_shown, proactive_bubble_clicked Показ и клик по умной подсказке
faq_clicked Выбран вопрос из FAQ
lead_form_shown, lead_form_submitted, lead_form_skipped Форма контактов
rating_dialog_opened, rating_submitted, rating_cancelled Оценка качества
attachment_upload_started, attachment_upload_succeeded, attachment_upload_failed Загрузка файла

Email, телефон и имя в данных события скрыты: передавать их в сторонние счётчики виджет не будет.


Безопасность и приватность

  • Без cookie. Переписка привязана к браузеру через localStorage, баннер согласия на cookie из-за виджета не нужен.
  • Изоляция. Виджет не читает содержимое вашего сайта и не имеет доступа к его коду.
  • Файлы проверяются по типу, расширению и содержимому: под видом картинки не загрузить исполняемый файл.
  • Разрешённые сайты. Если вы перечислили адреса в настройках, с чужого сайта ваш виджет обращения принимать не будет.
  • Служебное скрыто. Назначения операторов, внутренние заметки и системные записи диалога посетителю не видны — только сама переписка.
  • Перенаправление ограничено вашим сайтом: увести посетителя на посторонний адрес через чат нельзя.

Ограничения

Параметр Значение
Длина сообщения 4096 символов
Размер файла 5 МБ
Форматы файлов JPG, PNG, GIF, WebP, PDF, TXT, DOC, DOCX, XLS, XLSX
Правка своего сообщения 5 минут
Ожидание оценки 30 минут
Автозакрытие без сообщений 3 дня

Что дальше

Готовы попробовать?

Подключите все каналы в одном окне. 14 дней бесплатно.