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

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

Πλατφόρμα:

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

Πρώτα, μεταβείτε στον Πίνακα Ελέγχου 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>

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό 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) για τυχόν σφάλματα.