Η προσθήκη ενός chatbot του ChatLab στον ιστότοπό σας στο Webflow επιτρέπει στους επισκέπτες να αλληλεπιδρούν με τον βοηθό AI σας απευθείας στον ιστότοπό σας. Αυτός ο οδηγός περιγράφει αναλυτικά τα βήματα για να λάβετε τον κώδικα ενσωμάτωσης από το ChatLab και να τον επικολλήσετε στο Webflow.
Πριν ξεκινήσετε
Πριν ξεκινήσετε, δημιουργήστε το chatbot σας και ελέγξτε ότι ο ιστότοπος ή ο χώρος εργασίας σας στο Webflow περιλαμβάνει πρόσβαση για προσαρμοσμένο κώδικα (custom code). Δείτε τις απαιτήσεις του Webflow για προσαρμοσμένο κώδικα. Χρειάζεστε επίσης δικαιώματα επεξεργασίας και δημοσίευσης του ιστοτόπου.
Βήμα 1 - Αντιγράψτε τον κώδικα ενσωμάτωσης από το ChatLab
- Συνδεθείτε στο ChatLab και επιλέξτε το chatbot που θέλετε να ενσωματώσετε
- Κάντε κλικ στην καρτέλα Deploy (Δημοσίευση) και, στη συνέχεια, επιλέξτε Webflow από τον πίνακα πλατφορμών στα δεξιά
- Επιλέξτε Widget για την εγκατάσταση στην κεφαλίδα παρακάτω. Για μια συνομιλία που είναι πάντα ορατή, επιλέξτε Iframe και ακολουθήστε τις παρακάτω οδηγίες για iframe. Δείτε το άρθρο Ποια είναι η διαφορά μεταξύ widget και Iframe; για μια σύγκριση
- Κάντε κλικ στο κουμπί Copy to clipboard (Αντιγραφή στο πρόχειρο)
Βήμα 2 - Προσθέστε τον κώδικα στο Webflow
Η προσθήκη του κώδικα στο Site Settings (Ρυθμίσεις ιστοτόπου) τοποθετεί το chatbot σε κάθε σελίδα του ιστοτόπου σας στο Webflow.
- Ανοίξτε το έργο σας στον πίνακα ελέγχου (Dashboard) του Webflow
- Μεταβείτε στο Site settings > Custom code
- Επικολλήστε τον κώδικα που αντιγράψατε στην ενότητα Head Code
- Κάντε κλικ στο Save Changes (Αποθήκευση αλλαγών)
- Κάντε Publish (Δημοσίευση) του ιστοτόπου σας για να εφαρμοστούν οι αλλαγές
Προσθήκη σε μία μόνο σελίδα
Αν θέλετε το chatbot σε μια συγκεκριμένη σελίδα και όχι σε ολόκληρο τον ιστότοπο:
- Ανοίξτε τη σελίδα στο Webflow Designer
- Κάντε κλικ στο εικονίδιο γραναζιού για να ανοίξετε το Page Settings (Ρυθμίσεις σελίδας)
- Μετακινηθείτε προς τα κάτω στην ενότητα Custom Code
- Επικολλήστε τον κώδικα στο πεδίο Head Code
- Αποθηκεύστε και δημοσιεύστε τον ιστότοπό σας
Προσθήκη ενός πάντα ορατού iframe
Στο Webflow Designer, τοποθετήστε ένα στοιχείο Code Embed εκεί όπου θέλετε το chatbot, επικολλήστε το απόσπασμα Iframe από το ChatLab και ορίστε το πλάτος και το ύψος του ανάλογα με τη διάταξή σας. Αποθηκεύστε και δημοσιεύστε τον ιστότοπο. Το iframe ανήκει στο περιεχόμενο της σελίδας, όχι στο Head Code.
Επαλήθευση της εγκατάστασης
Μετά τη δημοσίευση, ανοίξτε τον ιστότοπό σας στο Webflow σε ένα πρόγραμμα περιήγησης. Θα πρέπει να δείτε το εικονίδιο της συνομιλίας να εμφανίζεται στη γωνία της σελίδας (για τη λειτουργία widget) ή το παράθυρο συνομιλίας ενσωματωμένο στη σελίδα (για τη λειτουργία iframe). Κάντε κλικ στο εικονίδιο για να ανοίξετε τη συνομιλία και στείλτε ένα δοκιμαστικό μήνυμα για να επιβεβαιώσετε ότι όλα λειτουργούν σωστά.