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

Виджет — это встраиваемый модуль онлайн-чата, размещаемый на сайте для взаимодействия посетителей с ИИ-агентом.

В интерфейсе сайта виджет отображается в виде кнопки. При нажатии открывается окно чата.

Если в настройках добавлены дополнительные каналы связи, виджет работает в формате мультивиджета. В этом случае при нажатии отображаются:

• иконка чата;

• иконки подключённых мессенджеров (ВКонтакте, WhatsApp, Telegram, MAX).

Логика работы

• при нажатии на иконку чата открывается окно диалога с ИИ-агентом.

• При нажатии на иконку мессенджера соответствующий канал связи открывается в новой вкладке браузера.

Как создать виджет

Чтобы создать Виджет:

1. Перейдите в раздел Интеграции -> Чат на сайт.

2. Во вкладке Виджет для сайта (открывается по умолчанию) нажмите на кнопку Создать чат.

Как настроить виджет

Настройка виджета выполняется в правой секции интерфейса.

Все изменения отображаются в блоке предварительного просмотра ("Контейнер для генерации виджета" в центральной секции).

После любых настроек виджета необходимо сохранить изменения и встроить обновленный код виджета в код Вашего сайта.

Изменения вступают в силу на сайте ТОЛЬКО после замены кода.

1. Настройка шапки виджета

Вы можете изменить:

• текст заголовка;

• цвет фона;

• цвет текста.

Цвет можно указать:

• вручную (HEX-код, например #1F6BFF);

• через встроенную палитру выбора цвета (для этого нажмите на квадратную иконку с отображением выбранного цвета рядом с полем ввода HEX-кода цвета).

Изменения сразу отображаются в области предварительного просмотра.

2. Настройка окна чата

Язык интерфейса

Выберите язык отображения даты и системных элементов:

• Русский

• Английский

• Белорусский

• Казахский

• Узбекский

• Таджикский

• Азербайджанский

• Армянский

• Грузинский

Язык влияет только на интерфейс виджета, а не на язык ответов ИИ-агента.

Текст в поле ввода

Вы можете изменить текст-подсказку (placeholder) в поле ввода сообщения. Например:

Задайте вопрос Напишите ваше сообщение... Чем можем помочь?

Стартовое сообщение

Это первое сообщение, которое пользователь видит при открытии чата.

Можно:

• оставить текст по умолчанию;

• указать собственное приветствие.

Фон чата

Можно выбрать:

• цвет фона чата

• фоновое изображение в виде паттерна (монохромного повторяющегося рисунка на прозрачном фоне).

Для фонового изображения доступна настройка интенсивности:

• Тёмный

• Серый

• Светлый

Если выбрать «Не установлено» — паттерн применяться не будет.

3. Настройка сообщений

Вы можете отдельно настроить:

• цвет фона сообщений ИИ-агента;

• цвет текста ИИ-агента;

• цвет фона сообщений пользователя;

• цвет текста пользователя.

4. Настройка иконки чата

Можно изменить:

• форму иконки;

• цвет фона;

• цвет линии иконки.

Стандартный цвет иконок мессенджеров

Если переключатель активирован — иконки WhatsApp, Telegram и других каналов будут отображаться в их стандартных цветах.

Если переключатель выключен — выбранный цвет будет применён ко ВСЕМ иконкам.

Активирован

Не активирован

5. Добавление каналов связи (мультивиджет)

Вы можете добавить ссылки на:

• WhatsApp (номер в международном формате, например, [phone])

• Telegram (https://t.me/username)

• VK (https://vk.com/...)

• MAX (https://max.ru/...)

Если каналы добавлены — при нажатии на кнопку пользователь увидит список способов связи.

Если каналы не указаны — будет открываться только чат с ИИ-агентом.

6. Настройка автоприглашения

Автоприглашение — это всплывающее окно рядом с иконкой чата.

Особенности автоприглашения:

• появляется через заданное количество секунд после открытия страницы с виджетом;

• сопровождается звуком;

• открывает чат при нажатии;

• закрывается при нажатии на кнопку закрытия ("крестик").

Чтобы отключить автоприглашение — установите значение 0 секунд.

7. Отступы от края экрана

Вы можете задать:

• отступ снизу (px);

• отступ справа (px).

Это помогает:

• избежать перекрытия с кнопками сайта;

• повысить удобство использования.

8. Стили формы персональных данных

Если в агенте есть функция с действием "Форма персональных данных", в настройках виджета вы можете персонализировать внешний вид формы, которая открывается внутри чата.

Подробнее про настройку стилей формы персональных данных вы можете узнать в статье: Стили формы персональных данных в чате на сайт.

Сохранение и сброс настроек

После всех внесенных изменений обязательно нажмите кнопку Сохранить.

Кнопка Сбросить возвращает все изначальные настройки виджета.

Предварительный просмотр виджета

Все изменения отображаются в блоке предварительного просмотра ("Контейнер для генерации виджета" в центральной секции).

Ссылки, открываемые из чата, запускаются в отдельном окне браузера.

Как добавить виджет на ваш сайт

Шаг 1. Нажмите на кнопку "Встроить на сайт":

Шаг 2. Появится окно с кодом.

1. Выберите версию виджета:

• Международная

• Для России

• Для Казахстана

1. Нажмите кнопку Копировать

Шаг 3. Вставьте код в тело вашего сайта перед закрывающим

</body>

Виджет чата теперь активен на вашем сайте!

После любых настроек виджета необходимо сохранить изменения и встроить обновленный код виджета в код Вашего сайта.

Изменения вступают в силу на сайте ТОЛЬКО после замены кода.

Как открыть чат по кнопке на вашем сайте

Если на сайте есть кнопка, например «Связаться с менеджером», и вы хотите, чтобы при её нажатии открывался чат — добавьте событие JavaScript:

onclick="window.dispatchEvent(new Event('openChatWidgetNB'))"

Код вашей кнопки должен получить такой вид

<button type="button" onclick="window.dispatchEvent(new Event('openChatWidgetNB'))">
  Связаться с менеджером
</button>