Kaip pridėti Asyntai DI pokalbių robotą prie bet kurios svetainės

Universal guide for HTML, custom sites, and static generators

Platforma:

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėkite prie savo HTML failo

Paprasčiausias būdas pridėti pokalbių robotą yra įklijuoti įterpimo kodą tiesiai į HTML failą:

Atidarykite HTML failą teksto redaktoriuje
Raskite uždaromąjį </body> žymą
Įklijuokite savo Asyntai įterpimo kodą prieš </body> žymą
Išsaugokite failą

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

Patarimas: Skripto pridėjimas prieš uždaromąjį </body> žymą užtikrina, kad jis krausis po puslapio turinio, o tai optimalu našumui ir nesulėtins puslapio.

Kelių puslapių svetainėms

Jei jūsų svetainėje yra keli HTML puslapiai, turite kelias galimybes:

Variantas A: Pridėkite prie kiekvieno puslapio

Pridėkite įterpimo kodą prie kiekvieno HTML failo, kur norite, kad pokalbių robotas būtų rodomas.

Variantas B: Naudokite bendrą poraštės įtraukimą

Jei naudojate serverio pusės įtraukimus (SSI), PHP įtraukimus ar panašiai:

Sukurkite footer.html (arba footer.php) failą
Pridėkite Asyntai įterpimo kodą prie šio failo
Įtraukite šį poraštės failą į visus puslapius:
 <?php include 'footer.php'; ?>

Variantas C: Dinaminis JavaScript įkrovimas

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

Sukurkite failą pavadinimu 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); })();
Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
Įtraukite šį skriptą į visus puslapius:
<script src="/js/asyntai-loader.js"></script>

Statinių svetainių generatoriams

Jei naudojate statinių svetainių generatorių, pridėkite įterpimo kodą prie bazinio išdėstymo ar šablono:

Jekyll

Pridėkite prie _includes/footer.html arba _layouts/default.html

Hugo

Pridėkite prie layouts/partials/footer.html arba layouts/_default/baseof.html

Gatsby

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

Next.js

Pridėkite prie pages/_document.js arba naudokite next/script komponentą

Nuxt.js

Pridėkite prie nuxt.config.js po head.script

Eleventy (11ty)

Pridėkite prie bazinio išdėstymo _includes/

Astro

Pridėkite prie src/layouts/Layout.astro prieš </body>

VuePress

Pridėkite prie .vuepress/config.js po head

React / Vue / Angular programėlėms

Vieno puslapio programėlėms (SPA) galite pridėti skriptą prie index.html arba įkelti dinamiškai:

React (index.html metodas)

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

// 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 arba App.vue faile)

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

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

3 žingsnis: Patikrinkite diegimą

Pridėję kodą, atidarykite svetainę naujame naršyklės skirtuke arba inkognito lange. Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe. Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai.

Nematote valdiklio? Patikrinkite, ar skriptas tinkamai patalpintas prieš </body> žymą. Įsitikinkite, kad naršyklės konsolėje nėra JavaScript klaidų (paspauskite F12 kūrėjo įrankiams atidaryti). Pabandykite išvalyti naršyklės talpyklą arba peržiūrėkite inkognito lange.

Svarbu: Pokalbių robotui reikia, kad svetainė būtų teikiama per HTTP arba HTTPS (ne atidaryta tiesiogiai kaip failas). Jei testuojate lokaliai, naudokite vietinį kūrimo serverį.

Dokumentacija