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

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

Πλατφόρμα:

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

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

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

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

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

Ο καλύτερος τρόπος για να προσθέσετε το chatbot σε όλες τις σελίδες του ιστότοπου Grav είναι η επεξεργασία του βασικού προτύπου Twig του θέματός σας:

Μεταβείτε στον κατάλογο user/themes/yourtheme/templates/ του έργου Grav σας και ανοίξτε το default.html.twig (ή το βασικό πρότυπο που χρησιμοποιείται από το θέμα σας)
Προσθέστε τον κώδικα ενσωμάτωσης Asyntai πριν από την ετικέτα κλεισίματος </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Αποθηκεύστε το αρχείο

Συμβουλή: Το Grav χρησιμοποιεί το Twig ως μηχανή προτύπων. Το βασικό πρότυπο είναι συνήθως default.html.twig ή partials/base.html.twig ανάλογα με το θέμα σας. Ελέγξτε τη δομή του θέματός σας για να βρείτε το σωστό αρχείο που περιέχει την ετικέτα κλεισίματος </body>.

Εναλλακτική μέθοδος 1: Χρήση του Grav Asset Manager

Ο ενσωματωμένος Asset Manager του Grav παρέχει έναν εύτακτο τρόπο για την προσθήκη JavaScript assets μέσω Twig:

Ανοίξτε το βασικό πρότυπο Twig του θέματός σας (π.χ., user/themes/yourtheme/templates/partials/base.html.twig)
Χρησιμοποιήστε τον Asset Manager για να προσθέσετε τη JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Ή προσθέστε ενσωματωμένη JavaScript για τη δυναμική δημιουργία του στοιχείου script στο βασικό πρότυπό σας:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

Σημείωση: Η μέθοδος Asset Manager είναι η προτεινόμενη από το Grav προσέγγιση για τη διαχείριση JavaScript assets. Παρέχει ενσωματωμένη υποστήριξη για pipelining, ταξινόμηση και ομαδοποίηση assets.

Εναλλακτική μέθοδος 2: Χρήση πρόσθετου Custom JS

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

Εγκαταστήστε το πρόσθετο "Custom JS" από τον πίνακα διαχείρισης Grav ή μέσω CLI:

bin/gpm install custom-js

Μεταβείτε στο Διαχείριση > Πρόσθετα > Custom JS
Προσθέστε τον κώδικα script ενσωμάτωσης:

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

Αποθηκεύστε τη διαμόρφωση του πρόσθετου

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

Εναλλακτική μέθοδος 3: Χρήση παράκαμψης μπλοκ σε θυγατρικό πρότυπο

Εάν το θέμα Grav σας χρησιμοποιεί κληρονομικότητα μπλοκ Twig, μπορείτε να παρακάμψετε το κάτω μπλοκ σε ένα θυγατρικό πρότυπο:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Δημιουργήστε ή ανοίξτε ένα θυγατρικό template που επεκτείνει το βασικό template του θέματός σας
Προσθέστε την παράκαμψη μπλοκ που εμφανίζεται παραπάνω
Η κλήση parent() διασφαλίζει ότι όλο το υπάρχον περιεχόμενο στο μπλοκ διατηρείται

Σημείωση: Αυτή η μέθοδος χρησιμοποιεί το σύστημα κληρονομικότητας προτύπων του Twig. Βεβαιωθείτε ότι το όνομα μπλοκ (π.χ., bottom) αντιστοιχεί στο μπλοκ που ορίζεται στο βασικό πρότυπο του θέματός σας. Κοινά ονόματα μπλοκ περιλαμβάνουν bottom, javascripts ή footer.

Εναλλακτική μέθοδος 4: Χρήση πρόσθετου Custom Head του Grav

Μια άλλη επιλογή βασισμένη σε πρόσθετο είναι το πρόσθετο Custom Head:

Εγκαταστήστε το πρόσθετο custom-head μέσω CLI ή πίνακα διαχείρισης:

bin/gpm install custom-head

Μεταβείτε στο Διαχείριση > Πρόσθετα > Custom Head
Προσθέστε τον κώδικα script ενσωμάτωσης Asyntai στη διαμόρφωση του πρόσθετου:

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

Αποθηκεύστε τη διαμόρφωση

Συμβουλή: Το πρόσθετο Custom Head σας επιτρέπει να εισαγάγετε κώδικα στις ενότητες head ή body του ιστότοπού σας χωρίς να αγγίζετε αρχεία θέματος. Ελέγξτε την τεκμηρίωση του πρόσθετου για τη σωστή επιλογή τοποθέτησης ώστε να εισαγάγετε το σενάριο πριν από την ετικέτα κλεισίματος </body>.

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

Αφού προσθέσετε τον κώδικα, εκκαθαρίστε την κρυφή μνήμη Grav και επαληθεύστε την εγκατάσταση:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι εκκαθαρίσατε την κρυφή μνήμη Grav με bin/grav clearcache ή από τον πίνακα διαχείρισης. Ελέγξτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό αναγνωριστικό γραφικού στοιχείου από τον πίνακα ελέγχου. Εκκαθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης ή προβάλετε σε λειτουργία ανώνυμης περιήγησης. Ανοίξτε την κονσόλα του προγράμματος περιήγησης (F12) για να ελέγξετε για τυχόν σφάλματα JavaScript. Επαληθεύστε ότι το σενάριο υπάρχει στην πηγή της σελίδας κάνοντας δεξί κλικ και επιλέγοντας «Προβολή πηγής σελίδας».

Τεκμηρίωση

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

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

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

Εναλλακτική μέθοδος 1: Χρήση του Grav Asset Manager

Εναλλακτική μέθοδος 2: Χρήση πρόσθετου Custom JS

Εναλλακτική μέθοδος 3: Χρήση παράκαμψης μπλοκ σε θυγατρικό πρότυπο

Εναλλακτική μέθοδος 4: Χρήση πρόσθετου Custom Head του Grav

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