Cum să adăugați Chatbot-ul AI Asyntai pe orice site

Ghid universal pentru HTML, site-uri personalizate și generatoare statice

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în fișierul HTML

Cel mai simplu mod de a adăuga chatbot-ul este să lipiți codul de integrare direct în fișierul HTML:

Deschideți fișierul HTML într-un editor de text
Găsiți eticheta de închidere </body>
Inserați codul de încorporare Asyntai chiar înainte de eticheta </body>
Salvați fișierul

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

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Sfat: Adăugarea scriptului înainte de eticheta de închidere </body> asigură că se încarcă după conținutul paginii, ceea ce este optim pentru performanță și nu va încetini pagina.

Pentru site-uri cu pagini multiple

Dacă site-ul dvs. are mai multe pagini HTML, aveți mai multe opțiuni:

Opțiunea A: Adăugați pe fiecare pagină

Adăugați codul de integrare în fiecare fișier HTML unde doriți să apară chatbot-ul.

Opțiunea B: Utilizați un footer include comun

Dacă utilizați server-side includes (SSI), PHP includes sau similar:

Creați un fișier footer.html (sau footer.php)
Adăugați codul de integrare Asyntai în acest fișier
Includeți acest fișier footer în toate paginile dvs.:
 <?php include 'footer.php'; ?>

Opțiunea C: Încărcare dinamică JavaScript

Create a single JavaScript file that loads the chatbot on all pages:

Creați un fișier numit 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); })();
Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
Includeți acest script în toate paginile dvs.:
<script src="/js/asyntai-loader.js"></script>

Pentru generatoarele de site-uri statice

Dacă utilizați un generator de site-uri statice, adăugați codul de integrare în layout-ul sau șablonul de bază:

Jekyll

Adăugați în _includes/footer.html sau _layouts/default.html

Hugo

Adăugați în layouts/partials/footer.html sau layouts/_default/baseof.html

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

Adăugați în pages/_document.js sau utilizați componenta next/script

Nuxt.js

Adăugați în nuxt.config.js sub head.script

Eleventy (11ty)

Adăugați în layout-ul de bază din _includes/

Astro

Adăugați în src/layouts/Layout.astro înainte de </body>

VuePress

Adăugați în .vuepress/config.js sub head

Pentru aplicații React / Vue / Angular

Pentru aplicații cu o singură pagină (SPA-uri), puteți adăuga scriptul în index.html sau îl puteți încărca dinamic:

React (metoda index.html)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (metoda 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 (în main.js sau 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 (în index.html)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Pasul 3: Verificați instalarea

După adăugarea codului, deschideți site-ul dvs. într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Verificați că scriptul este plasat corect înainte de eticheta </body>. Asigurați-vă că nu există erori JavaScript în consola browserului (apăsați F12 pentru a deschide instrumentele de dezvoltare). Încercați să goliți cache-ul browserului sau să vizualizați într-o fereastră incognito.

Important: Chatbot-ul necesită ca site-ul dvs. să fie servit prin HTTP sau HTTPS (nu deschis direct ca fișier). Dacă testați local, utilizați un server de dezvoltare local.

Documentație