Πώς να Προσθέσετε το AI Chatbot Asyntai στο CrafterCMS

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

Πλατφόρμα:

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

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

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

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

Βήμα 2: Προσθήκη στο Πρότυπο FreeMarker (Συνιστάται)

Το CrafterCMS χρησιμοποιεί πρότυπα FreeMarker (.ftl) για την απόδοση σελίδων. Ο ευκολότερος τρόπος για να προσθέσετε το chatbot σε όλες τις σελίδες είναι να επεξεργαστείτε το κύριο πρότυπο σελίδας:

Στο Crafter Studio, μεταβείτε στο Site Dashboard > Content Types ή πλοηγηθείτε στα πρότυπα
Ανοίξτε το κύριο πρότυπο σελίδας (π.χ., /templates/web/pages/home.ftl ή τη βασική διάταξη)
Βρείτε την ετικέτα κλεισίματος </body>
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai αμέσως πριν την ετικέτα </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Αποθηκεύστε το αρχείο και δημοσιεύστε μέσω Crafter Studio

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

Εναλλακτική Μέθοδος 1: Χρήση Στοιχείων Προτύπου Crafter

Για καλύτερη οργάνωση, δημιουργήστε ένα αποκλειστικό πρότυπο στοιχείου για το widget chatbot:

Στο Crafter Studio, δημιουργήστε ένα νέο αρχείο προτύπου στο /templates/web/components/asyntai-widget.ftl
Προσθέστε το παρακάτω περιεχόμενο στο πρότυπο στοιχείου:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Συμπεριλάβετέ το στο κύριο πρότυπο διάταξης χρησιμοποιώντας οδηγία συμπερίληψης FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Εναλλακτικά, αν χρησιμοποιείτε το σύστημα απόδοσης στοιχείων του Crafter, χρησιμοποιήστε:
<@renderComponent component=contentModel.asyntaiWidget />
Αποθηκεύστε και τα δύο αρχεία και δημοσιεύστε μέσω Crafter Studio

Σημείωση: Η χρήση ξεχωριστού προτύπου στοιχείου διευκολύνει την ενεργοποίηση ή απενεργοποίηση του chatbot σε ολόκληρο τον ιστότοπό σας με σχολιασμό μίας μόνο γραμμής συμπερίληψης.

Εναλλακτική Μέθοδος 2: Χρήση Διαμόρφωσης Head/Scripts του Crafter

Το CrafterCMS σας επιτρέπει να εισάγετε scripts παγκόσμια μέσω της διαμόρφωσης ιστότοπου:

Στο Crafter Studio, μεταβείτε στο Site Config > Configuration
Ανοίξτε το αρχείο Engine Site Configuration (site-config.xml)
Προσθέστε μια προσαρμοσμένη διαμόρφωση έγχυσης script:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
Εναλλακτικά, επεξεργαστείτε τη βασική διάταξη FreeMarker για να διαβάζει από τη διαμόρφωση ιστότοπου και να εισάγει scripts δυναμικά:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
Αποθηκεύστε και δημοσιεύστε τις αλλαγές διαμόρφωσης

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

Εναλλακτική Μέθοδος 3: Χρήση Groovy Controller

Το CrafterCMS υποστηρίζει scripts Groovy για λογική από την πλευρά του διακομιστή. Μπορείτε να χρησιμοποιήσετε ένα controller για να προσθέσετε δυναμικά το script chatbot:

Δημιουργήστε ένα script Groovy στο /scripts/pages/ (π.χ., /scripts/pages/home.groovy ή το controller ολόκληρου του ιστότοπού σας)
Προσθέστε τον παρακάτω κώδικα για να εισάγετε τη διεύθυνση URL του script στο μοντέλο προτύπου:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
Στη συνέχεια, αναφερθείτε στις μεταβλητές μοντέλου στο πρότυπο FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Αποθηκεύστε τόσο το script Groovy όσο και το αρχείο προτύπου
Δημοσιεύστε τις αλλαγές μέσω Crafter Studio

Σημείωση: Η προσέγγιση Groovy controller είναι χρήσιμη όταν χρειάζεστε λογική συνθηκών (π.χ., ενεργοποίηση του chatbot μόνο για ορισμένους ρόλους χρηστών ή τύπους σελίδων) ή όταν θέλετε να αντλήσετε τιμές διαμόρφωσης από εξωτερικές πηγές.

Βήμα 3: Δημοσίευση και Επαλήθευση

Αφού κάνετε τις αλλαγές σας, δημοσιεύστε τις μέσω Crafter Studio:

Στο Crafter Studio, μεταβείτε στο Site Dashboard
Ελέγξτε τις αλλαγές σας στην ενότητα My Recent Activity ή Pending Approval
Κάντε κλικ στο Publish για να αναπτύξετε τις αλλαγές στον ζωντανό ιστότοπό σας
Επισκεφθείτε τον ιστότοπό σας CrafterCMS σε μια νέα καρτέλα του προγράμματος περιήγησης ή σε παράθυρο ανώνυμης περιήγησης
Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία
Κάντε κλικ σε αυτό για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά

Δεν βλέπετε το widget; Βεβαιωθείτε ότι δημοσιεύσατε τις αλλαγές μέσω Crafter Studio. Επαληθεύστε ότι επεξεργάζεστε το σωστό αρχείο προτύπου που χρησιμοποιούν οι σελίδες σας. Εκκαθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης ή δείτε σε παράθυρο ανώνυμης περιήγησης. Εάν χρησιμοποιείτε την κρυφή μνήμη του Crafter, εκκαθαρίστε την κρυφή μνήμη Engine από τον πίνακα ελέγχου Crafter Studio.

Τοποθεσία Προτύπου: Οι τοποθεσίες προτύπων CrafterCMS μπορεί να ποικίλλουν ανάλογα με τη δομή του έργου σας. Συνήθεις τοποθεσίες περιλαμβάνουν /templates/web/pages/ για πρότυπα σελίδων, /templates/web/components/ για πρότυπα στοιχείων, και /templates/web/ για πρότυπα διάταξης. Ελέγξτε τα υπάρχοντα πρότυπα για να βρείτε πού ορίζεται η ετικέτα </body>.