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

Universal guide for HTML, custom sites, and static generators

Πλατφόρμα:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

Jekyll

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

Hugo

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

Gatsby

Add to gatsby-browser.js or use 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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

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

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

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

Τεκμηρίωση