Как добавить ИИ-чат-бот Asyntai на любой сайт

Универсальное руководство для HTML, кастомных сайтов и статических генераторов

Платформа:

Шаг 1: Получите код встраивания

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте в ваш HTML-файл

Самый простой способ добавить чат-бот — вставить код встраивания непосредственно в ваш HTML-файл:

Откройте HTML-файл в текстовом редакторе
Найдите закрывающий тег </body>
Вставьте код встраивания Asyntai перед тегом </body>
Сохраните файл

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Совет: Добавление скрипта перед закрывающим тегом </body> гарантирует загрузку после контента страницы — это оптимально для производительности и не замедлит страницу.

Для многостраничных сайтов

Если на вашем сайте несколько HTML-страниц, у вас есть несколько вариантов:

Вариант A: добавить на каждую страницу

Добавьте код вставки в каждый HTML-файл, на котором должен появляться чат-бот.

Вариант B: использовать общий включаемый файл футера

Если вы используете серверные включения (SSI), PHP includes или аналогичные:

Создайте файл footer.html (или footer.php)
Добавьте код встраивания Asyntai в этот файл
Подключите этот файл footer на всех страницах:
 <?php include 'footer.php'; ?>

Вариант C: динамическая загрузка через JavaScript

Создайте единый JavaScript-файл, который загружает чат-бот на всех страницах:

Создайте файл asyntai-loader.js:
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
Замените YOUR_WIDGET_ID на ваш реальный ID виджета
Подключите этот скрипт на всех страницах:
<script src="/js/asyntai-loader.js"></script>

Для генераторов статических сайтов

Если вы используете генератор статических сайтов, добавьте код встраивания в базовый макет или шаблон:

Jekyll

Добавьте в _includes/footer.html или _layouts/default.html

Hugo

Добавьте в layouts/partials/footer.html или layouts/_default/baseof.html

Gatsby

Добавьте в gatsby-browser.js или используйте gatsby-ssr.js

Next.js

Добавьте в pages/_document.js или используйте компонент next/script

Nuxt.js

Добавьте в nuxt.config.js в раздел head.script

Eleventy (11ty)

Добавьте в базовый макет в _includes/

Astro

Добавьте в src/layouts/Layout.astro перед </body>

VuePress

Добавьте в .vuepress/config.js в раздел head

Для приложений React / Vue / Angular

Для одностраничных приложений (SPA) можно добавить скрипт в index.html или загрузить его динамически:

React (метод index.html)

<!-- In public/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

React (метод useEffect)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (в main.js или App.vue)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (в index.html)

<!-- In src/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Шаг 3: Проверка установки

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

Виджет не отображается? Убедитесь, что скрипт размещён перед тегом </body>. Проверьте отсутствие ошибок JavaScript в консоли браузера (нажмите F12, чтобы открыть инструменты разработчика). Попробуйте очистить кэш браузера или открыть страницу в режиме инкогнито.

Важно: Чат-бот требует, чтобы ваш сайт был доступен по протоколу HTTP или HTTPS (а не открывался непосредственно как файл). При локальном тестировании используйте локальный сервер разработки.

Документация