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

Οδηγός βήμα προς βήμα για ιστότοπους ProcessWire 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: Προσθήκη σε Αρχείο Προτύπου (Συνιστάται)

Το ProcessWire χρησιμοποιεί αρχεία προτύπου PHP που βρίσκονται στον κατάλογο site/templates/. Η ευκολότερη προσέγγιση είναι να προσθέσετε τον κώδικα ενσωμάτωσης απευθείας στο κύριο αρχείο προτύπου:

Αποκτήστε πρόσβαση στα αρχεία εγκατάστασης ProcessWire μέσω FTP, SSH ή διαχειριστή αρχείων
Μεταβείτε στο site/templates/
Ανοίξτε το κύριο αρχείο προτύπου — αυτό είναι συχνά _main.php ή basic-page.php ανάλογα με το προφίλ ιστότοπου
Εάν χρησιμοποιείτε τη στρατηγική καθυστερημένης εξόδου (η προεπιλογή για τα περισσότερα προφίλ ιστότοπου), ανοίξτε το _main.php
Βρείτε την ετικέτα κλεισίματος </body>
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai ακριβώς πριν από αυτό:

<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>

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

Εναλλακτική Μέθοδος 1: Χρήση _foot.inc ή Αρχείου Προσθήκης _main.php

Εάν ο ιστότοπος ProcessWire χρησιμοποιεί την προσέγγιση αρχείου προσθήκης (κοινή σε πολλά προφίλ ιστότοπου), μπορείτε να προσθέσετε τον κώδικα ενσωμάτωσης στο κοινόχρηστο include υποσέλιδου:

Μεταβείτε στο site/templates/
Ανοίξτε το _foot.inc (ή το αντίστοιχο αρχείο include υποσέλιδου)
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai ακριβώς πριν την ετικέτα κλεισίματος </body>
Αποθηκεύστε το αρχείο

Η στρατηγική καθυστερημένης εξόδου του ProcessWire λειτουργεί συνήθως με τρία βασικά αρχεία:

_init.php — εκτελείται πριν από κάθε πρότυπο, αρχικοποιεί μεταβλητές
Το αρχείο προτύπου σας (π.χ. basic-page.php) — συμπληρώνει μεταβλητές περιεχομένου
_main.php — εξάγει την τελική σήμανση HTML χρησιμοποιώντας αυτές τις μεταβλητές

Εάν ο ιστότοπος χρησιμοποιεί αυτή την προσέγγιση, η προσθήκη του σεναρίου στο _main.php πριν από </body> διασφαλίζει ότι εμφανίζεται σε κάθε σελίδα.

Σημείωση: Τα ονόματα αρχείων _init.php και _main.php ρυθμίζονται στο site/config.php μέσω των ρυθμίσεων $config->prependTemplateFile και $config->appendTemplateFile. Ελέγξτε τη διαμόρφωση εάν τα αρχεία σας έχουν διαφορετικά ονόματα.

Εναλλακτική Μέθοδος 2: Χρήση Πίνακα $config->scripts

Το ProcessWire παρέχει ένα FilenameArray $config->scripts που μπορείτε να χρησιμοποιήσετε για τη διαχείριση αρχείων JavaScript. Στο _init.php ή μεμονωμένο αρχείο προτύπου, προσθέστε:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Στη συνέχεια στο _main.php (ή include υποσέλιδου), εκτελέστε βρόχο στον πίνακα σεναρίων για εξαγωγή τους:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Σημαντικό: Η προσέγγιση $config->scripts χειρίζεται το χαρακτηριστικό src του σεναρίου, αλλά το χαρακτηριστικό data-asyntai-id χρειάζεται χωριστό χειρισμό. Θα χρειαστεί είτε να προσθέσετε χειροκίνητα το χαρακτηριστικό δεδομένων στην έξοδο βρόχου, είτε να χρησιμοποιήσετε τη μέθοδο απευθείας ετικέτας σεναρίου από το Βήμα 2 για την απλούστερη εγκατάσταση.

Εναλλακτική Μέθοδος 3: Χρήση Hook (ready.php)

Για πιο προχωρημένη προσέγγιση, μπορείτε να χρησιμοποιήσετε το σύστημα hook του ProcessWire για αυτόματη εισαγωγή του σεναρίου chatbot σε κάθε σελίδα. Προσθέστε τα παρακάτω στο αρχείο site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<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>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Αυτό το hook υποκλέπτει την απόδοση HTML κάθε σελίδας και εισάγει αυτόματα το σενάριο Asyntai ακριβώς πριν από την ετικέτα κλεισίματος </body>.

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

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

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι αποθηκεύσατε όλα τα τροποποιημένα αρχεία. Δοκιμάστε να εκκαθαρίσετε την κρυφή μνήμη ή να προβάλετε σε παράθυρο ανώνυμης περιήγησης. Εάν η κρυφή μνήμη προτύπου του ProcessWire είναι ενεργοποιημένη, ίσως χρειαστεί να την εκκαθαρίσετε μεταβαίνοντας στο Modules → Core → Template Engine Cache ή προσθέτοντας ?nocache=1 στη διεύθυνση URL. Επίσης επαληθεύστε ότι το αρχείο προτύπου χρησιμοποιείται πραγματικά από τις σελίδες που βλέπετε.