Integrare Shopify
Adăugați chatboți AI ChatReact, formulare de contact și acordeoane FAQ în magazinul dumneavoastră Shopify cu aplicația oficială ChatReact pentru Shopify.
Instalare
- Instalați aplicația ChatReact din Shopify App Store
- Deschideți aplicația în panoul de administrare Shopify
Nu este necesară conectarea unui cont separat — conectați aplicația la chatboții și formularele dumneavoastră lipind ID-urile acestora din dashboard-ul ChatReact.
Funcționalități
Aplicația Shopify oferă trei tipuri de widget-uri:
| Widget | Descriere | Plasare |
|---|---|---|
| Chat Widget | Chatbot AI cu suport live chat | La nivelul întregului site sau pagini specifice prin App Embed |
| Form Widget | Formulare de contact cu protecție anti-spam | Inline prin App Block în Theme Editor |
| FAQ Widget | Afișare FAQ în stil acordeon | Inline prin App Block în Theme Editor |
Configurarea Chat Widget-ului
Configurarea widget-ului de chat implică două etape: creați o atribuție de widget în aplicația ChatReact, apoi activați App Embed în tema dumneavoastră.
Pasul 1: Creați o atribuție de widget
- Deschideți aplicația ChatReact în administrarea Shopify
- În fila Chat Widget, faceți clic pe Add Assignment
- Introduceți Chatbot ID (găsit în dashboard-ul ChatReact sub Settings → Embed)
- Faceți clic pe Save Assignment
Pasul 2: Activați App Embed
- Mergere la Magazin online → Teme → Editați tema
- Faceți clic pe pictograma App embeds (piesa de puzzle) în bara laterală din stânga-jos
- Comutați ChatReact Chat Widget la ON
- Faceți clic pe Save
Trebuie să activați App Embed o singură dată. După aceea, gestionați complet locurile în care apare widget-ul din aplicația ChatReact.
Widget-ul de chat apare pe fiecare pagină acoperită de una dintre atribuțiile dumneavoastră de widget.
Atribuții de widget
Fiecare atribuție leagă un chatbot de vitrina dumneavoastră. Există două tipuri de atribuții:
- Everywhere: Widget-ul apare pe toate paginile (implicit). Opțional, puteți adăuga Exclude URLs — o cale pe linie, cu suport pentru wildcard
*(de ex./blogs/*) - Specific Page: Widget-ul apare doar pe calea paginii pe care o introduceți (de ex.
/pages/about)
Dacă o pagină are propria atribuție Specific Page, acel chatbot este afișat acolo în locul chatbot-ului Everywhere.
Adăugarea widget-urilor Form și FAQ
Widget-urile Form și FAQ se adaugă ca App Blocks în Theme Editor:
- Mergere la Magazin online → Teme → Editați tema
- Navigați la pagina unde doriți widget-ul
- Faceți clic pe Add block și căutați „ChatReact”
- Alegeți ChatReact Form sau ChatReact FAQ
- Introduceți Form ID sau Chatbot ID în setările blocului
Embed manual (Liquid)
Dacă preferați să editați șabloanele direct, puteți de asemenea adăuga widget-urile în orice șablon Liquid:
<!-- 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>
Stilizare Form Widget
Personalizați aspectul formularului în Theme Editor:
| Setare | Opțiuni |
|---|---|
| Alignment | Left, Center, Right |
| Max Width | 200–1200px |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Detectare automată (implicit) sau una din cele 24 de limbi |
Stilizare FAQ Widget
| Setare | Opțiuni |
|---|---|
| Categories | Slug-uri de categorii separate prin virgulă (opțional) (de ex. general,pricing) pentru a afișa doar categoriile FAQ selectate |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Detectare automată (implicit) sau una din cele 24 de limbi |
Gestionarea widget-urilor
Aplicația ChatReact din administrarea Shopify oferă trei file:
- Chat Widget — Creați și gestionați atribuțiile de widget care controlează ce pagini afișează widget-ul de chat
- Forms — Instrucțiuni pas cu pas pentru embedding, fragmentul Liquid manual și locul unde găsiți Form ID
- FAQ Widget — Instrucțiuni de embedding pentru widget-ul FAQ și locul unde găsiți Chatbot ID
Selectarea Form și FAQ se face în Theme Editor: introduceți Form ID sau Chatbot ID în setările blocului.
Suport lingvistic
Aplicația suportă toate cele 24 de limbi UE:
- Chat widget detectează automat limba browser-ului fiecărui vizitator și o potrivește cu limbile suportate de chatbot, revenind la limba principală a chatbot-ului dacă nu există potrivire
- Blocurile Form și FAQ au fiecare propria setare Language în Theme Editor — implicit este Auto-detect și poate fi suprascrisă pe bloc
Dezinstalare
Când dezinstalați aplicația ChatReact, toate configurațiile de widget și datele stocate sunt curățate automat din magazinul dumneavoastră Shopify.