WebChatAgent Logo

Добавление AI Chatbot в Webflow

Webflow

Добавьте ИИ-Chatbot на сайт Webflow за несколько минут с помощью встроенной функции Custom Code. Достаточно один раз вставить небольшой фрагмент кода и опубликовать сайт, после чего иконка чата появится на опубликованных страницах. Используйте способ для всего сайта, чтобы виджет работал на каждой странице, либо настройте его для отдельной страницы.

Способ 1: Для всего сайта (Все страницы)

  1. Откройте настройки сайта: в Webflow Designer нажмите на иконку шестеренки или перейдите в раздел Site Settings > Custom Code.
  2. Вставьте код в блок Footer Code: в поле Footer Code вставьте следующий фрагмент:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Замените YOUR_ID на ваш реальный ID чат-бота из WebChatAgent Панель управления.
  2. Сохраните и опубликуйте: нажмите Сохранить, затем опубликуйте сайт. Виджет чата появится на всех страницах.

Способ 2: Только для одной страницы

  1. В Webflow Designer выберите страницу, на которой должен отображаться Chatbot.
  2. Откройте Page Settings (иконка шестеренки рядом с названием страницы).
  3. Прокрутите страницу вниз до блока Custom Code > Before </body> tag.
  4. Вставьте тот же фрагмент кода, указанный выше.
  5. Нажмите Сохранить и опубликуйте сайт.

Способ 3: Элемент Embed

Для более гибкого управления размещением:

  1. Перетащите элемент Embed из панели компонентов на страницу.
  2. Вставьте фрагмент кода в редактор элемента embed.
  3. Виджет будет отображаться как плавающая иконка чата независимо от того, где именно на странице расположен элемент embed.

Где найти ID чат-бота

Выполните вход в WebChatAgent Панель управления, откройте раздел Ассистент и перейдите в Каналы → Виджет чата. Разверните блок Показать сведения об установке и нажмите Скопировать код. Скопированный фрагмент уже содержит ваш ID чат-бота, поэтому вставляйте код целиком без ручного ввода идентификатора.

Устранение неполадок

  • Виджет не отображается в Designer? Пользовательский код выполняется только на опубликованном сайте и не отображается в режиме предпросмотра Webflow Designer. Опубликуйте сайт и проверьте его работу вживую.
  • Виджет отображается не на всех страницах? Убедитесь, что код добавлен через Site Settings > Custom Code (Способ 1), а не в настройках конкретной страницы.
  • Обязательно ли использовать хостинг Webflow? Пользовательский код работает как на сайтах с хостингом Webflow, так и в экспортированном коде. При экспорте проекта код виджета сохранится в итоговых файлах.