Hoe maak je een FlowHunt AI Chatbot voor Shopify

Deze handleiding begeleidt je bij het verbinden van FlowHunt met je Shopify-winkel, het toevoegen van een vooraf gebouwde Shopify-chatbot-flow, het publiceren ervan en het embedden van de chatbot op je webshop.

Vereisten

• Een Shopify-winkel met beheerdersrechten
• Een FlowHunt-account met toegang tot een workspace: https://app.flowhunt.io/
• Belangrijk: Gebruik hetzelfde e-mailadres voor je FlowHunt-account als voor je Shopify-beheerdersaccount.

1) Integreer Shopify met FlowHunt (via Shopify App Store)

1. Open de Shopify App Store en zoek naar “FlowHunt”.
2. Klik op Installeren en selecteer indien nodig de juiste winkel.
3. Controleer de gevraagde machtigingen en klik op App installeren / Autoriseren.

Na installatie word je doorgestuurd naar Shopify en/of FlowHunt. De verbinding wordt gemaakt via het marketplace-installatieproces.

2) Installeer de FlowHunt-app op je Shopify-winkel

1. Controleer op het Shopify-autorisatiescherm de gevraagde machtigingen.
2. Klik op App installeren om de installatie te voltooien.

3) Controleer of de Shopify-integratie is ingeschakeld

Na een succesvolle installatie ga je terug naar FlowHunt → Integraties. Je zou moeten zien dat Shopify als Verbonden/Ingeschakeld is gemarkeerd.

Als het niet is ingeschakeld, klik dan opnieuw op Verbinden en volg de autorisatieprocedure.

4) Voeg een Shopify-chatbot toe uit de Flow Library

1. Ga in FlowHunt naar Flow Library.
2. Zoek naar “Shopify Chatbot”.
3. Open de template en klik op Toevoegen aan Workspace.

Hiermee wordt een kant-en-klare Shopify-chatbot-flow aan je workspace toegevoegd.

5) Pas de chatbot aan voor jouw merk

Open de zojuist toegevoegde flow en pas het volgende aan:

• Systeem prompt en toon: Stel je merkstem en richtlijnen in.
• Kennisbronnen: Koppel je productcatalogus, FAQ, beleid of andere documenten.
• Tools en acties: Schakel eventueel orderopzoeking, statuscontroles of CRM-updates in als je abonnement en instellingen dit toelaten.
• UI/branding: Stel de widgetnaam, begroetingen en zichtbare labels later in het gedeelte Chatbots in.

Klaar? Sla dan je wijzigingen op.

6) Publiceer de flow

Klik op Publiceren bij de flow zodat deze beschikbaar is voor gebruik door een chatbot op je website/winkel.

7) Maak een nieuwe Integratiecode aan (Chatbot)

1. Ga naar Chatbots in FlowHunt.
2. Klik op Nieuwe Integratiecode.
3. Selecteer de gepubliceerde flow die je hierboven hebt gemaakt.
4. Stel de widgetopties in (thema, positie, open gedrag, taal, toegestane domeinen, enz.).
5. Sla op. FlowHunt genereert een scriptfragment (jouw Integratiecode).

Bewaar dit fragment goed—je plakt het in je Shopify-thema in de volgende stap.

8) Embed de chatbot op je Shopify-winkel

Je kunt de Integratiecode op twee manieren toevoegen. Kies de optie die het beste bij je past.

Optie A — Toevoegen aan theme.liquid (sitebreed)

Met deze methode voeg je de chatbot toe aan elke pagina van je winkel. Volg deze gedetailleerde stappen:

Stap 1: Ga naar je Shopify-beheer en ga naar Online Store > Themes

Stap 2: Klik op de knop Aanpassen naast je actieve thema
Stap 3: Klik op de 3 stippen (⋯) linksboven en selecteer Code bewerken

Stap 4: Zoek je theme.liquid-bestand in de Layout-map (/layout/theme.liquid)

Stap 5: Voeg de Integratiecode toe vlak voor de afsluitende </body>-tag
Stap 6: Sla je wijzigingen op met Ctrl + S (of Cmd + S op Mac)

Na opslaan, bezoek je winkel en vernieuw de pagina. De chatbot zou op alle pagina’s moeten verschijnen.

Belangrijke opmerkingen:

• Plakken vóór </body> zorgt ervoor dat de widget op elke pagina laadt
• Houd het FlowHunt-fragment intact en ongewijzigd
• De chatbot verschijnt op alle pagina’s van je winkel

Optie B — Toevoegen via een Custom Liquid-sectie (specifieke pagina’s)

Met deze methode kun je de chatbot alleen tonen op specifieke pagina’s of sjablonen. Ideaal als je de chatbot alleen op productpagina’s of specifieke landingspagina’s wilt tonen.

Stap 1: Ga naar Online Store > Themes en klik op Aanpassen naast je actieve thema

Stap 2: Navigeer naar het specifieke sjabloon waar je de chatbot wilt toevoegen (bijv. productpagina’s, collectiepagina’s of een specifieke pagina)

Stap 3: Klik op Sectie toevoegen of Blok toevoegen (afhankelijk van je thema)
Stap 4: Zoek en selecteer Custom Liquid uit de beschikbare opties
Stap 5: Plak je FlowHunt Integratiecode in het Custom Liquid-inhoudsveld

Stap 6: Klik op Opslaan en daarna op Voorbeeld om de chatbot op dat specifieke sjabloon te testen

Belangrijke opmerkingen:

• Met deze methode heb je nauwkeurige controle over waar de chatbot verschijnt
• Je moet deze stappen herhalen voor elk sjabloon waar je de chatbot wilt hebben
• Ideaal om de chatbot eerst op specifieke pagina’s te testen voor je deze sitebreed uitrolt
• De chatbot verschijnt alleen op de sjablonen die je hebt ingesteld

Verificatie en testen

• Open je winkel in een incognito/privevenster om gecachte assets te vermijden.
• Stel veelgestelde vragen (verzending, retourneren, productbeschikbaarheid) om de flow te valideren.
• Bekijk de gesprekslogs in FlowHunt (schakel Verbose in indien nodig) om te zien welke documenten of tools zijn gebruikt.

Problemen oplossen

• Chatbot wordt niet weergegeven: Controleer of de Integratiecode op de pagina is opgenomen, je thema gepubliceerd is en het domein is toegestaan in de Chatbots-instellingen.
• Dubbele widgets: Verwijder dubbele fragmenten en houd één actieve Integratiecode.
• Ontbrekende antwoorden: Controleer de Kennisbronnen en Document Retriever-instellingen in je flow en publiceer opnieuw.
• Shopify-machtigingen fout: Verbind Shopify opnieuw onder FlowHunt → Integraties en installeer opnieuw indien gevraagd.