Як додати AI чат-бот Asyntai на будь-який веб-сайт

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

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

<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>

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додавання до вашого HTML-файлу

Найпростiший спосiб додати чат-бот - вставити код вбудовування безпосередньо у ваш 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> забезпечує його завантаження пiсля контенту сторiнки, що оптимально для продуктивностi та не сповiльнює вашу сторiнку.

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

Якщо ваш веб-сайт має кілька HTML-сторінок, у вас є кілька варіантів:

Варіант A: Додайте на кожну сторінку

Додайте код вбудовування до кожного HTML-файлу, де ви хочете, щоб чат-бот з'являвся.

Варіант B: Використовуйте спільний файл включення футера

Якщо ви використовуєте серверне включення (SSI), PHP включення або подібне:

Створіть файл footer.html (або footer.php)
Додайте код вбудовування Asyntai до цього файлу
Включіть цей файл футера на всі ваші сторінки:
 <?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>

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

Якщо ви використовуєте генератор статичних сайтiв, додайте код вбудовування до базового макету або шаблону:

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

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

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: Перевірте встановлення

Пiсля додавання коду вiдкрийте свiй веб-сайт у новiй вкладцi браузера або в режимi iнкогнiто. Ви повиннi побачити кнопку чат-вiджету в нижньому правому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює коректно.

Не бачите віджет? Перевiрте, що скрипт правильно розмiщений перед тегом </body>. Переконайтеся, що в консолi браузера немає помилок JavaScript (натиснiть F12, щоб вiдкрити iнструменти розробника). Спробуйте очистити кеш браузера або переглянути в режимi iнкогнiто.

Важливо: Чат-бот вимагає, щоб ваш веб-сайт працював через HTTP або HTTPS (а не вiдкривався безпосередньо як файл). Якщо ви тестуєте локально, використовуйте локальний сервер розробки.

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