Веб-виджет

Веб-виджет позволяет встроить окно живого чата, управляемого вашим ИИ-ботом, непосредственно на любой сайт. Настройте его под свой бренд и разверните за считанные минуты.

Widget Settings & Live Preview

Установка

Перейдите в Каналы → Веб-виджет в левом меню.
Нажмите Создать виджет и дайте ему название.
Настройте параметры виджета (см. раздел «Настройка» ниже).
Скопируйте предоставленный фрагмент кода для встраивания.
Вставьте фрагмент в HTML вашего сайта, непосредственно перед закрывающим тегом </body>.
Сохраните и опубликуйте сайт — виджет появится немедленно.

Код встраивания

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

Замените YOUR_BOT_ID и YOUR_WIDGET_ID на значения, указанные в вашей панели управления.

Настройка

Параметр	Описание
Цвет темы	Установите основной цвет в соответствии с вашим брендом (HEX-код или палитра)
Приветственное сообщение	Первое сообщение, отображаемое при открытии виджета пользователем
Положение	Выберите размещение в правом нижнем или левом нижнем углу экрана
Аватар	Загрузите пользовательское изображение аватара для бота

Дополнительные параметры включают:

Заголовок виджета — название, отображаемое в заголовке виджета
Текст-подсказка — подсказка внутри поля ввода сообщения
Задержка автооткрытия — автоматически открывать виджет через N секунд (необязательно)
Скрыть на мобильных — переключить видимость виджета на мобильных устройствах

Принцип работы

Пользователь открывает виджет — окно чата выдвигается из угла страницы.
Сообщение отправляется боту — сообщение пользователя передаётся в Clienta.ai через защищённое WebSocket-соединение.
ИИ обрабатывает и отвечает — бот извлекает нужный контент из базы знаний и формирует ответ.
Передача человеку при необходимости — если уверенность низкая или пользователь запрашивает оператора, разговор направляется доступному агенту через входящие Диалогов.

Контактная форма

v1.6.8

Когда ИИ-бот офлайн или не может ответить, виджет показывает всплывающий CTA-баллон, предлагающий посетителю оставить контактные данные. Нажатие на баллон открывает контактную форму:

Поле	Обязательное	Примечания
Email	Да	Всегда требуется для обратной связи
Телефон	Нет	Включает селектор кода страны с 37 странами и эмодзи-флагами (например, 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81). Серверная валидация проверяет корректность введённых кодов.
Имя	Нет	Имя посетителя
Сообщение	Нет	Дополнительный контекст

Отправка контактной формы создаёт тикет, видимый на странице Тикеты в панели администратора; при наличии отображаются как email, так и телефон.

Новый чат после завершения

v1.6.8

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

Очищает историю текущего диалога
Переподключается с новой WebSocket-сессией
Возвращает виджет в исходное состояние

Это позволяет посетителям начать новый диалог без обновления страницы.

WebSocket в реальном времени

Виджет использует постоянное WebSocket-соединение для обмена сообщениями в реальном времени с минимальной задержкой. Ключевые особенности:

Автопереподключение — клиент автоматически переподключается при разрыве соединения.
Индикатор набора — отображает анимацию набора текста, пока бот формирует ответ.
Индикатор набора агента — v1.6.8 Когда оператор-человек печатает ответ, виджет показывает посетителю анимацию набора текста в реальном времени.
История сообщений — история диалога сохраняется в течение текущей сессии браузера.
Синхронизация вкладок — если у пользователя открыто несколько вкладок, состояние диалога синхронизируется.

Ответы в формате Markdown

v1.6.4

Сообщения ИИ и агентов отображаются в виде форматированного markdown вместо обычного текста. Поддерживаемое форматирование включает:

Жирный, курсив, ~~зачёркнутый~~
Ссылки (открываются в новой вкладке автоматически)
Встроенный код и блоки кода с ограждением
Нумерованные и маркированные списки
Заголовки, цитаты и таблицы

Весь markdown-контент очищается с помощью строгого списка разрешённых элементов для предотвращения XSS-атак. Настройка не требуется — рендеринг markdown включён по умолчанию для всех ответов ИИ и агентов. Сообщения пользователей остаются в виде обычного текста.

Аватар бренда

v1.6.4

Отображайте логотип вашего бренда или пользовательский аватар в заголовке виджета и на главном экране. Задайте avatarUrl в Настройки → Каналы → Web → Кастомайзер или передайте его как config.theme.avatarUrl в коде встраивания.

Принимаются только URL с https://
Если URL недействителен или изображение не загружается, отображается стандартная иконка-искра
Рекомендуется: квадратное изображение (например, 128 × 128 пикселей) для наилучшего результата

Подробнее см. Настройка виджета — Аватар.

Метки ИИ и человека

v1.6.4

Каждое сообщение не от пользователя отображается с небольшой меткой автора, идентифицирующей отправителя:

Тип автора	Отображаемая метка
ИИ-бот	«ИИ-ассистент» (локализовано)
Оператор-человек	Имя агента (например, «Sarah»)

