Shopify-integratie

Voeg ChatReact AI-chatbots, contactformulieren en FAQ-accordions toe aan uw Shopify-winkel met de officiële ChatReact Shopify-app.

Installatie

1. Installeer de ChatReact-app vanuit de Shopify App Store
2. Open de app in uw Shopify-beheerconsole

Er is geen afzonderlijke accountkoppeling nodig — u koppelt de app aan uw chatbots en formulieren door hun ID's uit het ChatReact-dashboard te plakken.

Functies

De Shopify-app biedt drie widgettypes:

Het chatwidget instellen

Het instellen van het chatwidget gebeurt in twee stappen: maak een widgettoewijzing in de ChatReact-app en schakel vervolgens de App Embed in uw thema in.

Stap 1: Maak een widgettoewijzing

1. Open de ChatReact-app in uw Shopify-beheer
2. Klik op het tabblad Chat Widget en vervolgens op Add Assignment
3. Voer uw Chatbot ID in (te vinden in het ChatReact-dashboard onder Settings → Embed)
4. Klik op Save Assignment

Stap 2: Schakel de App Embed in

1. Ga naar Online Store → Themes → Edit theme
2. Klik op het pictogram App embeds (puzzelstuk) in de linkeronderzijbalk
3. Zet ChatReact Chat Widget op ON
4. Klik op Save

Het chatwidget verschijnt op elke pagina die onder een van uw widgettoewijzingen valt.

Widgettoewijzingen

Elke toewijzing koppelt een chatbot aan uw winkelomgeving. Er zijn twee toewijzingstypes:

• Everywhere: Widget verschijnt op alle pagina's (standaard). U kunt optioneel Exclude URLs toevoegen — één pad per regel, met *-wildcards ondersteund (bijv. /blogs/*)
• Specific Page: Widget verschijnt alleen op het paginapad dat u invoert (bijv. /pages/about)

Als een pagina een eigen Specific Page-toewijzing heeft, wordt daar die chatbot weergegeven in plaats van de Everywhere-chatbot.

Form- en FAQ-widgets toevoegen

Form- en FAQ-widgets worden toegevoegd als App Blocks in de Theme Editor:

1. Ga naar Online Store → Themes → Edit theme
2. Navigeer naar de pagina waar u de widget wilt plaatsen
3. Klik op Add block en zoek naar "ChatReact"
4. Kies ChatReact Form of ChatReact FAQ
5. Voer de Form ID of Chatbot ID in de block-instellingen in

Handmatige embed (Liquid)

Als u de voorkeur geeft aan het rechtstreeks bewerken van templates, kunt u de widgets ook aan elk Liquid-template toevoegen:

<!-- 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>

Styling van het Form Widget

Pas het uiterlijk van het formulier aan in de Theme Editor:

Styling van het FAQ Widget

Widgets beheren

De ChatReact-app in uw Shopify-beheer biedt drie tabbladen:

1. Chat Widget — Maak en beheer de widgettoewijzingen die bepalen op welke pagina's het chatwidget wordt weergegeven
2. Forms — Stapsgewijze instructies voor embedding, de handmatige Liquid-snippet en waar u uw Form ID vindt
3. FAQ Widget — Instructies voor het embedden van het FAQ-widget en waar u uw Chatbot ID vindt

Form- en FAQ-selectie gebeurt in de Theme Editor: voer de Form ID of Chatbot ID in de block-instellingen in.

Taalondersteuning

De app ondersteunt alle 24 EU-talen:

• Het chatwidget detecteert automatisch de browsertaal van elke bezoeker en vergelijkt deze met de door uw chatbot ondersteunde talen, met terugval op de primaire taal van de chatbot
• De Form- en FAQ-blocks hebben elk hun eigen Language-instelling in de Theme Editor — deze staat standaard op Auto-detect en kan per block worden overschreven

Verwijderen van de app

Wanneer u de ChatReact-app verwijdert, worden alle widgetconfiguraties en opgeslagen gegevens automatisch uit uw Shopify-winkel verwijderd.

Volgende stappen

• Widget Embedding →
• FAQ Management →
• Form Configuration →