Како додати Asyntai АИ четбот на било који веб-сајт

Универзални водич за 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>

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Корак 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 страница, имате неколико опција:

Опција А: Додајте на сваку страницу

Додајте код за уграђивање у сваки HTML фајл где желите да се четбот појави.

Опција Б: Користите заједничко укључивање подножја

Ако користите укључивања на страни сервера (SSI), PHP укључивања или слично:

Креирајте footer.html (или footer.php) фајл
Додајте Asyntai код за уграђивање у овај фајл
Укључите овај фајл подножја у све своје странице:
 <?php include 'footer.php'; ?>

Опција В: Динамичко учитавање 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 стварним ИД-ом виџета
Укључите ову скрипту у све своје странице:
<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 (не отваран директно као фајл). Ако тестирате локално, користите локални развојни сервер.

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