Ενσωμάτωση Widget

Προσθέστε το AI chatbot σας σε οποιονδήποτε ιστότοπο σε δευτερόλεπτα με τον απλό κώδικα ενσωμάτωσης.

Γρήγορη Εκκίνηση

Προσθέστε αυτόν τον κώδικα πριν από το κλείσιμο του </body> tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Αυτό είναι! Το chatbot σας είναι τώρα ενεργό στον ιστότοπό σας.

Εύρεση του Chatbot ID

1. Μεταβείτε στις ρυθμίσεις του chatbot σας
2. Πλοηγηθείτε στην καρτέλα Embed
3. Αντιγράψτε τον κώδικα ενσωμάτωσης (περιλαμβάνει το ID σας)

Προσαρμογή του Widget

Η εμφάνιση και η συμπεριφορά του widget ρυθμίζονται από τον πίνακα ελέγχου — όχι από τον κώδικα ενσωμάτωσης. Μεταβείτε στο Dashboard → Chatbots → [your chatbot] → Widget για να προσαρμόσετε:

• Θέση — κάτω δεξιά, κάτω αριστερά, ή εντός σελίδας (inline)
• Χρώματα — κύριο, φόντο και χρώμα κειμένου, καθώς και ακτίνα περιγράμματος
• Μέγεθος — πλάτος και ύψος του widget

Για να ανοίγει η συνομιλία αυτόματα μετά από ρυθμιζόμενη καθυστέρηση, ενεργοποιήστε το Auto-Open στην καρτέλα Behavior της ίδιας σελίδας ρυθμίσεων.

Οι αλλαγές εφαρμόζονται αυτόματα στον ιστότοπό σας — δεν χρειάζεται να ενημερώσετε τον κώδικα ενσωμάτωσης. Δείτε το Widget Customization οδηγό για όλες τις διαθέσιμες επιλογές.

Η γλώσσα του widget ανιχνεύεται αυτόματα από το πρόγραμμα περιήγησης κάθε επισκέπτη, βάσει των γλωσσών που έχετε ενεργοποιήσει στην καρτέλα Languages του chatbot σας.

FAQ Widget

Εμφανίστε τις Συχνές Ερωτήσεις ως accordion σε οποιαδήποτε σελίδα:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Το FAQ widget εμφανίζει δημοσιευμένες Συχνές Ερωτήσεις από το chatbot σας. Τα χρώματα και το στυλ (κύριο, φόντο και χρώμα κειμένου, ακτίνα περιγράμματος) ρυθμίζονται στο Dashboard → FAQs → Settings.

Επιλογές FAQ Widget

Παράδειγμα Category Filter

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Βελτιστοποίηση για Κινητά

Το chat widget είναι πλήρως βελτιστοποιημένο για κινητές συσκευές:

• Διάταξη πλήρους πλάτους σε μικρές οθόνες
• Κίνηση slide-up κατά το άνοιγμα
• Διαχείριση πληκτρολογίου σε iOS (το widget προσαρμόζεται στο εικονικό πληκτρολόγιο)
• Υποστήριξη safe-area για το notch και το home indicator του iPhone
• Μεγαλύτεροι στόχοι αφής για καλύτερη χρηστικότητα
• Το μέγεθος γραμματοσειράς εισαγωγής αποτρέπει το αυτόματο zoom σε iOS

Οδηγοί για Πλατφόρμες

WordPress

Συνιστώμενο: Χρησιμοποιήστε το επίσημο ChatReact WordPress Plugin για την ευκολότερη ενσωμάτωση με Gutenberg blocks, Elementor widgets και shortcodes.

Εναλλακτική: Χειροκίνητη ενσωμάτωση μέσω plugin "Header/Footer Scripts":

1. Εγκαταστήστε οποιοδήποτε plugin "Header/Footer Scripts"
2. Προσθέστε τον κώδικα ενσωμάτωσης στην ενότητα footer
3. Αποθηκεύστε και δημοσιεύστε

Shopify

Συνιστώμενο: ChatReact Shopify App

Εγκαταστήστε την εφαρμογή ChatReact από το Shopify App Store για την ευκολότερη ενσωμάτωση:

1. Εγκαταστήστε την εφαρμογή ChatReact στο Shopify admin σας
2. Εισάγετε το Chatbot ID σας στις ρυθμίσεις της εφαρμογής
3. Το chat widget εμφανίζεται αυτόματα στο κατάστημά σας
4. Διαχειριστείτε την ανάθεση widget ανά σελίδα, ή ενεργοποιήστε το παντού

Η εφαρμογή υποστηρίζει επίσης Form και FAQ widgets ως App Blocks στον Theme Editor.

Εναλλακτική: Χειροκίνητη Ενσωμάτωση

1. Μεταβείτε σε Online Store → Themes → Edit Code
2. Ανοίξτε theme.liquid
3. Προσθέστε τον κώδικα πριν από το </body>
4. Αποθηκεύστε

Webflow

1. Μεταβείτε σε Project Settings → Custom Code
2. Προσθέστε στο Footer Code
3. Δημοσιεύστε τον ιστότοπο

Next.js / React

Χρησιμοποιήστε το Script component:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Προσθέστε στο κύριο App.vue ή στο layout σας:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Αλληλεπιδράστε με το widget προγραμματικά:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Δοκιμές

Λειτουργία Προεπισκόπησης

Πριν την ενεργή ενσωμάτωση:

1. Χρησιμοποιήστε τη λειτουργία Preview στον πίνακα ελέγχου σας
2. Δοκιμάστε διαφορετικά σενάρια
3. Επαληθεύστε ότι οι απαντήσεις είναι ακριβείς

Αντιμετώπιση Προβλημάτων

Το Widget δεν Εμφανίζεται

1. Ελέγξτε τη κονσόλα του προγράμματος περιήγησης για σφάλματα
2. Επιβεβαιώστε ότι το chatbot ID είναι σωστό
3. Βεβαιωθείτε ότι το chatbot είναι ενεργό (όχι απενεργοποιημένο)
4. Ελέγξτε αν οι ad blockers παρεμποδίζουν
5. Ελέγξτε τη χρήση του πλάνου σας — το widget παύει να λειτουργεί όταν επιτευχθεί το μηνιαίο όριο του πλάνου

Plugins Κρυφής Μνήμης & Βελτιστοποίησης

Ορισμένα plugins κρυφής μνήμης ή βελτιστοποίησης scripts επαναγράφουν URLs script, κάτι που μπορεί να σταματήσει το φόρτωμα του widget. Εάν συμβεί αυτό, προσθέστε ένα ρητό API URL στο script tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Το ίδιο attribute λειτουργεί και στα scripts των FAQ και form widgets.

Συγκρούσεις Στυλ

Αν τα CSS του ιστότοπού σας προκαλούν συγκρούσεις:

• Το widget περιορίζει τα στυλ του στο δικό του container και χρησιμοποιεί κανόνες υψηλής προτεραιότητας για να αντισταθεί σε συγκρούσεις
• Ελέγξτε τις τιμές z-index των στοιχείων που επικαλύπτουν το widget
• Αποφύγετε ευρείες !important δηλώσεις στο CSS του site που στοχεύουν γενικά στοιχεία

Απόδοση

Το widget έχει σχεδιαστεί για ελάχιστη επιβάρυνση:

• Φορτώνει ασύγχρονα — δεν μπλοκάρει ποτέ το render της σελίδας
• Ελαφρύ: περίπου 30 KB συμπιεσμένη μεταφορά

Επόμενα Βήματα

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — ενσωματώστε ανεξάρτητα φόρμες με το form widget