Ενσωμάτωση Widget

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

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

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

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

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

Εύρεση του ID του chatbot σας

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

Ή βρείτε το ID στο URL του dashboard σας: /dashboard/company/chatbots/[CHATBOT_ID]

Επιλογές Widget

Προσαρμόστε το Widget με data attributes:

Βασικές Επιλογές

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

Παράκαμψη Χρωμάτων

Παράκαμψη ρυθμίσεων πίνακα ελέγχου με ενσωματωμένα χρώματα:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Εμφάνιση των FAQs ως accordion σε οποιαδήποτε σελίδα:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Το widget Συχνές Ερωτήσεις εμφανίζει τις δημοσιευμένες Συχνές Ερωτήσεις από το chatbot σας.

Επιλογές FAQ Widget

Παράδειγμα Φίλτρου Κατηγοριών

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

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

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

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

Οδηγοί ανά Πλατφόρμα

WordPress

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

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

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

Shopify

Προτεινόμενο: ChatReact Shopify App

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

1. Εγκαταστήστε την εφαρμογή ChatReact στο Shopify admin σας
2. Εισάγετε το Chatbot ID σας στις ρυθμίσεις της εφαρμογής
3. Το 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

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

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();

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Δοκιμές

Λειτουργία Preview

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

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

Local Development

Για τοπικές δοκιμές, χρησιμοποιήστε URLs localhost:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Troubleshooting

Widget Not Appearing

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

Styling Conflicts

Εάν το CSS του site σας συγκρούεται:

• Το Widget χρησιμοποιεί shadow DOM για απομόνωση
• Ελέγξτε τις τιμές z-index
• Βεβαιωθείτε ότι δεν υπάρχουν υπερκαταχωρήσεις !important

Performance

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

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Next Steps

• WordPress Plugin →
• Shopify Integration →
• FAQ Management →