Κέντρο βοήθειας
Προσθήκη chatbot στον ιστότοπο

Προσθήκη chatbot στον ιστότοπό σας

Τελευταία ενημέρωση:

Η προσθήκη του ChatLab στον ιστότοπό σας επιτρέπει στους επισκέπτες να αλληλεπιδρούν με το AI chatbot σας απευθείας στη σελίδα σας. Αυτός ο οδηγός εξηγεί πώς να λάβετε τον κώδικα ενσωμάτωσης (embed code) και να τον προσθέσετε στον ιστότοπό σας.

Άνοιγμα της καρτέλας Deploy

Επιλέξτε το chatbot σας από τον κεντρικό πίνακα ελέγχου και, στη συνέχεια, κάντε κλικ στην καρτέλα Deploy (Δημοσίευση).

Επισημασμένη καρτέλα Deploy

Επιλογή της πλατφόρμας σας

Ο πίνακας Select Platform (Επιλογή πλατφόρμας) στα δεξιά εμφανίζει όλες τις υποστηριζόμενες πλατφόρμες. Κάντε κλικ στην πλατφόρμα που αντιστοιχεί στον ιστότοπό σας για να δείτε προσαρμοσμένες οδηγίες εγκατάστασης.

Επισημασμένος πίνακας Select Platform

Υποστηριζόμενες πλατφόρμες:

  • HTML Code - λειτουργεί με οποιονδήποτε ιστότοπο όπου μπορείτε να επεξεργαστείτε τον κώδικα HTML
  • WordPress - μέσω του επίσημου προσθέτου ChatLab ή με μη αυτόματη εισαγωγή κώδικα
  • Wix - μέσω του Settings > Advanced > Custom Code
  • Webflow - μέσω του Site Settings > Custom Code (απαιτείται πρόγραμμα Webflow επί πληρωμή)
  • PrestaShop - μέσω του αρθρώματος ChatLab για PrestaShop ή με μη αυτόματη εισαγωγή κώδικα
  • Shopify - μέσω του αρχείου theme.liquid
  • WooCommerce - μέσω του προσθέτου WordPress ή με μη αυτόματη εισαγωγή κώδικα
  • Abicart - μέσω του Store design > Themes > Site header
  • CS-Cart - μέσω του Design > Layouts > Custom HTML code

Κάθε πλατφόρμα εμφανίζει οδηγίες βήμα προς βήμα ειδικά για τη συγκεκριμένη ενοποίηση. Για πλατφόρμες με ειδικά άρθρα βοήθειας, εμφανίζεται ο σύνδεσμος View full instructions (Προβολή πλήρων οδηγιών) στο κάτω μέρος.

Προσθήκη μέσω HTML Code

Η επιλογή HTML Code λειτουργεί με οποιονδήποτε ιστότοπο όπου έχετε πρόσβαση στον πηγαίο κώδικα. Θα δείτε δύο επιλογές ενσωμάτωσης: Widget και Iframe.

Λειτουργία Widget

Η καρτέλα Widget εμφανίζει τον κώδικα που προσθέτει ένα εικονίδιο συνομιλίας στον ιστότοπό σας. Όταν οι επισκέπτες κάνουν κλικ στο εικονίδιο, ανοίγει ένα αναδυόμενο παράθυρο συνομιλίας.

Επισημασμένη καρτέλα Widget

  1. Κάντε κλικ στην καρτέλα Widget
  2. Κάντε κλικ στο Copy to clipboard (Αντιγραφή στο πρόχειρο) για να αντιγράψετε τον κώδικα
  3. Εντοπίστε την ενότητα <head> του ιστοτόπου σας
  4. Επικολλήστε τον κώδικα ως το τελευταίο στοιχείο στην ενότητα <head>
  5. Ανανεώστε το πρόγραμμα περιήγησής σας για να βεβαιωθείτε ότι εμφανίζεται το εικονίδιο του chatbot

Λειτουργία Iframe

Η καρτέλα Iframe εμφανίζει τον κώδικα που ενσωματώνει το chatbot απευθείας μέσα στο περιεχόμενο της σελίδας σας. Το chatbot είναι πάντα ορατό και μπορεί να περιβάλλεται από άλλα στοιχεία της σελίδας.

Επισημασμένη καρτέλα Iframe

  1. Κάντε κλικ στην καρτέλα Iframe
  2. Κάντε κλικ στο Copy to clipboard για να αντιγράψετε τον κώδικα
  3. Επικολλήστε τον κώδικα σε οποιοδήποτε σημείο του HTML του ιστοτόπου σας όπου θέλετε να εμφανίζεται το chatbot
  4. Προσαρμόστε τα χαρακτηριστικά width και height ώστε να ταιριάζουν στη διάταξή σας

