Πώς να Προσθέσετε το AI Chatbot του Asyntai στο Backdrop CMS

Οδηγός βήμα προς βήμα για ιστότοπους Backdrop CMS

Πλατφόρμα:

Βήμα 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: Προσθήκη στο Πρότυπο Θέματος (Προτεινόμενο)

Το Backdrop CMS χρησιμοποιεί αρχεία προτύπων .tpl.php στα θέματά του. Η προτεινόμενη προσέγγιση είναι να προσθέσετε τον κωδικό ενσωμάτωσης απευθείας στο πρότυπο σελίδας του ενεργού θέματός σας:

Αποκτήστε πρόσβαση στην εγκατάσταση Backdrop CMS μέσω FTP ή Διαχειριστή Αρχείων
Μεταβείτε στον κατάλογο του ενεργού θέματός σας: themes/yourtheme/
Ανοίξτε το αρχείο page.tpl.php (ή layout.tpl.php ανάλογα με το θέμα σας)
Βρείτε την ετικέτα κλεισίματος </body> ή τη γραμμή <?php print $page_bottom; ?>
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από αυτή τη γραμμή
Αποθηκεύστε το αρχείο

<!-- Asyntai AI Chatbot -->
<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>
<?php print $page_bottom; ?>
</body>

Συμβουλή: Η τοποθέτηση του κώδικα ακριβώς πριν από <?php print $page_bottom; ?> ή την ετικέτα κλεισίματος </body> διασφαλίζει ότι το chatbot φορτώνει μετά το περιεχόμενο της σελίδας, παρέχοντας καλύτερες επιδόσεις φόρτωσης σελίδας. Αυτή η μέθοδος προσθέτει αυτόματα το chatbot σε κάθε σελίδα που χρησιμοποιεί αυτό το θέμα.

Εναλλακτική Μέθοδος 1: Χρήση Προσαρμοσμένης Μονάδας

Μπορείτε να δημιουργήσετε μια απλή μονάδα Backdrop CMS που εισάγει το σενάριο chatbot χρησιμοποιώντας backdrop_add_js():

Δημιουργήστε τον κατάλογο μονάδας: modules/custom/asyntai_widget/
Δημιουργήστε το αρχείο μονάδας asyntai_widget.module με τον ακόλουθο κώδικα:
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
Δημιουργήστε το αρχείο asyntai_widget.info:
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
Μεταβείτε στη Λειτουργικότητα (admin/modules) στον πίνακα διαχείρισης Backdrop
Βρείτε το «Asyntai AI Chatbot Widget» κάτω από το πακέτο Custom και ενεργοποιήστε το
Κάντε κλικ στο «Αποθήκευση διαμόρφωσης»

Σημείωση: Αντικαταστήστε το YOUR_WIDGET_ID στον κώδικα μονάδας με το πραγματικό αναγνωριστικό widget σας από τον Πίνακα Ελέγχου Asyntai. Η προσέγγιση προσαρμοσμένης μονάδας είναι ασφαλής για αναβαθμίσεις και δεν θα αντικατασταθεί κατά την ενημέρωση του θέματός σας.

Εναλλακτική Μέθοδος 2: Χρήση της Μονάδας «Add to Head» του Backdrop

Η παρεχόμενη μονάδα «Add to Head» προσφέρει έναν εύκολο τρόπο εισαγωγής σεναρίων χωρίς επεξεργασία κώδικα:

Download and install the "Add to Head" contributed module from the Backdrop CMS website
Μεταβείτε στις Ρυθμίσεις > Ανάπτυξη > Add to Head
Προσθέστε τον κωδικό ενσωμάτωσης Asyntai στην ενότητα υποσέλιδου (footer section)
Κάντε κλικ στο «Αποθήκευση διαμόρφωσης»

Συμβουλή: Η χρήση της μονάδας «Add to Head» είναι η ευκολότερη μέθοδος εάν προτιμάτε να μην επεξεργάζεστε αρχεία θέματος ή να δημιουργείτε προσαρμοσμένες μονάδες. Παρέχει απλή διεπαφή διαχειριστή για τη διαχείριση εισαγόμενων σεναρίων.

Εναλλακτική Μέθοδος 3: Χρήση Συστήματος Μπλοκ

Το σύστημα διάταξης και μπλοκ του Backdrop CMS μπορεί επίσης να χρησιμοποιηθεί για την προσθήκη του chatbot:

Συνδεθείτε στον πίνακα διαχείρισης Backdrop CMS
Μεταβείτε στη Δομή > Διατάξεις
Επιλέξτε τη διάταξη που θέλετε να επεξεργαστείτε (π.χ. την προεπιλεγμένη διάταξη)
Κάντε κλικ στο «Προσθήκη μπλοκ» στην περιοχή υποσέλιδου
Επιλέξτε «Προσαρμοσμένο μπλοκ»
Ορίστε τη μορφή μπλοκ σε «Πλήρης HTML» ή «Raw HTML»
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai στο σώμα του μπλοκ
Δώστε στο μπλοκ έναν τίτλο (π.χ. «Asyntai Chatbot») και προαιρετικά επιλέξτε «Απόκρυψη τίτλου»
Κάντε κλικ στο «Αποθήκευση μπλοκ» και μετά «Αποθήκευση διάταξης»

Σημαντικό: Βεβαιωθείτε ότι η μορφή κειμένου έχει οριστεί σε «Πλήρης HTML» ή «Raw HTML» ώστε η ετικέτα script να μην αφαιρεθεί. Η προεπιλεγμένη μορφή «Filtered HTML» θα αφαιρέσει τις ετικέτες script για λόγους ασφαλείας.

Βήμα 3: Εκκαθάριση Προσωρινής Μνήμης και Επαλήθευση

Αφού κάνετε τις αλλαγές σας, εκκαθαρίστε την προσωρινή μνήμη του Backdrop CMS και επαληθεύστε την εγκατάσταση:

Μεταβείτε στις Ρυθμίσεις > Επιδόσεις στον πίνακα διαχείρισής σας
Κάντε κλικ στο «Εκκαθάριση όλων των προσωρινών μνημών»
Ανοίξτε τον ιστότοπό σας σε μια νέα καρτέλα προγράμματος περιήγησης ή παράθυρο ανώνυμης περιήγησης
Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία
Κάντε κλικ σε αυτό για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά

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