Sådan tilføjer du Asyntai AI-chatbot til ethvert websted

Universal guide for HTML, custom sites, and static generators

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Tilføj til din HTML-fil

Den nemmeste måde at tilføje chatbotten på er at indsætte indlejringskoden direkte i din HTML-fil:

Åbn din HTML-fil i en teksteditor
Find det afsluttende </body>-tag
Indsæt din Asyntai indlejringskode lige inden </body>-tagget
Gem 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>

Tip: At tilføje scriptet før det afsluttende </body>-tag sikrer, at det indlæses efter dit sideindhold, hvilket er optimalt for ydeevnen og ikke vil sænke din side.

Til websteder med flere sider

Hvis dit websted har flere HTML-sider, har du flere muligheder:

Mulighed A: Tilføj til hver side

Tilføj indlejringskoden til hver HTML-fil, hvor du ønsker chatbotten at vises.

Mulighed B: Brug en fælles foderinclusion

Hvis du bruger server-side includes (SSI), PHP-includes eller lignende:

Opret en footer.html-fil (eller footer.php)
Tilføj Asyntai-indlejringskoden til denne fil
Inkluder denne foderfil på alle dine sider:
 <?php include 'footer.php'; ?>

Mulighed C: Dynamisk JavaScript-indlæsning

Opret en enkelt JavaScript-fil, der indlæser chatbotten på alle sider:

Opret en fil kaldet 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); })();
Erstat YOUR_WIDGET_ID med dit faktiske widget-ID
Inkluder dette script på alle dine sider:
<script src="/js/asyntai-loader.js"></script>

Til statiske webstedsgeneratorer

Hvis du bruger en statisk webstedsgenerator, skal du tilføje indlejringskoden til dit basislayout eller din basisskabelon:

Jekyll

Tilføj til _includes/footer.html eller _layouts/default.html

Hugo

Tilføj til layouts/partials/footer.html eller layouts/_default/baseof.html

Gatsby

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

Next.js

Tilføj til pages/_document.js eller brug komponenten next/script

Nuxt.js

Tilføj til nuxt.config.js under head.script

Eleventy (11ty)

Tilføj til dit basislayout i _includes/

Astro

Tilføj til src/layouts/Layout.astro før </body>

VuePress

Tilføj til .vuepress/config.js under head

Til React / Vue / Angular-apps

Til enkeltside-applikationer (SPA'er) kan du tilføje scriptet til din index.html eller indlæse 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>

Trin 3: Verificér installationen

Åbn dit websted i en ny browserfane eller inkognitovindue efter at have tilføjet koden. Du bør se chat-widget-knappen i det nedre højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Kontroller, at scriptet er korrekt placeret før </body>-tagget. Sørg for, at der ikke er JavaScript-fejl i din browsers konsol (tryk F12 for at åbne udviklerværktøjer). Prøv at rydde din browsercache eller se i et inkognitovindue.

Vigtigt: Chatbotten kræver, at dit websted serveres over HTTP eller HTTPS (ikke åbnet direkte som en fil). Hvis du tester lokalt, skal du bruge en lokal udviklingsserver.

Dokumentation