Kako dodati Asyntai AI chatbot na bilo koju web stranicu

Univerzalni vodic za HTML, prilagodene stranice i staticne generatore

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte u svoju HTML datoteku

Najjednostavniji nacin za dodavanje chatbota je zalijepiti ugradni kod izravno u svoju HTML datoteku:

Otvorite svoju HTML datoteku u uredivace teksta
Pronađite zatvarajuću oznaku </body>
Zalijepite svoj Asyntai kod za ugradnju neposredno prije oznake </body>
Spremite datoteku

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

Savjet: Dodavanje skripte prije zavrsne oznake </body> osigurava ucitavanje nakon sadrzaja stranice, sto je optimalno za performanse i nece usporiti stranicu.

Za web stranice s vise stranica

Ako vasa web stranica ima vise HTML stranica, imate nekoliko opcija:

Opcija A: Dodajte na svaku stranicu

Dodajte ugradni kod u svaku HTML datoteku na kojoj zelite da se chatbot pojavi.

Opcija B: Koristite zajednicko ukljucivanje podnozja

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

Izradite datoteku footer.html (ili footer.php)
Dodajte Asyntai ugradni kod u ovu datoteku
Ukljucite ovu datoteku podnozja u sve svoje stranice:
 <?php include 'footer.php'; ?>

Opcija C: Dinamicko ucitavanje JavaScriptom

Izradite jednu JavaScript datoteku koja ucitava chatbot na svim stranicama:

Izradite datoteku nazvanu 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); })();
Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta
Ukljucite ovu skriptu u sve svoje stranice:
<script src="/js/asyntai-loader.js"></script>

Za generatore staticnih stranica

Ako koristite generator staticnih stranica, dodajte ugradni kod u svoj osnovni raspored ili predlozak:

Jekyll

Dodajte u _includes/footer.html ili _layouts/default.html

Hugo

Dodajte u layouts/partials/footer.html ili layouts/_default/baseof.html

Gatsby

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

Next.js

Dodajte u pages/_document.js ili koristite komponentu next/script

Nuxt.js

Dodajte u nuxt.config.js pod head.script

Eleventy (11ty)

Dodajte u svoj osnovni raspored u _includes/

Astro

Dodajte u src/layouts/Layout.astro prije </body>

VuePress

Dodajte u .vuepress/config.js pod head

Za React / Vue / Angular aplikacije

Za jednostranicne aplikacije (SPA) mozete dodati skriptu u svoj index.html ili je ucitati dinamicki:

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 (u main.js ili 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 (u 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>

Korak 3: Provjerite instalaciju

Nakon dodavanja koda, otvorite svoju web stranicu u novoj kartici preglednika ili anonimnom prozoru. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite je li skripta ispravno postavljena prije oznake </body>. Provjerite nema li JavaScript gresaka u konzoli preglednika (pritisnite F12 za otvaranje razvojnih alata). Pokusajte ocistiti predmemoriju preglednika ili pregledavati u anonimnom prozoru.

Važno: Chatbot zahtijeva da se vasa web stranica posluzuje putem HTTP ili HTTPS protokola (ne otvaranjem izravno kao datoteka). Ako testirate lokalno, koristite lokalni razvojni posluzitelj.

Dokumentacija