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

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

Πλατφόρμα:

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

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

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

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

Βήμα 2: Προσθήκη σε Αρχείο Προτύπου (Συνιστάται)

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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. Επίσης επαληθεύστε ότι το αρχείο προτύπου χρησιμοποιείται πραγματικά από τις σελίδες που βλέπετε.