Внедрение AI Chatbot на вашем сайте

Встраивание на Сайт

Это универсальный способ добавить чат-бота на любой сайт. Вы вставляете две короткие строки в HTML вашего сайта: тег <script>, который загружает виджет, и элемент <web-chat-agent>, который указывает, какого чат-бота отображать. На этом все, плавающая иконка чата появится в углу каждой страницы, где выполняется этот код.

Если вы используете WordPress, Shopify, Wix, Squarespace или Webflow, воспользуйтесь специальной инструкцией для вашей платформы, где точно показано, куда именно вставлять этот же код.

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

Вам не нужно вводить ID вручную. В панели управления WebChatAgent:

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

Скопированный фрагмент уже содержит ваш ID чат-бота, поэтому просто вставьте его. (Если вам когда-либо понадобится сам чистый ID, это длинная строка в URL вашей панели управления: /dashboard/<your-chatbot-id>.)

Код для вставки

Вставьте этот код непосредственно перед закрывающим тегом </body> на вашем сайте:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Замените YOUR_ID на ваш ID чат-бота (или, что проще, скопируйте готовый фрагмент из панели управления, где ID уже подставлен). Виджет загружается асинхронно, поэтому он не замедлит работу страницы и появится в виде плавающей кнопки чата в нижнем углу.

Необязательные атрибуты

Виджет берет цвета, заголовок, приветственное сообщение и поведение из настроек панели управления, поэтому обычно требуется только chatbot-id. Чтобы переопределить некоторые параметры прямо в HTML, добавьте следующие атрибуты в элемент <web-chat-agent>:

chatbot-id — ваш ID чат-бота. Обязательно.
theme — визуальный стиль: "default" или "modern". По умолчанию "default".
initially-open — установите значение "true", чтобы чат открывался автоматически при загрузке страницы. По умолчанию "false" (закрыто).
tracking-consent — необязательный сигнал согласия для постоянной персонализации: "unknown", "denied" или "granted". Если параметр не указан, по умолчанию используется "unknown", а анонимные локальные триггеры продолжают работать.
context-data — контекст сессии с вашей страницы для AI (например, "Customer=Acme GmbH;OrderID=A-1023"), полезно, когда виджет работает внутри CRM или закрытой зоны сайта. Форматы, ограничения и примечания по безопасности приведены в руководстве для разработчиков.

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

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

Виджет не добавляет второй баннер cookie. Без сигнала согласия он работает в анонимном режиме конфиденциальности: триггеры времени, прокрутки, намерения уйти со страницы, бездействия, URL, видимости и частых кликов от ярости обрабатываются локально в памяти. Распознавание вернувшихся посетителей, постоянные счетчики, проактивная аналитика и сгенерированные AI приветствия ожидают сигнал granted.

Полную матрицу поведения, примеры для CMP и справочник по хранилищу данных см. в разделе Согласие на cookie и анонимные проактивные триггеры.

Встраивание чата внутрь страницы

Фрагмент выше добавляет плавающую кнопку. Если вы хотите разместить чат внутри разметки страницы, например, в виде полноценной панели чата на отдельной странице поддержки, используйте встроенный виджет. Для него загружаются другой скрипт и другой элемент:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

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

Работает на любых платформах

Оба фрагмента представляют собой обычный HTML и пользовательский элемент, поэтому они работают на любой платформе для сайтов: WordPress, Shopify, Wix, Squarespace, Webflow, а также на сайтах с рукописным HTML/JS. Вставьте код в HTML вашего сайта и опубликуйте изменения.

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

Виджет не отображается? Убедитесь, что код добавлен в HTML страницы (перед тегом </body>), а также что вы опубликовали изменения или очистили кеш в плагинах кеширования. Проверьте консоль браузера на наличие заблокированных скриптов.
Отображается только на одной странице? Разместите фрагмент кода в сквозном блоке сайта (в футере или глобальном коде), а не на отдельной странице.