Slik legger du til Asyntai AI-chatbot på en hvilken som helst nettside

Universell guide for HTML, egendefinerte nettsteder og statiske generatorer

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til i HTML-filen din

Den enkleste måten å legge til chatboten er å lime inn innbyggingskoden direkte i HTML-filen din:

Åpne HTML-filen din i et tekstredigeringsprogram
Finn den avsluttende </body>-taggen
Lim inn Asyntai-innbyggingskoden din rett før </body>-taggen
Lagre 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: Å legge til skriptet før den avsluttende </body>-taggen sikrer at det lastes inn etter sideinnholdet, noe som er optimalt for ytelse og ikke vil bremse siden din.

For nettsteder med flere sider

Hvis nettstedet ditt har flere HTML-sider, har du flere alternativer:

Alternativ A: Legg til på hver side

Legg til innbyggingskoden i hver HTML-fil der du vil at chatboten skal vises.

Alternativ B: Bruk en felles bunntekstinkludering

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

Opprett en footer.html-fil (eller footer.php)
Legg til Asyntai-innbyggingskoden i denne filen
Inkluder denne bunntekstfilen på alle sidene dine:
 <?php include 'footer.php'; ?>

Alternativ C: Dynamisk JavaScript-lasting

Opprett en enkelt JavaScript-fil som laster chatboten på alle sider:

Opprett en fil kalt 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); })();
Erstatt YOUR_WIDGET_ID med din faktiske widget-ID
Inkluder dette skriptet på alle sidene dine:
<script src="/js/asyntai-loader.js"></script>

For statiske nettstedsgeneratorer

Hvis du bruker en statisk nettstedsgenerator, legg til innbyggingskoden i grunnlayouten eller malen din:

Jekyll

Legg til i _includes/footer.html eller _layouts/default.html

Hugo

Legg til i layouts/partials/footer.html eller layouts/_default/baseof.html

Gatsby

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

Next.js

Legg til i pages/_document.js eller bruk next/script-komponenten

Nuxt.js

Legg til i nuxt.config.js under head.script

Eleventy (11ty)

Legg til i grunnlayouten din i _includes/

Astro

Legg til i src/layouts/Layout.astro før </body>

VuePress

Legg til i .vuepress/config.js under head

For React / Vue / Angular-apper

For enkeltsideapplikasjoner (SPA-er) kan du legge til skriptet i index.html eller laste det dynamisk:

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>

Trinn 3: Bekreft installasjonen

Etter at du har lagt til koden, åpne nettstedet ditt i en ny nettleserfane eller i et inkognitovindu. Du bør se chat-widget-knappen nederst til høyre. Klikk på den for å forsikre deg om at den åpnes og fungerer riktig.

Ser du ikke widgeten? Sjekk at skriptet er riktig plassert før </body>-taggen. Sørg for at det ikke er noen JavaScript-feil i nettleserens konsoll (trykk F12 for å åpne utviklerverktøy). Prøv å tømme nettleserens hurtigbuffer eller se i et inkognitovindu.

Viktig: Chatboten krever at nettstedet ditt serveres over HTTP eller HTTPS (ikke åpnet direkte som en fil). Hvis du tester lokalt, bruk en lokal utviklingsserver.

Dokumentasjon