Az Asyntai AI Chatbot hozzáadása bármilyen weboldalhoz

Univerzális útmutató HTML, egyéni oldalak és statikus generátorok számára

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Hozzáadás a HTML fájlhoz

A chatbot hozzáadásának legegyszerűbb módja a beágyazási kód közvetlen beillesztése a HTML fájlba:

Nyissa meg a HTML fájlt egy szövegszerkesztőben
Keresse meg a záró </body> taget
Illessze be az Asyntai beágyazási kódot közvetlenül a </body> tag elé
Mentse el a fájlt

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

Tipp: A script záró </body> tag elé való hozzáadása biztosítja, hogy az oldal tartalmának betöltése után töltődjön be, ami teljesítmény szempontjából optimális, és nem lassítja az oldalt.

Több oldalas weboldalakhoz

Ha weboldalának több HTML oldala van, több lehetőség áll rendelkezésre:

A lehetőség: Hozzáadás minden oldalhoz

Adja hozzá a beágyazási kódot minden HTML fájlhoz, ahol a chatbotot meg szeretné jeleníteni.

B lehetőség: Közös lábléc include használata

Ha kiszolgálóoldali beillesztéseket (SSI), PHP include-okat vagy hasonlókat használ:

Hozzon létre egy footer.html (vagy footer.php) fájlt
Adja hozzá az Asyntai beágyazási kódot ehhez a fájlhoz
Foglalja bele ezt a lábléc fájlt az összes oldalába:
 <?php include 'footer.php'; ?>

C lehetőség: JavaScript dinamikus betöltés

Hozzon létre egyetlen JavaScript fájlt, amely minden oldalon betölti a chatbotot:

Hozzon létre egy asyntai-loader.js nevű fájlt:
(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); })();
Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
Foglalja bele ezt a scriptet az összes oldalába:
<script src="/js/asyntai-loader.js"></script>

Statikus weboldal-generátorokhoz

Ha statikus weboldal-generátort használ, adja hozzá a beágyazási kódot az alap elrendezéséhez vagy sablonjához:

Jekyll

Adja hozzá a _includes/footer.html vagy a _layouts/default.html fájlhoz

Hugo

Adja hozzá a layouts/partials/footer.html vagy a layouts/_default/baseof.html fájlhoz

Gatsby

Adja hozzá a gatsby-browser.js fájlhoz, vagy használja a gatsby-ssr.js fájlt

Next.js

Adja hozzá a pages/_document.js fájlhoz, vagy használja a next/script komponenst

Nuxt.js

Adja hozzá a nuxt.config.js fájlhoz a head.script alatt

Eleventy (11ty)

Adja hozzá az alap elrendezéshez a _includes/ mappában

Astro

Adja hozzá a src/layouts/Layout.astro fájlhoz a </body> elé

VuePress

Adja hozzá a .vuepress/config.js fájlhoz a head alatt

React / Vue / Angular alkalmazásokhoz

Egyoldalas alkalmazások (SPA-k) esetén a scriptet hozzáadhatja az index.html fájlhoz, vagy dinamikusan töltheti be:

React (index.html módszer)

<!-- 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 módszer)

// 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 (a main.js vagy App.vue fájlban)

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

<!-- 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. lépés: Telepítés ellenőrzése

A kód hozzáadása után nyissa meg weboldalát egy új böngészőlapon vagy inkognító ablakban. Látnia kell a chat widget gombot a jobb alsó sarokban. Kattintson rá, hogy meggyőződjön arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Ellenőrizze, hogy a script megfelelően van-e elhelyezve a </body> tag előtt. Győződjön meg arról, hogy nincsenek JavaScript-hibák a böngésző konzolján (nyomja meg az F12 billentyűt a fejlesztői eszközök megnyitásához). Próbálja meg törölni a böngésző gyorsítótárát, vagy tekintse meg inkognító ablakban.

Fontos: A chatbot megköveteli, hogy weboldalát HTTP vagy HTTPS-en keresztül szolgálják ki (ne közvetlenül fájlként nyissák meg). Ha helyileg tesztel, használjon helyi fejlesztési szervert.

Dokumentáció