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

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

Το Kirby είναι ένα flat-file PHP CMS που χρησιμοποιεί snippets για επαναχρησιμοποιούμενα τμήματα προτύπου. Η συνιστώμενη προσέγγιση είναι να δημιουργήσετε ένα αποκλειστικό snippet για το chatbot:

Δημιουργήστε νέο αρχείο snippet στη διαδρομή site/snippets/asyntai-widget.php
Επικολλήστε τον κώδικα ενσωμάτωσης στο αρχείο:

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

Στη συνέχεια συμπεριλάβετε το snippet στο κύριο πρότυπο (π.χ. site/templates/default.php) ή τη διάταξη, ακριβώς πριν από την ετικέτα κλεισίματος </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

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

Εναλλακτική Μέθοδος 1: Προσθήκη στο Snippet Υποσέλιδου

Εάν ο ιστότοπος Kirby χρησιμοποιεί snippet υποσέλιδου, μπορείτε να προσθέσετε απευθείας εκεί τον κώδικα ενσωμάτωσης:

Ανοίξτε το site/snippets/footer.php (δημιουργήστε το εάν δεν υπάρχει)
Προσθέστε τον κώδικα ενσωμάτωσης πριν από την ετικέτα κλεισίματος </body>

    <!-- Footer content -->
    <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>
</html>

Βεβαιωθείτε ότι τα πρότυπά σας περιλαμβάνουν το snippet υποσέλιδου:

<?php snippet('footer') ?>

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

Εναλλακτική Μέθοδος 2: Χρήση Plugin Kirby

Μπορείτε να δημιουργήσετε ένα plugin Kirby για αυτόματη εισαγωγή του σεναρίου chatbot σε κάθε σελίδα χωρίς τροποποίηση προτύπων:

Δημιουργήστε τον κατάλογο plugin και το αρχείο στη διαδρομή site/plugins/asyntai/index.php
Προσθέστε τον παρακάτω κώδικα για να χρησιμοποιήσετε τα hooks του Kirby για την εισαγωγή του script:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

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

Εναλλακτική Μέθοδος 3: Χρήση του Βοηθητικού js() του Kirby

Το Kirby παρέχει ενσωματωμένο βοηθητικό js() για φόρτωση αρχείων JavaScript. Μπορείτε να το χρησιμοποιήσετε στο πρότυπο ή snippet σας:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Ή προσθέστε το σενάριο απευθείας στο αρχείο PHP προτύπου πριν από </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Σημείωση: Εάν χρησιμοποιείτε το βοηθητικό js(), βεβαιωθείτε ότι τοποθετείται εντός της ενότητας <body> του προτύπου για να διασφαλίσετε τη σωστή φόρτωση του chatbot.

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

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό ID widget από τον πίνακα ελέγχου. Επαληθεύστε ότι το αρχείο snippet ή plugin αποθηκεύτηκε στον σωστό κατάλογο. Εάν χρησιμοποιείτε τη μέθοδο plugin, βεβαιωθείτε ότι η δομή καταλόγου plugin είναι site/plugins/asyntai/index.php. Εκκαθαρίστε την κρυφή μνήμη ή ελέγξτε σε κατάσταση ανώνυμης περιήγησης. Ελέγξτε την κονσόλα προγραμματιστή (F12) για τυχόν σφάλματα.