Ενσωμάτωση Shopify

Προσθέστε τα AI chatbots, τις φόρμες επικοινωνίας και τα FAQ accordions του ChatReact στο κατάστημά σας στο Shopify με την επίσημη εφαρμογή ChatReact για Shopify.

Εγκατάσταση

Εγκαταστήστε την εφαρμογή ChatReact από το Shopify App Store
Ανοίξτε την εφαρμογή στο πάνελ διαχείρισης του Shopify

Δεν χρειάζεται ξεχωριστή σύνδεση λογαριασμού — συνδέετε την εφαρμογή με τα chatbots και τις φόρμες σας επικολλώντας τα IDs τους από τον πίνακα ελέγχου του ChatReact.

Χαρακτηριστικά

Η εφαρμογή για Shopify παρέχει τρεις τύπους widget:

Widget	Περιγραφή	Τοποθέτηση
Chat Widget	AI chatbot με υποστήριξη live chat	Σε όλο το site ή σε συγκεκριμένες σελίδες μέσω App Embed
Form Widget	Φόρμες επικοινωνίας με προστασία από spam	Ενσωμάτωση inline μέσω App Block στον Theme Editor
FAQ Widget	Εμφάνιση FAQ σε στυλ accordion	Ενσωμάτωση inline μέσω App Block στον Theme Editor

Ρύθμιση του Chat Widget

Η ρύθμιση του chat widget απαιτεί δύο βήματα: δημιουργήστε μια ανάθεση widget στην εφαρμογή ChatReact και μετά ενεργοποιήστε το App Embed στο θέμα σας.

Βήμα 1: Δημιουργία Ανάθεσης Widget

Ανοίξτε την εφαρμογή ChatReact στο διαχειριστικό του Shopify
Στην καρτέλα Chat Widget, κάντε κλικ στο Add Assignment
Εισάγετε το Chatbot ID σας (βρίσκεται στον πίνακα ελέγχου του ChatReact υπό Settings → Embed)
Κάντε κλικ στο Save Assignment

Βήμα 2: Ενεργοποίηση App Embed

Μεταβείτε στο Online Store → Themes → Edit theme
Κάντε κλικ στο εικονίδιο App embeds (κομμάτι παζλ) στη κάτω-αριστερή πλαϊνή μπάρα
Ενεργοποιήστε το ChatReact Chat Widget σε ON
Κάντε κλικ στο Save

Χρειάζεται να ενεργοποιήσετε το App Embed μόνο μία φορά. Μετά από αυτό, διαχειρίζεστε πλήρως από την εφαρμογή ChatReact πού εμφανίζεται το widget.

Το chat widget εμφανίζεται σε κάθε σελίδα που καλύπτεται από μία από τις αναθέσεις widget σας.

Αναθέσεις Widget

Κάθε ανάθεση συνδέει ένα chatbot με το κατάστημά σας. Υπάρχουν δύο τύποι αναθέσεων:

Everywhere: Το widget εμφανίζεται σε όλες τις σελίδες (προεπιλογή). Μπορείτε προαιρετικά να προσθέσετε Exclude URLs — ένα μονοπάτι ανά γραμμή, με υποστήριξη wildcards * (π.χ. /blogs/*)
Specific Page: Το widget εμφανίζεται μόνο στη συγκεκριμένη διαδρομή σελίδας που εισάγετε (π.χ. /pages/about)

Εάν μια σελίδα έχει τη δική της ανάθεση Specific Page, τότε εκεί εμφανίζεται το αντίστοιχο chatbot αντί για το Everywhere chatbot.

Προσθήκη Form και FAQ Widgets

Τα Form και FAQ widgets προστίθενται ως App Blocks στον Theme Editor:

Μεταβείτε στο Online Store → Themes → Edit theme
Πλοηγηθείτε στη σελίδα όπου θέλετε το widget
Κάντε κλικ στο Add block και αναζητήστε "ChatReact"
Επιλέξτε ChatReact Form ή ChatReact FAQ
Εισάγετε το Form ID ή το Chatbot ID στις ρυθμίσεις του block

Εγκατάσταση με μη αυτόματο τρόπο (Liquid)

Εάν προτιμάτε να επεξεργαστείτε απευθείας τα πρότυπα, μπορείτε επίσης να προσθέσετε τα widgets σε οποιοδήποτε Liquid template:

<!-- Form widget -->
<div id="chatreact-form"></div>
<script src="https://www.chatreact.ai/embed/form.js"
  data-form-id="YOUR_FORM_ID"
  data-container="chatreact-form"
  async></script>

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

Στυλιζάρισμα Form Widget

Προσαρμόστε την εμφάνιση της φόρμας στον Theme Editor:

Setting	Options
Alignment	Left, Center, Right
Max Width	200–1200px
Font Size	12–28px
Margin Bottom	0–120px
Language	Auto-detect (default) or one of 24 languages

Στυλιζάρισμα FAQ Widget

Setting	Options
Categories	Προαιρετικά comma-separated category slugs (π.χ. `general,pricing`) για εμφάνιση μόνο επιλεγμένων κατηγοριών FAQ
Font Size	12–28px
Margin Bottom	0–120px
Language	Auto-detect (default) or one of 24 languages

Διαχείριση Widgets

Η εφαρμογή ChatReact στο διαχειριστικό του Shopify παρέχει τρεις καρτέλες:

Chat Widget — Δημιουργία και διαχείριση των αναθέσεων widget που ελέγχουν σε ποιες σελίδες εμφανίζεται το chat widget
Forms — Οδηγίες βήμα-βήμα για ενσωμάτωση, το μη αυτόματο snippet Liquid και πού να βρείτε το Form ID σας
FAQ Widget — Οδηγίες ενσωμάτωσης για το FAQ widget και πού να βρείτε το Chatbot ID σας

Η επιλογή της φόρμας και των FAQ γίνεται στον Theme Editor: εισάγετε το Form ID ή το Chatbot ID στις ρυθμίσεις του block.

Υποστήριξη Γλωσσών

Η εφαρμογή υποστηρίζει και τις 24 γλώσσες της ΕΕ:

Το chat widget ανιχνεύει αυτόματα τη γλώσσα του προγράμματος περιήγησης κάθε επισκέπτη και τη συγκρίνει με τις υποστηριζόμενες γλώσσες του chatbot, επιστρέφοντας στην κύρια γλώσσα του chatbot εάν χρειάζεται
Τα Form και FAQ blocks έχουν τη δική τους ρύθμιση Language στον Theme Editor — η προεπιλογή είναι Auto-detect και μπορεί να παρακαμφθεί ανά block

Απεγκατάσταση

Όταν απεγκαθιστάτε την εφαρμογή ChatReact, όλες οι διαμορφώσεις widget και τα αποθηκευμένα δεδομένα καθαρίζονται αυτόματα από το κατάστημά σας στο Shopify.