Πώς να προσθέσετε το AI Chatbot Asyntai σε οποιονδήποτε ιστότοπο

Καθολικός οδηγός για HTML, προσαρμοσμένους ιστότοπους και στατικές γεννήτριες

Πλατφόρμα:

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Αρχικά, μεταβείτε στον Πίνακα ελέγχου Asyntai και μετακινηθείτε προς τα κάτω στην ενότητα «Embed Code». Αντιγράψτε τον μοναδικό σας κωδικό ενσωμάτωσης, ο οποίος θα μοιάζει κάπως έτσι:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Προσθήκη στο αρχείο HTML σας

Ο απλούστερος τρόπος για να προσθέσετε το chatbot είναι να επικολλήσετε τον κώδικα ενσωμάτωσης απευθείας στο αρχείο HTML σας:

Ανοίξτε το αρχείο HTML σας σε έναν επεξεργαστή κειμένου
Βρείτε την ετικέτα κλεισίματος </body>
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από την ετικέτα </body>
Αποθηκεύστε το αρχείο

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Συμβουλή: Η προσθήκη του σεναρίου πριν από την ετικέτα κλεισίματος </body> διασφαλίζει ότι φορτώνεται μετά το περιεχόμενο της σελίδας σας, κάτι που είναι βέλτιστο για την απόδοση και δεν θα επιβραδύνει τη σελίδα σας.

Για ιστότοπους πολλών σελίδων

Εάν ο ιστότοπός σας έχει πολλές σελίδες HTML, έχετε διάφορες επιλογές:

Επιλογή Α: Προσθήκη σε κάθε σελίδα

Προσθέστε τον κώδικα ενσωμάτωσης σε κάθε αρχείο HTML όπου θέλετε να εμφανίζεται το chatbot.

Επιλογή Β: Χρήση κοινής συμπερίληψης υποσέλιδου

Αν χρησιμοποιείτε server-side includes (SSI), PHP includes ή παρόμοια:

Δημιουργήστε ένα αρχείο footer.html (ή footer.php)
Προσθέστε τον κώδικα ενσωμάτωσης Asyntai σε αυτό το αρχείο
Συμπεριλάβετε αυτό το αρχείο υποσέλιδου σε όλες τις σελίδες σας:
 <?php include 'footer.php'; ?>

Επιλογή Γ: Δυναμική φόρτωση JavaScript

Δημιουργήστε ένα μοναδικό αρχείο JavaScript που φορτώνει το chatbot σε όλες τις σελίδες:

Δημιουργήστε ένα αρχείο με όνομα 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); })();
Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας
Συμπεριλάβετε αυτό το script σε όλες τις σελίδες σας:
<script src="/js/asyntai-loader.js"></script>

Για στατικές γεννήτριες ιστότοπων

Εάν χρησιμοποιείτε μια στατική γεννήτρια ιστότοπου, προσθέστε τον κώδικα ενσωμάτωσης στη βασική διάταξη ή το πρότυπό σας:

Jekyll

Προσθέστε στο _includes/footer.html ή _layouts/default.html

Hugo

Προσθέστε στο layouts/partials/footer.html ή layouts/_default/baseof.html

Gatsby

Προσθέστε στο gatsby-browser.js ή χρησιμοποιήστε το gatsby-ssr.js

Next.js

Προσθέστε στο pages/_document.js ή χρησιμοποιήστε το στοιχείο next/script

Nuxt.js

Προσθέστε στο nuxt.config.js κάτω από head.script

Eleventy (11ty)

Προσθέστε στη βασική διάταξή σας στο _includes/

Astro

Προσθέστε στο src/layouts/Layout.astro πριν από </body>

VuePress

Προσθέστε στο .vuepress/config.js κάτω από head

Για εφαρμογές React / Vue / Angular

Για εφαρμογές μιας σελίδας (SPA), μπορείτε να προσθέσετε το σενάριο στο index.html σας ή να το φορτώσετε δυναμικά:

React (μέθοδος index.html)

<!-- In public/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

React (μέθοδος 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 (στο main.js ή 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 (στο index.html)

<!-- In src/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Βήμα 3: Επαληθεύστε την Εγκατάσταση

Αφού προσθέσετε τον κώδικα, ανοίξτε τον ιστότοπό σας σε μια νέα καρτέλα προγράμματος περιήγησης ή παράθυρο ανώνυμης περιήγησης. Θα πρέπει να δείτε το κουμπί του γραφικού στοιχείου συνομιλίας στην κάτω δεξιά γωνία. Κάντε κλικ σε αυτό για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά.

Δεν βλέπετε το widget; Ελέγξτε ότι το σενάριο είναι σωστά τοποθετημένο πριν από την ετικέτα </body>. Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα JavaScript στην κονσόλα του προγράμματος περιήγησής σας (πατήστε F12 για να ανοίξετε τα εργαλεία προγραμματιστή). Δοκιμάστε να εκκαθαρίσετε την κρυφή μνήμη του προγράμματος περιήγησης ή να προβάλετε σε παράθυρο ανώνυμης περιήγησης.

Σημαντικό: Το chatbot απαιτεί ο ιστότοπός σας να εξυπηρετείται μέσω HTTP ή HTTPS (όχι να ανοίγεται απευθείας ως αρχείο). Εάν δοκιμάζετε τοπικά, χρησιμοποιήστε έναν τοπικό διακομιστή ανάπτυξης.

Τεκμηρίωση