Kako dodati klepetalnik Asyntai z UI na katerokoli spletno stran

Univerzalni vodič za HTML, strani po meri in statične generatorje

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte v svojo datoteko HTML

Najpreprostejši način za dodajanje klepetalnika je prilepitev vdelovalne kode neposredno v svojo datoteko HTML:

Odprite svojo datoteko HTML v urejevalniku besedila
Poiščite zaključno oznako </body>
Prilepite svojo vdelovalno kodo Asyntai tik pred oznako </body>
Shranite datoteko

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

Nasvet: Dodajanje skripta pred zaključno oznako </body> zagotavlja nalaganje po vsebini strani, kar je optimalno za zmogljivost in ne bo upočasnilo vaše strani.

Za spletne strani z več stranmi

Če ima vaša spletna stran več strani HTML, imate več možnosti:

Možnost A: Dodajte na vsako stran

Dodajte vdelovalno kodo v vsako datoteko HTML, kjer želite, da se klepetalnik prikaže.

Možnost B: Uporabite skupno vključitev noge

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

Ustvarite datoteko footer.html (ali footer.php)
Dodajte vdelovalno kodo Asyntai v to datoteko
Vključite to datoteko noge v vse svoje strani:
 <?php include 'footer.php'; ?>

Možnost C: Dinamično nalaganje JavaScript

Ustvarite eno datoteko JavaScript, ki naloži klepetalnik na vseh straneh:

Ustvarite datoteko z imenom 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); })();
Replace YOUR_WIDGET_ID with your actual widget ID
Vključite ta skript v vse svoje strani:
<script src="/js/asyntai-loader.js"></script>

Za generatorje statičnih strani

Če uporabljate generator statičnih strani, dodajte vdelovalno kodo v svojo osnovno postavitev ali predlogo:

Jekyll

Dodajte v _includes/footer.html ali _layouts/default.html

Hugo

Dodajte v layouts/partials/footer.html ali layouts/_default/baseof.html

Gatsby

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

Next.js

Dodajte v pages/_document.js ali uporabite komponento next/script

Nuxt.js

Dodajte v nuxt.config.js pod head.script

Eleventy (11ty)

Dodajte v svojo osnovno postavitev v _includes/

Astro

Dodajte v src/layouts/Layout.astro pred </body>

VuePress

Dodajte v .vuepress/config.js pod head

Za aplikacije React / Vue / Angular

Za enostranske aplikacije (SPA) lahko dodate skript v svojo datoteko index.html ali ga naložite dinamično:

React (način 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 (način 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 (v main.js ali 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 (v 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: Preverite namestitev

Po dodajanju kode odprite svojo spletno stran v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Preverite, ali je skript pravilno umeščen pred oznako </body>. Prepričajte se, da v konzoli brskalnika ni napak JavaScript (pritisnite F12 za odpiranje razvijalskih orodij). Poskusite počistiti predpomnilnik brskalnika ali si ogledati stran v oknu brez beleženja.

Pomembno: Klepetalnik zahteva, da se vaša spletna stran streže prek HTTP ali HTTPS (ne odprta neposredno kot datoteka). Če testirate lokalno, uporabite lokalni razvojni strežnik.

Dokumentacija