Δεν είστε σίγουροι ποια επιλογή να διαλέξετε; Διαβάστε το Ποια είναι η διαφορά μεταξύ widget και Iframe; για μια λεπτομερή σύγκριση.

Προσθήκη μέσω WordPress ή WooCommerce

Οι πλατφόρμες WordPress και WooCommerce προσφέρουν δύο μεθόδους εγκατάστασης: Plugin Installation (Εγκατάσταση μέσω προσθέτου - συνιστάται) και Manual Installation (Μη αυτόματη εγκατάσταση).

Πλατφόρμα WordPress με την καρτέλα Plugin Installation

Plugin Installation (συνιστάται)

  1. Κάντε κλικ στο Get WordPress Plugin (Λήψη προσθέτου WordPress) για να ανοίξετε το ευρετήριο προσθέτων του WordPress
  2. Εγκαταστήστε και ενεργοποιήστε το πρόσθετο «ChatLab - AI Chatbot»
  3. Μεταβείτε στη σελίδα ρυθμίσεων του προσθέτου στη διαχείριση του WordPress
  4. Αντιγράψτε το Bot ID σας από το ChatLab χρησιμοποιώντας το κουμπί Copy
  5. Επικολλήστε το Bot ID στις ρυθμίσεις του προσθέτου και αποθηκεύστε
  6. Βεβαιωθείτε ότι το chatbot εμφανίζεται στον ιστότοπό σας

Manual Installation

Μεταβείτε στην καρτέλα Manual Installation για εγκατάσταση μέσω κώδικα:

  1. Εγκαταστήστε το πρόσθετο «Insert Headers and Footers» στο WordPress
  2. Μεταβείτε στο Settings > Insert Headers and Footers
  3. Αντιγράψτε τον κώδικα από το ChatLab και επικολλήστε τον στην ενότητα Header
  4. Αποθηκεύστε και ανανεώστε τον ιστότοπό σας

Για πλήρεις λεπτομέρειες, ανατρέξτε στο Πώς να προσθέσετε το chatbot σας σε ιστότοπο WordPress.

Προσθήκη μέσω άλλων πλατφορμών

Για τα Shopify, Wix, Webflow, PrestaShop, Abicart και CS-Cart, επιλέξτε την πλατφόρμα στον πίνακα Select Platform. Κάθε πλατφόρμα εμφανίζει:

  1. Τον κώδικα ενσωμάτωσης με τις επιλογές Widget και Iframe
  2. Οδηγίες επικόλλησης βήμα προς βήμα, ειδικά για τη συγκεκριμένη πλατφόρμα
  3. Έναν σύνδεσμο View full instructions προς τον πλήρη οδηγό της πλατφόρμας

Πλατφόρμα Shopify με οδηγίες βήμα προς βήμα

Συμμόρφωση με τον GDPR

Εάν χρειάζεστε το chatbot να φορτώνει μόνο αφού δοθεί η συγκατάθεση για cookies, ανατρέξτε στο Ρύθμιση του ChatLab για συμμόρφωση με τον GDPR για οδηγούς ενοποίησης που καλύπτουν τα CookieBot, Usercentrics και Google Tag Manager.

Content Security Policy (CSP)

Εάν ο ιστότοπός σας χρησιμοποιεί κεφαλίδες Content Security Policy, πρέπει να επιτρέψετε τους τομείς (domains) του ChatLab για να λειτουργήσει το chatbot. Οι απαιτούμενες οδηγίες εξαρτώνται από το αν χρησιμοποιείτε τη λειτουργία Widget ή Iframe.

Λειτουργία Widget

Το widget φορτώνει ένα script στη σελίδα σας το οποίο δημιουργεί τη διεπαφή συνομιλίας. Προσθέστε αυτές τις οδηγίες στην κεφαλίδα 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), επομένως το 'unsafe-inline' είναι απαραίτητο στο style-src.

CSP Safe Mode - αποφυγή του unsafe-inline

Εάν η πολιτική ασφαλείας του ιστοτόπου σας δεν επιτρέπει το 'unsafe-inline' στο style-src, μπορείτε να ενεργοποιήσετε το CSP Safe Mode. Αυτό κάνει το widget να φορτώνει όλα τα στυλ από εξωτερικά αρχεία CSS αντί να τα εισάγει inline.

Για να το ενεργοποιήσετε, προσθέστε το 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' και η κεφαλίδα CSP σας μπορεί να χρησιμοποιεί τα εξής:

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

Το iframe φορτώνει ολόκληρο το chatbot από μία μόνο διεύθυνση URL, επομένως απαιτείται μόνο μία οδηγία:

frame-src https://api.chatlab.com;
Αναζήτηση σε όλα τα άρθραΡωτήστε τον ψηφιακό βοηθό