Подключение виджета сайта

Кратко

Путь: пункт «Каналы» в боковом меню -> список каналов -> «Добавить канал» -> «Виджет».

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

Форма создания

1. В списке типов канала выберите «Виджет».
2. Укажите понятное название виджета, например название сайта или раздела.
3. В поле разрешенные домены сайта введите домен, на котором будет работать чат.
4. Нажмите кнопку добавления с плюсом, чтобы добавить введённый домен в список. Если ошиблись, удалите лишний домен.
5. В завершение создайте канал-виджет кнопкой «Создать виджет».

Домены

Разрешённый домен определяет, на каком сайте можно запустить код этого канала. Это защита от использования виджета на посторонних сайтах. Указывайте адрес без протокола и пути, например example.com; для поддоменов можно использовать маску *.example.com.

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

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

Название, иконка и домены

На странице настроек канала в блоке виджета нажмите редактирование названия, измените название или иконку, затем нажмите «Сохранить». Кнопка «Отмена» закрывает редактирование без сохранения.

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

Ненужный домен убирается кнопкой удаления. Чтобы добавить новый, нажмите «Добавить домен», заполните поле домена и подтвердите добавление либо нажмите «Отмена». Проверка соединения использует правила списка доменов.

После создания

После создания кабинет открывает настройки нового канала. Сначала пройдите их сверху вниз, настройте внешний вид и функции чата, затем нажмите «Сохранить». Готовый фрагмент для сайта находится ниже, в блоке «Код для встраивания». Скопируйте его целиком и вставьте на сайт перед закрывающим тегом </body>.

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

• название канала;
• иконка;
• разрешенные домены;
• цветовая схема: светлая, темная или авто;
• язык: русский, английский или авто;
• режим отображения: всплывающее окно или встроенный виджет;
• позиция всплывающего окна: сверху слева, сверху справа, снизу слева или снизу справа;
• ширина окна от 200 до 800;
• высота окна от 300 до 1000;
• радиус скругления от 0 до 50;
• тень;
• картинка приветственного экрана;
• тексты на русском и английском;
• кнопки на приветственном экране на русском и английском;
• настройки кнопки;
• настройки функций чата;
• подключение через MCP к внешнему AI;
• код для встраивания.

Предпросмотр и сохранение

• предпросмотр окна показывает, как виджет будет выглядеть на сайте;
• предпросмотр кнопки показывает плавающую кнопку открытия чата;
• значок состояния предпросмотра показывает, запускается ли предпросмотр, применяет ли он изменения, синхронизирован ли он или произошла ошибка. По нажатию видны состояния окна и кнопки;
• на мобильном экране вкладки «Виджет», «Кнопка» и «Настройки» переключают предпросмотр окна, предпросмотр кнопки и форму настроек;
• после изменения настроек нажмите кнопку сохранения.

Предпросмотр помогает проверить тему, размеры, скругление, тексты и цвета до обновления виджета на сайте. При изменении заголовка, названия нового диалога или текста пустого состояния он примерно на 10 секунд переключается на нужный экран, а затем возвращается к обычной переписке. Изменение подсказки поля ввода и функций чата сразу возвращает предпросмотр к переписке, где результат виден точнее.

После изменения настройки предпросмотр пытается применить её сразу. Статус «Превью синхронизировано» означает, что изменение применилось во всех частях предпросмотра, которые нужны выбранному режиму: в popup это окно и кнопка, в embedded — только окно. Это не означает, что настройка уже сохранена в канале. Сохранённые оформление и функции применяются на сайте при следующей инициализации виджета. Явно переданные в init поля имеют приоритет над настройками канала.

Если предпросмотр завершился ошибкой, откройте его статус. В нём можно скопировать диагностику для поддержки или нажать «Повторить». Повтор относится только к предпросмотру и не отправляет сообщение посетителю.

Подробные инструкции

• Интерфейс виджета: Сообщения, вложения и история разговоров со стороны посетителя.
• Оформление виджета: Настройте окно, тексты и кнопку виджета в настройках канала. Эти значения используются на сайтах, где установлен этот виджет.
• Приветствие виджета: Выберите, что посетитель увидит перед началом общения: приветственный экран или сообщение из автоматизации.
• Возможности чата: Настройте доступные посетителю функции чата и ограничения расхода кредитов.
• MCP виджета: Предоставьте посетителям доступ к агентам виджета из внешнего ИИ-клиента через MCP.
• Установка виджета: Получите код подключения в настройках канала и установите виджет на свой сайт.