Как да добавите Asyntai AI чатбот към всеки уебсайт

Универсално ръководство за HTML, персонализирани сайтове и статични генератори

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

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

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 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: Използвайте общ включваем файл за футър

Ако използвате server-side includes (SSI), PHP includes или подобни:

Създайте файл 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>

За генератори на статични сайтове

Ако използвате генератор на статични сайтове, добавете кода за вграждане към базовото си оформление или шаблон:

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 (не отворен директно като файл). Ако тествате локално, използвайте локален сървър за разработка.

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