Метки локализованы на все 15 поддерживаемых языков и доступны программам чтения с экрана. Это помогает посетителям чётко различать ответы ИИ и человека, поддерживая принципы прозрачности.

Язык приветствия

v1.6.2

Приветственное сообщение виджета поддерживает три языковых режима, настраиваемых в Настройки → Каналы → Web → Кастомайзер → Режим приветствия:

Режим	Поведение
Статический	Отображает одно и то же приветствие всем посетителям независимо от языка
По языку посетителя	Показывает приветствие на языке посетителя — настройте отдельный текст приветствия для каждой из 15 локалей
Язык организации	Всегда показывает приветствие на основном языке ответов организации (задаётся в Настройках ИИ)

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

Пошаговую настройку см. в Настройка виджета — Режим приветствия.

Выбор языка

v1.6.2

Виджет может отображать иконку глобуса в заголовке, позволяющую посетителям явно выбрать предпочитаемый язык. Эта функция отключена по умолчанию и должна быть включена для каждого виджета в Настройки → Каналы → Web → Кастомайзер.

При включении:

Иконка глобуса (🌐) появляется в заголовке виджета
Посетители могут выбирать из до 15 поддерживаемых локалей
Выбор языка фиксирует все ответы ИИ на этом языке на время сессии, отменяя автоопределение
Фиксация сохраняется, даже если посетитель пишет на другом языке

Поддержка RTL (письма справа налево)

v1.6.2

Виджет и лендинг полностью поддерживают RTL-макеты для арабского и иврита. Когда посетитель использует RTL-локаль:

Весь макет зеркально отражается (выравнивание текста, навигация, элементы интерфейса)
Атрибут <html dir="rtl"> устанавливается автоматически
Сообщения чата и поле ввода корректно выравниваются для чтения справа налево

Ручная настройка не требуется — RTL активируется автоматически на основе выбранной локали.

Резервный интерфейс при таймауте монтирования

v1.6.5

Если скрипт виджета (widget.js) не загружается в течение 10 секунд, вместо пустого места отображается резервный интерфейс. Он включает кнопку повтора, позволяющую посетителю попытаться перезагрузить виджет без обновления страницы.

Это защищает пользовательский опыт при сетевых проблемах, блокировщиках рекламы или сбоях CDN, препятствующих монтированию виджета.

Визуальный редизайн виджета

v1.6.8

В версии v1.6.8 виджет получил визуальное обновление с современным, отполированным внешним видом:

Градиентный заголовок — заголовок виджета использует тонкий градиент на основе цвета вашей темы, с индикатором статуса и отображением аватара.
Скруглённые пузыри сообщений — пузыри чата используют больший радиус скругления (rounded-2xl) для более мягкого вида.
Анимированное открытие/закрытие — виджет плавно появляется и исчезает с CSS-анимацией вместо мгновенного отображения.
Переработанная кнопка запуска — пузырь чата представляет собой сквиркл 60px с тенью-свечением в цвет бренда и анимацией появления.
Переключатель тёмного режима — кнопка в заголовке чата позволяет посетителям переключаться между светлым и тёмным режимом в течение сессии.
Тематические кольца фокуса — поля ввода отображают кольца фокуса в цвет бренда для доступности.
Бейдж уведомлений — на пузыре кнопки запуска появляется счётчик непрочитанных сообщений.

Эти визуальные изменения применяются автоматически — никаких изменений в настройках не требуется.

Чипы цитат

v1.6.5

Когда ИИ-бот отвечает с информацией из вашей базы знаний, под сообщением появляются чипы цитат. Каждый чип представляет извлечённый документ, который повлиял на ответ.

Поведение	Описание
Отображение чипов	Показывает до 3 чипов с названиями документов. Если использовалось больше источников, чип «+N ещё» указывает на дополнительные цитаты.
Нажатие для раскрытия	Нажатие на чип переключает встроенный фрагмент с первыми 200 символами извлечённого содержимого. Одновременно может быть открыт только один фрагмент.
Усечение заголовка	Длинные названия документов усекаются до 40 символов с многоточием.
Тематизация	Чипы используют основной цвет вашего виджета как лёгкий оттенок, с полной поддержкой тёмного режима и RTL.
Доступность	Чипы доступны с клавиатуры с корректными ARIA-метками (`aria-expanded`), ролями списков и поддержкой программ чтения с экрана.

Чипы цитат дают посетителям прозрачность относительно источников ответа бота, повышая доверие к ответам ИИ. Настройка не требуется — цитаты появляются автоматически, когда RAG-конвейер извлекает релевантные документы.

Автопрокрутка

v1.6.8

Виджет автоматически прокручивается к последнему сообщению при поступлении нового контента. Это применяется к:

Новым сообщениям от ИИ-бота или оператора-человека
Потоковому контенту при генерации ответа ботом в реальном времени

Прокрутка использует плавную анимацию, чтобы переход ощущался естественно. Настройка не требуется — автопрокрутка всегда активна.

Ограничения каналов по тарифу

Тариф	Макс. каналов
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50