Перейти к содержанию

Виджет и код вставки

Путь: /dashboard/embed · Доступ: Модуль «Настройки»

Виджет и код вставки Виджет и код вставки

Виджет — это основной способ взаимодействия пользователей с вашим AI-ассистентом на вашем сайте. На этой странице объясняется, как его развернуть, что делает каждый атрибут вставки и как виджет работает «под капотом».

Получение кода вставки

Самый простой способ получить код вставки:

  1. Перейдите в раздел Панель управления → Вставка (Embed) в боковом меню.
  2. Страница автоматически сгенерирует правильный скрипт для текущего бота и домена.
  3. Нажмите Копировать, чтобы скопировать весь фрагмент кода.
  4. Вставьте его в HTML-код вашего сайта перед закрывающим тегом </body>.

Справочник скрипта вставки

<script 
  src="https://user.frenzy.bot/chatbot-widget/v1/js/loader.js"
  data-bot-id="sales-assistant"
  data-bot-name="Sales Assistant"
  data-theme-color="#3b82f6"
  data-backend-url="https://user.frenzy.bot"
  async>
</script>

Атрибуты

Атрибут Обязателен Описание
data-bot-id Да Уникальный ID (slug) вашего бота.
data-bot-name Нет Название, отображаемое в верхней части окна чата.
data-theme-color Нет Основной цвет виджета (hex-код).
data-backend-url Нет URL сервера. По умолчанию https://user.frenzy.bot (или ваш кастомный домен).

Как найти ID бота

  • Откройте панель управления и перейдите в раздел Embed или Settings.
  • ID бота указан в коде вставки и на странице управления ботами.
  • Формат: строчные буквенно-цифровые символы с дефисами (например, sales-assistant, support-bot).

Динамическая страница вставки

Страница Панель управления → Вставка автоматически определяет ваш текущий хост и генерирует правильный фрагмент кода. Это безопаснее, чем прописывать URL вручную, потому что:

  • Если вы позже измените домен, сгенерированный код вставки автоматически отразит новый домен.
  • Каждый бот получает свой собственный фрагмент кода с правильным data-bot-id.
  • Копирование в один клик ускоряет процесс развертывания.

Возможности виджета

Виджет FRENZY.BOT создан для промышленного использования и обладает следующими возможностями:

Функция Описание
Изоляция Shadow DOM Предотвращает конфликты CSS вашего сайта с дизайном виджета
Сохранение сессии История чата сохраняется при обновлении страницы через localStorage
Ленивая загрузка Предотвращает замедление работы при длительных диалогах
Окно контекста Последние 6 сообщений отправляются ИИ для обеспечения качества ответа
Мультиязычность Поддержка нескольких языков с автоопределением
Поддержка RTL Полноценная поддержка письма справа налево для иврита и арабского языка
Предлагаемые вопросы Готовые подсказки, отображаемые под приветственным сообщением
Форма лидов Захват контактов прямо в чате с настраиваемыми полями
Text-to-speech Опциональное голосовое воспроизведение ответов ИИ

Тестирование виджета

Прежде чем добавлять виджет на рабочий сайт:

  1. Убедитесь, что сервер запущен.
  2. Откройте встроенную тестовую страницу: https://user.frenzy.bot/chatbot-widget/test.html
  3. Отправьте несколько тестовых сообщений.
  4. Обновите страницу — история чата должна сохраниться.
  5. Проверьте, что бот отвечает, используя содержание вашей базы знаний.

Интеграция с WordPress

Для сайтов на WordPress доступны два варианта:

Вариант 1: Вставка скрипта

Добавьте скрипт вставки в файл footer.php вашей темы или используйте плагин для добавления кастомных скриптов в футер.

Вариант 2: Плагин WordPress

  • Загрузите ZIP-архив плагина FRENZY.BOT для WordPress и активируйте его.
  • Используйте шорткод [FRENZY.BOT_whitelabel] для создания полноэкранной встроенной страницы портала поддержки.

Типичные ошибки

Проблема Причина Решение
Виджет появляется, но не отвечает Неверный data-bot-id Проверьте ID бота в Dashboard → Embed
Виджет не появляется Сервер недоступен Проверьте, открыт ли порт 8321 и запущен ли сервер
Работает на localhost, но не на продакшене Отсутствует data-backend-url Укажите в нем URL вашего рабочего домена
Конфликты CSS с вашим сайтом Не используется Shadow DOM Этого не должно происходить — проверьте наличие принудительных глобальных стилей
Отображается старая версия виджета Кэш браузера Очистка кэша на основе версий (cache busting) обрабатывает это автоматически

Вставка для конкретного бота

В многоботовой конфигурации у каждого бота есть свой фрагмент кода вставки. Атрибут data-bot-id определяет, какой бот будет вести диалог. Виджет каждого бота использует свои:

  • Системный промпт и модель ИИ
  • Брендинг, цвета и аватар
  • Приветственное сообщение и предлагаемые вопросы
  • Настройки формы лидов
  • Языковые настройки

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

FAQ

В: Виджет загружается, но не отвечает.

  • Убедитесь, что data-bot-id указан верно.
  • Проверьте, подключен ли OpenRouter (индикатор LLM должен быть зеленым).
  • Проверьте, есть ли контент в базе знаний.

В: Виджет работает на localhost, но не на продакшене.

  • Убедитесь, что порт 8321 открыт на вашем сервере.
  • Установите data-backend-url в значение вашего рабочего домена (с https://).
  • Если используете кастомный домен, проверьте правильность настройки SSL.

В: Можно ли использовать виджет на нескольких доменах?

  • Да. Виджет работает на любом домене, если data-backend-url указывает на ваш сервер. Для единообразия используйте динамическую страницу вставки или кастомный домен.

В: Как обновить виджет после изменений?

  • Обновления виджета применяются автоматически с помощью механизма cache busting. При обновлении сервера версия виджета увеличивается, и браузеры загружают новую версию.