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

Виджет Babbler можно поставить одной строкой кода как есть, а можно донастроить под задачу — через объект Babbler в JS SDK ниже.

💡 Как виджет работает, что настраивается в админке и что видит посетитель — в разделе Виджет для сайта.

📋 1. Базовая установка

Зайдите в Настройки -> Виджет, скопируйте код и вставьте его перед тегом </body> на вашем сайте.

Инструкции для платформ:

Tilda: Настройки сайта -> Еще -> HTML-код для HEAD.
WordPress: Используйте плагин Insert Headers and Footers или файл footer.php.
Wix / Shopify: Раздел "Custom Code" или "Scripts".

⚙️ 2. Расширенная конфигурация

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

🎨 Внешний вид

Babbler('configure', {
  primaryColor: '#4f46e5',
  title: 'Поддержка Babbler',
  position: 'left' // 'left' или 'right'
});

👤 Идентификация клиентов

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

Babbler('identify', {
  id: '123',
  signature: '…', // HMAC-SHA256 от id, считается на вашем бэкенде
  name: 'Алексей',
  email: 'alex@example.com'
});

Где взять секрет и как посчитать подпись — в разделе Виджет для сайта.

🚀 3. Автооткрытие и умные подсказки

Автооткрытие: окно открывается само через N секунд — Babbler('configure', { autoOpenDelay: 5 });
Умные подсказки настраиваются в админке и показывают сообщение над кнопкой: через N секунд на странице, при попытке уйти со страницы, при прокрутке до N % или на конкретном адресе. Подсказка показывается один раз за визит и только при закрытом окне.

🛠️ 4. API и События (SDK)

Интегрируйте чат в логику вашего сайта.

Команда	Действие
`Babbler('open')`	Открыть окно
`Babbler('close')`	Закрыть окно
`Babbler('logout')`	Сбросить сессию

Аналитика

Babbler('on', 'rating_submitted', (data) => {
  console.log('Клиент поставил оценку:', data.rating);
});

Полный список событий и команд — в разделе Виджет для сайта.