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

Οδηγός βήμα-βήμα για ιστότοπους Squarespace

Πλατφόρμα:

Βήμα 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: Προσθήκη κώδικα μέσω Code Injection

Αν ο ιστότοπός σας έχει πρόγραμμα Squarespace Core, Plus ή Advanced (ή παλαιότερο πρόγραμμα Business ή Commerce), μπορείτε να προσθέσετε το chatbot σε όλες τις σελίδες ταυτόχρονα μέσω Code Injection:

Συνδεθείτε στον λογαριασμό Squarespace σας και ανοίξτε τον ιστότοπό σας
Κάντε κλικ στο Pages στον αριστερό πίνακα
Κάντε κλικ στο Custom Code στο κάτω μέρος του πίνακα
Κάντε κλικ στο Code Injection
Μεταβείτε προς τα κάτω στην ενότητα Υποσέλιδο
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai στο πλαίσιο κειμένου Υποσέλιδου
Κάντε κλικ στο «Αποθήκευση»

Σημείωση: Στο Squarespace 7.0, το Code Injection βρίσκεται στο Pages → Website Tools.

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

Εναλλακτικό: Χρήση μπλοκ κώδικα

Για να προσθέσετε το chatbot μόνο σε συγκεκριμένες σελίδες, μπορείτε να χρησιμοποιήσετε μπλοκ κώδικα (Code Blocks). Ένα μπλοκ κώδικα εκτελεί JavaScript μόνο με πρόγραμμα Core, Plus ή Advanced (ή παλαιότερο πρόγραμμα Business ή Commerce).

Ανοίξτε τον ιστότοπό σας στον Επεξεργαστή Squarespace
Μεταβείτε στη σελίδα όπου θέλετε να προσθέσετε το chatbot
Κάντε κλικ στο «Επεξεργασία» στη σελίδα
Κυλήστε προς τα κάτω και κάντε κλικ στο "Head HTML"
Μεταβείτε προς τα κάτω και επιλέξτε «Κώδικας»
Κάντε κλικ στο εικονίδιο με το μολύβι για να επεξεργαστείτε το code block
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Βεβαιωθείτε ότι το μενού Mode του μπλοκ είναι ρυθμισμένο σε HTML
Κάντε κλικ έξω από το block για να κλείσετε τον επεξεργαστή
Κάντε κλικ στο «Αποθήκευση»

Σημαντικό: Όταν χρησιμοποιείτε μπλοκ κώδικα, πρέπει να προσθέσετε τον κώδικα σε κάθε σελίδα όπου θέλετε να εμφανίζεται το chatbot. Για εγκατάσταση σε ολόκληρο τον ιστότοπο, χρησιμοποιήστε τη μέθοδο Code Injection παραπάνω.

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

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι αποθηκεύσατε και δημοσιεύσατε τις αλλαγές σας. Δοκιμάστε να εκκαθαρίσετε την cache του προγράμματος περιήγησης ή να προβάλετε τον ιστότοπό σας σε παράθυρο ανώνυμης περιήγησης. Το Squarespace ενδέχεται να χρειαστεί μερικά λεπτά για να εφαρμόσει αλλαγές κώδικα. Ο κώδικας μερικές φορές δεν εκτελείται όταν είστε συνδεδεμένοι στο Squarespace, γι' αυτό ελέγξτε τον ιστότοπο σε ιδιωτικό παράθυρο.

Προσθήκη της μπάρας αναζήτησης AI

Η μπάρα αναζήτησης AI είναι ξεχωριστό widget με δικό του κώδικα. Προσθέστε την μαζί με το chat ή μόνη της. Απαιτεί πρόγραμμα Standard ή ανώτερο: σε χαμηλότερο η μπάρα εμφανίζεται αλλά δεν επιστρέφει αποτελέσματα.

Προσθέστε το χαρακτηριστικό data-replace στην ετικέτα script και η γραμμή θα πάρει τη θέση αυτής που έχει ήδη το θέμα σας. Προσθέστε το στα Pages, Custom Code, Code Injection, Υποσέλιδο, στο ίδιο σημείο με τον κώδικα της συνομιλίας. Το Squarespace προσφέρει το Code Injection μόνο με πρόγραμμα Core, Plus ή Advanced (ή παλαιότερο πρόγραμμα Business ή Commerce), οπότε χρειάζεστε ένα από αυτά για να το εγκαταστήσετε.

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