4.4
Скачать PDF

Встраивание RAG-чатбота на сайт

20 мин чтения

Методы интеграции

Flowise предоставляет несколько способов встраивания чатбота в любой сайт:

МетодСложностьГибкостьРекомендуется для
Popup HTML (JS Widget)НизкаяСредняяБольшинство сайтов, WordPress
Full Page EmbedНизкаяСредняяОтдельная страница чатбота
iframeНизкаяНизкаяПростая вставка
REST APIВысокаяМаксимальнаяКастомная интеграция

JS Widget — самый простой способ

Получите код встраивания: Flowise → ваш Chatflow → API Endpoint → Embed → Popup HTML. Вставьте скрипт перед закрывающим тегом </body>.

Встраивание в WordPress

Для WordPress существует несколько способов:

  1. Плагин WPCode — установите плагин, добавьте новый сниппет с HTML-кодом Flowise, установите место выполнения «Footer» и активируйте
  2. functions.php — добавьте код через хук wp_footer для отображения на всех страницах
  3. Custom HTML блок — через редактор Gutenberg добавьте блок HTML с кодом виджета
  4. Elementor Widget — перетащите виджет Custom HTML и вставьте код
Совет

Используйте плагин WPCode — он не требует редактирования файлов темы и работает с любой темой WordPress.

Кастомизация виджета

Flowise Chat Embed поддерживает настройку: цвета кнопки и окна чата, приветственное сообщение, стартовые промпты, аватары, CSS-переопределение и даже tooltip с подсказкой.

Безопасность и CORS

Для production рекомендуется:

  • Настроить CORS_ORIGINS в Flowise для допустимых доменов
  • Создать API-ключ для защиты эндпоинта
  • Использовать прокси-сервер для скрытия API-ключа от публичного доступа

Ключевые выводы

  • JS Widget (Popup HTML) — самый простой способ встраивания чатбота на сайт
  • Для WordPress рекомендуется плагин WPCode для вставки кода без редактирования темы
  • Настройка CORS и API-ключей обязательна для production
  • Flowise Chat Embed поддерживает богатую кастомизацию: цвета, промпты, CSS
  • Для максимальной гибкости используйте REST API или Python/TypeScript SDK

Полезные ресурсы