Asyntai AI -chatbotin lisääminen mille tahansa verkkosivustolle

Universal guide for HTML, custom sites, and static generators

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisääminen HTML-tiedostoon

Yksinkertaisin tapa lisätä chatbot on liittää upotuskoodi suoraan HTML-tiedostoosi:

Avaa HTML-tiedostosi tekstieditorissa
Etsi sulkeva </body>-tagi
Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia
Tallenna tiedosto

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

Vinkki: Skriptin lisääminen ennen sulkevaa </body>-tagia varmistaa, että se latautuu sivun sisällön jälkeen, mikä on optimaalista suorituskyvyn kannalta eikä hidasta sivuasi.

Monisivuisille verkkosivustoille

If your website has multiple HTML pages, you have several options:

Vaihtoehto A: Lisää jokaiselle sivulle

Lisää upotuskoodi jokaiseen HTML-tiedostoon, jossa haluat chatbotin näkyvän.

Vaihtoehto B: Käytä yhteistä alatunniste-sisällytystä

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

Luo footer.html- (tai footer.php) tiedosto
Lisää Asyntai-upotuskoodi tähän tiedostoon
Sisällytä tämä alatunnistetiedosto kaikille sivuillesi:
 <?php include 'footer.php'; ?>

Vaihtoehto C: JavaScriptin dynaaminen lataus

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

Luo tiedosto nimeltä 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); })();
Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
Sisällytä tämä skripti kaikille sivuillesi:
<script src="/js/asyntai-loader.js"></script>

Staattisille sivugeneraattoreille

Jos käytät staattista sivugeneraattoria, lisää upotuskoodi perusasetteluun tai -pohjaan:

Jekyll

Lisää tiedostoon _includes/footer.html tai _layouts/default.html

Hugo

Lisää tiedostoon layouts/partials/footer.html tai layouts/_default/baseof.html

Gatsby

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

Next.js

Lisää tiedostoon pages/_document.js tai käytä next/script-komponenttia

Nuxt.js

Add to nuxt.config.js under head.script

Eleventy (11ty)

Lisää perusasetteluun kansiossa _includes/

Astro

Lisää tiedostoon src/layouts/Layout.astro ennen </body>-tagia

VuePress

Lisää tiedostoon .vuepress/config.js kohtaan head

React / Vue / Angular -sovelluksille

Yksisivuisille sovelluksille (SPA) voit lisätä skriptin index.html-tiedostoon tai ladata sen dynaamisesti:

React (index.html-menetelmä)

<!-- 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-menetelmä)

// 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- tai App.vue-tiedostossa)

// 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-tiedostossa)

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

Vaihe 3: Vahvista asennus

Koodin lisäämisen jälkeen avaa verkkosivustosi uudessa selainvälilehdessä tai incognito-ikkunassa. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Tarkista, että skripti on sijoitettu oikein ennen </body>-tagia. Varmista, ettei selaimen konsolissa ole JavaScript-virheitä (paina F12 avataksesi kehittäjätyökalut). Kokeile tyhjentää selaimen välimuisti tai avata sivu incognito-ikkunassa.

Tärkeää: Chatbot vaatii, että verkkosivustosi tarjoillaan HTTP- tai HTTPS-protokollan kautta (ei avata suoraan tiedostona). Jos testaat paikallisesti, käytä paikallista kehityspalvelinta.

Dokumentaatio