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

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

Πλατφόρμα:

Βήμα 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: Προσθήκη Κώδικα μέσω Site Settings (Όλες οι Σελίδες)

Για να προσθέσετε το chatbot σε όλες τις σελίδες του ιστότοπού σας Webflow ταυτόχρονα:

Συνδεθείτε στον λογαριασμό Webflow σας και επιλέξτε το έργο σας
Κάντε κλικ στο εικονίδιο γραναζιού (Site Settings) στην αριστερή πλαϊνή στήλη
Κάντε κλικ στο «Custom Code» στο μενού ρυθμίσεων
Κάντε κύλιση προς τα κάτω στην ενότητα «Footer Code» (πριν από την ετικέτα </body>)
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Κάντε κλικ στο «Save Changes»
Δημοσιεύστε τον ιστότοπό σας για να εφαρμόσετε αλλαγές

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

Εναλλακτική: Προσαρμοσμένος Κώδικας ανά Σελίδα

Εάν θέλετε το chatbot μόνο σε συγκεκριμένες σελίδες:

Ανοίξτε το έργο σας στον Webflow Designer
Κάντε κλικ στον πίνακα Pages (εικονίδιο φακέλου) στην αριστερή πλαϊνή στήλη
Τοποθετήστε τον κursor πάνω από τη σελίδα που θέλετε να επεξεργαστείτε και κάντε κλικ στο εικονίδιο γραναζιού
Κάντε κύλιση προς τα κάτω στο «Custom Code»
Επικολλήστε τον κώδικα ενσωμάτωσης του Asyntai στην ενότητα «Before </body> tag»
Κάντε κλικ στο «Αποθήκευση»
Δημοσιεύστε τον ιστότοπό σας

Εναλλακτική: Χρήση Στοιχείου Embed

Μπορείτε επίσης να προσθέσετε το chatbot χρησιμοποιώντας το στοιχείο Embed οπουδήποτε στη σελίδα σας:

Ανοίξτε το έργο σας στον Webflow Designer
Κάντε κλικ στο κουμπί «+» για να ανοίξετε τον πίνακα Add
Αναζητήστε "Embed" ή βρείτε το στην ενότητα Components
Σύρετε το στοιχείο Embed στη σελίδα σας
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai στον επεξεργαστή κώδικα
Κάντε κλικ στο «Αποθήκευση & Κλείσιμο»
Δημοσιεύστε τον ιστότοπό σας

Σημαντικό: Όταν χρησιμοποιείτε το στοιχείο Embed, θα πρέπει να το προσθέσετε σε κάθε σελίδα όπου θέλετε το chatbot. Για εγκατάσταση σε ολόκληρο τον ιστότοπο, χρησιμοποιήστε τη μέθοδο Site Settings παραπάνω.

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

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

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

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

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

Προσθέστε το χαρακτηριστικό data-replace στην ετικέτα script και η γραμμή θα πάρει τη θέση αυτής που έχει ήδη το θέμα σας. Προσθέστε το στο Site Settings, Custom Code, Footer, στο ίδιο σημείο με τον κώδικα του chat, που το τοποθετεί ακριβώς πριν από το κλείσιμο της ετικέτας body.

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

Διαβάστε τον πλήρη οδηγό για τη μπάρα αναζήτησης AI