AcasăDocumentație

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

  1. Instalați aplicația ChatReact din Shopify App Store
  2. 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:

WidgetDescrierePlasare
Chat WidgetChatbot AI cu suport live chatLa nivelul întregului site sau pagini specifice prin App Embed
Form WidgetFormulare de contact cu protecție anti-spamInline prin App Block în Theme Editor
FAQ WidgetAfișare FAQ în stil acordeonInline 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

  1. Deschideți aplicația ChatReact în administrarea Shopify
  2. În fila Chat Widget, faceți clic pe Add Assignment
  3. Introduceți Chatbot ID (găsit în dashboard-ul ChatReact sub Settings → Embed)
  4. Faceți clic pe Save Assignment

Pasul 2: Activați App Embed

  1. Mergere la Magazin online → Teme → Editați tema
  2. Faceți clic pe pictograma App embeds (piesa de puzzle) în bara laterală din stânga-jos
  3. Comutați ChatReact Chat Widget la ON
  4. 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:

  1. Mergere la Magazin online → Teme → Editați tema
  2. Navigați la pagina unde doriți widget-ul
  3. Faceți clic pe Add block și căutați „ChatReact”
  4. Alegeți ChatReact Form sau ChatReact FAQ
  5. 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:

SetareOpțiuni
AlignmentLeft, Center, Right
Max Width200–1200px
Font Size12–28px
Margin Bottom0–120px
LanguageDetectare automată (implicit) sau una din cele 24 de limbi

Stilizare FAQ Widget

SetareOpțiuni
CategoriesSlug-uri de categorii separate prin virgulă (opțional) (de ex. general,pricing) pentru a afișa doar categoriile FAQ selectate
Font Size12–28px
Margin Bottom0–120px
LanguageDetectare automată (implicit) sau una din cele 24 de limbi

Gestionarea widget-urilor

Aplicația ChatReact din administrarea Shopify oferă trei file:

  1. Chat Widget — Creați și gestionați atribuțiile de widget care controlează ce pagini afișează widget-ul de chat
  2. Forms — Instrucțiuni pas cu pas pentru embedding, fragmentul Liquid manual și locul unde găsiți Form ID
  3. 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.


Pașii următori