Η προσθήκη του ChatLab στον ιστότοπό σας επιτρέπει στους επισκέπτες να αλληλεπιδρούν με το AI chatbot απευθείας στη σελίδα σας. Αυτός ο οδηγός εξηγεί πώς να λάβετε τον κώδικα ενσωμάτωσης και να τον προσθέσετε στον ιστότοπό σας.
Πριν ξεκινήσετε
Δημιουργήστε και εκπαιδεύστε το chatbot σας πριν το μοιραστείτε με τους πελάτες. Για την εγκατάσταση, χρειάζεστε επίσης άδεια επεξεργασίας και δημοσίευσης του ιστοτόπου. Δείτε το Πώς να δημιουργήσετε το πρώτο σας chatbot.
Άνοιγμα της καρτέλας Deploy
Επιλέξτε το chatbot σας από τον κύριο πίνακα ελέγχου και, στη συνέχεια, κάντε κλικ στην καρτέλα Deploy (Δημοσίευση).
Επιλογή της πλατφόρμας σας
Ο πίνακας Select Platform (Επιλογή πλατφόρμας) στα δεξιά παραθέτει τους υποστηριζόμενους προορισμούς σε δύο ομάδες: Website (Ιστότοπος), για την τοποθέτηση του chatbot σε σελίδες που ελέγχετε, και Messaging channels (Κανάλια μηνυμάτων), για τη σύνδεσή του με έναν υπάρχοντα λογαριασμό συνομιλιών. Κάντε κλικ στην καταχώριση που αντιστοιχεί στο σημείο όπου θέλετε να εμφανίζεται το chatbot για να δείτε προσαρμοσμένες οδηγίες.
Υποστηριζόμενες πλατφόρμες:
- HTML Code - λειτουργεί με οποιονδήποτε ιστότοπο όπου μπορείτε να επεξεργαστείτε τον κώδικα HTML
- WordPress - μέσω του επίσημου πρόσθετου ChatLab ή με μη αυτόματη εισαγωγή κώδικα
- Wix - μέσω του Settings > Custom Code
- Webflow - μέσω του Site settings > Custom code, με ενεργοποιημένη την πρόσβαση σε προσαρμοσμένο κώδικα για τον ιστότοπο ή τον χώρο εργασίας σας
- PrestaShop - μέσω της μονάδας ChatLab PrestaShop ή με μη αυτόματη εισαγωγή κώδικα
- Shopify - μέσω του αρχείου theme.liquid
- WooCommerce - μέσω του πρόσθετου WordPress ή με μη αυτόματη εισαγωγή κώδικα
- Abicart - μέσω Store design > Themes > Site header
- CS-Cart - μέσω Design > Layouts > Custom HTML code
Κανάλια μηνυμάτων:
- WhatsApp Business - απαντά σε έναν λογαριασμό WhatsApp Business, δείτε το WhatsApp for Business
- Facebook Messenger - απαντά στα μηνύματα της σελίδας σας στο Facebook, δείτε το Ενσωμάτωση με το Facebook Messenger
- Instagram - απαντά στα άμεσα μηνύματα (DM) του Instagram, δείτε το Ενσωμάτωση με το Instagram
Τα κανάλια μηνυμάτων δεν χρησιμοποιούν τον παρακάτω κώδικα ενσωμάτωσης. Συνδέονται με έναν λογαριασμό που σας ανήκει ήδη, επομένως δεν επικολλάται κώδικας σε κάποιον ιστότοπο.
Κάθε πλατφόρμα εμφανίζει οδηγίες βήμα προς βήμα ειδικά για τη συγκεκριμένη ενσωμάτωση. Για πλατφόρμες με ειδικά άρθρα βοήθειας, εμφανίζεται ένας σύνδεσμος View full instructions (Προβολή πλήρων οδηγιών) στο κάτω μέρος.
Προσθήκη μέσω HTML Code
Η επιλογή HTML Code λειτουργεί με οποιονδήποτε ιστότοπο όπου έχετε πρόσβαση στον πηγαίο κώδικα. Θα δείτε δύο επιλογές ενσωμάτωσης: Widget και Iframe.
Λειτουργία Widget
Η καρτέλα Widget εμφανίζει τον κώδικα που προσθέτει ένα εικονίδιο συνομιλίας στον ιστότοπό σας. Όταν οι επισκέπτες κάνουν κλικ στο εικονίδιο, ανοίγει ένα αναδυόμενο παράθυρο συνομιλίας.
- Κάντε κλικ στην καρτέλα Widget
- Κάντε κλικ στο Copy to clipboard (Αντιγραφή στο πρόχειρο) για να αντιγράψετε τον κώδικα
- Εντοπίστε την ενότητα
<head>του ιστοτόπου σας - Επικολλήστε τον κώδικα ως το τελευταίο στοιχείο στην ενότητα
<head> - Ανανεώστε το πρόγραμμα περιήγησής σας για να βεβαιωθείτε ότι εμφανίζεται το εικονίδιο του chatbot
Λειτουργία Iframe
Η καρτέλα Iframe εμφανίζει τον κώδικα που ενσωματώνει το chatbot απευθείας στο περιεχόμενο της σελίδας σας. Το chatbot είναι πάντα ορατό και μπορεί να περιβάλλεται από άλλα στοιχεία της σελίδας.
- Κάντε κλικ στην καρτέλα Iframe
- Κάντε κλικ στο Copy to clipboard για να αντιγράψετε τον κώδικα
- Επικολλήστε τον κώδικα σε οποιοδήποτε σημείο της HTML του ιστοτόπου σας όπου θέλετε να εμφανίζεται το chatbot
- Προσαρμόστε τα χαρακτηριστικά
widthκαιheightώστε να ταιριάζουν στη διάταξή σας
Δεν είστε σίγουροι ποιο να επιλέξετε; Διαβάστε το Ποια είναι η διαφορά μεταξύ widget και Iframe; για μια λεπτομερή σύγκριση.
Προσθήκη μέσω WordPress ή WooCommerce
Οι πλατφόρμες WordPress και WooCommerce προσφέρουν δύο μεθόδους εγκατάστασης: Plugin Installation (Εγκατάσταση πρόσθετου - συνιστάται) και Manual Installation (Μη αυτόματη εγκατάσταση).
Plugin Installation (συνιστάται)
- Κάντε κλικ στο Get the plugin on WordPress.org, έπειτα εγκαταστήστε και ενεργοποιήστε το πρόσθετο ChatLab.
- Ανοίξτε το ChatLab στο WordPress. Για ένα κατάστημα WooCommerce, διατηρήστε επιλεγμένο το WooCommerce integration για να συνδέσετε επίσης τα δεδομένα του καταστήματος.
- Κάντε κλικ στο Continue, συνδεθείτε στο ChatLab και επιλέξτε το chatbot σας.
- Ολοκληρώστε τη σύνδεση, ανοίξτε τον δημοσιευμένο ιστότοπό σας και στείλτε ένα δοκιμαστικό μήνυμα.
Manual Installation
Μεταβείτε στην καρτέλα Manual Installation και αντιγράψτε τον κώδικα του Widget στην κεφαλίδα του ιστοτόπου σας χρησιμοποιώντας ένα πρόσθετο εισαγωγής κώδικα. Για το Iframe, χρησιμοποιήστε ένα μπλοκ HTML στο περιεχόμενο της σελίδας που επιτρέπει HTML iframe. Δημοσιεύστε τη σελίδα και δοκιμάστε τη συνομιλία. Εγκαταστήστε το widget μόνο μία φορά, είτε χρησιμοποιώντας το πρόσθετο είτε με μη αυτόματο απόσπασμα κώδικα.
Για όλες τις λεπτομέρειες, δείτε το Πώς να προσθέσετε το chatbot σας σε ιστότοπο WordPress.
Προσθήκη μέσω άλλων πλατφορμών
Για τα Shopify, Wix, Webflow, PrestaShop, Abicart και CS-Cart, επιλέξτε την πλατφόρμα στον πίνακα Select Platform. Κάθε πλατφόρμα εμφανίζει:
- Τον κώδικα ενσωμάτωσης με τις επιλογές Widget και Iframe
- Οδηγίες επικόλλησης βήμα προς βήμα για τη συγκεκριμένη πλατφόρμα
- Έναν σύνδεσμο View full instructions προς τον πλήρη οδηγό της πλατφόρμας
Συμμόρφωση με τον GDPR
Εάν χρειάζεται το chatbot σας να φορτώνει μόνο μετά τη συγκατάθεση για cookies, δείτε το Ρύθμιση του ChatLab για συμμόρφωση με τον GDPR για οδηγούς ενσωμάτωσης με τα CookieBot, Usercentrics και Google Tag Manager.
Πολιτική ασφάλειας περιεχομένου (CSP)
Εάν ο ιστότοπός σας χρησιμοποιεί κεφαλίδες Content Security Policy, πρέπει να επιτρέψετε τους τομείς του ChatLab για να λειτουργήσει το chatbot. Οι απαιτούμενες οδηγίες εξαρτώνται από το αν χρησιμοποιείτε τη λειτουργία Widget ή Iframe.
Λειτουργία Widget
Το widget φορτώνει ένα script στη σελίδα σας που δημιουργεί τη διεπαφή συνομιλίας. Συγχωνεύστε τις παρακάτω πηγές προέλευσης του ChatLab στις υπάρχουσες οδηγίες CSP σας - μην αντικαταστήσετε την πολιτική για τον υπόλοιπο ιστότοπό σας:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Από προεπιλογή, το widget εισάγει ορισμένα στυλ ενσωματωμένα (inline). Η πολιτική σας πρέπει επίσης να εξουσιοδοτεί το inline script ρυθμίσεων, για παράδειγμα με ένα CSP nonce ή hash. Επιτρέψτε τις πηγές εικόνων που χρησιμοποιούνται από το bot και τις κάρτες προϊόντων σας στο img-src - ο ήχος και άλλες ενεργοποιημένες λειτουργίες ενδέχεται να απαιτούν επιπλέον πηγές προέλευσης. Για έναν τομέα εταιρείας (agency domain), χρησιμοποιήστε τους τομείς από το παραγόμενο απόσπασμα κώδικα.
CSP Safe Mode - αποφυγή του unsafe-inline
Εάν η πολιτική ασφάλειας του ιστοτόπου σας δεν επιτρέπει το 'unsafe-inline' στο style-src, μπορείτε να ενεργοποιήσετε τη λειτουργία CSP Safe Mode. Αυτό φορτώνει το φύλλο στυλ του περιέκτη του widget από ένα εξωτερικό αρχείο CSS. Δεν εξουσιοδοτεί το inline script ρυθμίσεών σας ούτε εγγυάται ότι κάθε προσαρμοσμένο στυλ και ενεργοποιημένη λειτουργία καλύπτει την πολιτική σας.
Για να το ενεργοποιήσετε, προσθέστε το window.aichatbotCspSafe = true; πριν από την ετικέτα script του ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Με ενεργοποιημένο το CSP Safe Mode, δοκιμάστε μια πολιτική φύλλων στυλ χωρίς το 'unsafe-inline'. Ένα αρχικό σημείο εκκίνησης είναι:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Λειτουργία Iframe
Η γονική σελίδα πρέπει να επιτρέπει την προέλευση στο αντιγραμμένο URL του iframe. Για την τυπική φιλοξενία του ChatLab, προσθέστε το εξής στην υπάρχουσα πολιτική:
frame-src https://api.chatlab.com;