Hur du lägger till Asyntai AI-chattbot på vilken webbplats som helst

Universal guide for HTML, custom sites, and static generators

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din instrumentpanel eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till i din HTML-fil

Det enklaste sättet att lägga till chattboten är att klistra in inbäddningskoden direkt i din HTML-fil:

Öppna din HTML-fil i en textredigerare
Hitta den avslutande taggen </body>
Klistra in din Asyntai-inbäddningskod precis före taggen </body>
Spara filen

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

Tips: Att lägga till skriptet före det avslutande </body>-taggen säkerställer att det laddas efter sidinnehållet, vilket är optimalt för prestanda och inte bromsar din sida.

För flersideswebbplatser

Om din webbplats har flera HTML-sidor har du flera alternativ:

Alternativ A: Lägg till på varje sida

Lägg till inbäddningskoden i varje HTML-fil där du vill att chattboten ska visas.

Alternativ B: Använd en gemensam sidfots-include

If you're using server-side includes (SSI), PHP includes, or similar:

Skapa en footer.html-fil (eller footer.php)
Lägg till Asyntai-inbäddningskoden i den här filen
Inkludera den här sidfotsfilen på alla dina sidor:
 <?php include 'footer.php'; ?>

Alternativ C: Dynamisk JavaScript-laddning

Skapa en enda JavaScript-fil som laddar chattboten på alla sidor:

Skapa en fil med namnet 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); })();
Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
Inkludera det här skriptet på alla dina sidor:
<script src="/js/asyntai-loader.js"></script>

För statiska webbplatsgeneratorer

Om du använder en statisk webbplatsgenerator lägger du till inbäddningskoden i din baslayout eller basmall:

Jekyll

Lägg till i _includes/footer.html eller _layouts/default.html

Hugo

Lägg till i layouts/partials/footer.html eller layouts/_default/baseof.html

Gatsby

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

Next.js

Lägg till i pages/_document.js eller använd komponenten next/script

Nuxt.js

Lägg till i nuxt.config.js under head.script

Eleventy (11ty)

Lägg till i din baslayout i _includes/

Astro

Lägg till i src/layouts/Layout.astro före </body>

VuePress

Lägg till i .vuepress/config.js under head

För React / Vue / Angular-appar

För ensidiga applikationer (SPA) kan du lägga till skriptet i din index.html eller läsa in det dynamiskt:

React (index.html-metoden)

<!-- 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 (useEffect-metoden)

// 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 (i main.js eller 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 (i 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>

Steg 3: Verifiera installationen

Efter att du har lagt till koden, öppna din webbplats i en ny webbläsarflik eller ett inkognitofönster. Du bör se widgetknappen för chatten i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Kontrollera att skriptet är korrekt placerat innan </body>-taggen. Se till att det inte finns några JavaScript-fel i webbläsarens konsol (tryck F12 för att öppna utvecklarverktygen). Försök rensa webbläsarens cache eller visa i ett inkognitofönster.

Viktigt: Chattboten kräver att din webbplats serveras via HTTP eller HTTPS (inte öppnas direkt som en fil). Om du testar lokalt, använd en lokal utvecklingsserver.

Dokumentation