Integratie met Shopify

Verbind je ChatLab-chatbot met je Shopify-winkel om klanten direct in de chat realtime toegang te geven tot productinformatie en het volgen van bestellingen.

Belangrijk: Best practices voor E-Commerce

Lees na het voltooien van de onderstaande integratie de uitgebreide handleiding over het optimaliseren van je chatbot voor e-commerce: Hoe je ChatLab instelt voor je e-commercewinkel

Wat de integratie biedt

Product Search - Klanten kunnen je Shopify-catalogus doorzoeken door een zoekterm in te voeren. De chatbot doorzoekt producttitels, beschrijvingen, types, tags en leveranciers en toont overeenkomende actieve producten met:

• Productnaam, beschrijving en type
• Leverancier en tags
• Prijs of prijsbereik (voor producten met meerdere varianten)
• Beschikbare varianten met SKU, van-prijs (compare-at price), voorraadhoeveelheid en beschikbaarheidsstatus
• Productafbeelding en een directe link naar je winkel

Je kunt het zoeken naar producten zo instellen dat alleen producten op voorraad worden getoond. Indien ingeschakeld, worden artikelen die niet op voorraad zijn uitgesloten van de resultaten. Met een extra optie kun je producten opnemen die beschikbaar zijn voor pre-order, zelfs wanneer het filter voor voorraad actief is. Zie Stap 4 voor meer details.

Order Details - Klanten kunnen de bestelstatus controleren door hun bestelnummer en e-mailadres op te geven. Beide waarden worden gecontroleerd aan de hand van de gegevens in je Shopify-winkel. De chatbot toont:

• Bestelnummer, datum, totaalbedrag en valuta
• Bestelde artikelen met namen, aantallen, prijzen, SKU, varianttitel en leverancier
• Fulfillmentstatus en trackinginformatie (nummer, vervoerder, URL)
• Verzendadres en factuuradres
• Verzendmethode en kosten
• Contactgegevens van de klant (e-mailadres, naam, telefoonnummer)
• Reden en datum van annulering (voor geannuleerde bestellingen)

Stap 1: Shopify API-inloggegevens aanmaken

Belangrijk voor bureaus en Shopify-partners: De Shopify-app MOET worden aangemaakt in het Dev Dashboard van de organisatie die eigenaar is van de winkel - begin altijd vanuit het beheerpaneel van de winkel zelf (Settings > Apps > Develop apps > Build apps in Dev Dashboard; Instellingen > Apps > Apps ontwikkelen > Apps bouwen in Dev Dashboard). Een app die is gemaakt door een andere organisatie (bijvoorbeeld een bureau of Shopify-partner die in hun eigen Dev Dashboard werkt) en via een aangepaste installatielink in de winkel is geïnstalleerd, werkt NIET met ChatLab, ook al slaagt de installatie en verschijnt de app tussen de geïnstalleerde apps van de winkel met de juiste rechten. De reden hiervoor: ChatLab maakt verbinding via het Client ID en Secret (Shopify's client credentials grant), en Shopify staat deze toekenning alleen toe voor apps die zijn ontwikkeld door de organisatie die eigenaar is van de winkel - "Client credentials is only available for apps developed by your own organization and installed in stores that you own" (Shopify-documentatie). Dit is een beperking van Shopify, niet van ChatLab. Het symptoom is een verbindingsfout in ChatLab met het bericht "The app cannot access this store. Create the app in the Dev Dashboard of the organization that owns this store" (veroorzaakt door Shopify's shop_not_permitted OAuth-fout), zelfs wanneer het Client ID, het Secret en het winkelsubdomein allemaal juist zijn en de app is geïnstalleerd. Een duidelijk herkenningspunt van een app van een andere organisatie: het winkelbeheerpaneel toont "This custom app was built by a Shopify partner for your store." De oplossing voor bureaus: je hebt hiervoor de ontwikkelaar van de merchant niet nodig - vraag de merchant om jouw gebruiker toe te voegen aan HUN organisatie met de rol App developer ("To give a user in a merchant store access to the Dev Dashboard, assign them the App developer role" - Shopify-documentatie), en maak de app vervolgens aan terwijl je in de organisatie van de merchant werkt. Alleen toegang als Collaborator is niet voldoende - apps die zijn gemaakt terwijl je in je eigen organisatie werkt, blijven in jouw organisatie staan.

1. Log in op je Shopify-beheerpaneel
2. Ga naar Settings > Apps (Instellingen > Apps)
3. Klik op Develop apps (Apps ontwikkelen)
4. Klik op de pagina App Development op Build apps in Dev Dashboard (Apps bouwen in Dev Dashboard) - dit opent dev.shopify.com/dashboard
5. Klik op Create app (App maken) en voer een naam in (bijv. "ChatLab Integration")

6. Zodra de app is aangemaakt, scrol je naar het gedeelte Access (Toegang) en klik je op Select scopes (Bereiken selecteren)

7. Zoek en activeer onder de Admin API-toegangsbereiken de volgende machtigingen:
   • read_products
   • read_orders
8. Klik op Done (Gereed)

9. Klik op de knop Release (Vrijgeven) om je app vrij te geven
10. Ga naar App settings (App-instellingen) en kopieer het Client ID en het Secret - bewaar deze op een veilige plek, je hebt ze nodig om verbinding te maken met ChatLab

11. Ga naar het gedeelte Home (Start) en klik om de applicatie in je winkel te installeren

12. Selecteer je winkel en bevestig door op Install (Installeren) te klikken

Stap 2: Je winkelsubdomein vinden

Je subdomein is het deel vóór .myshopify.com in je Shopify-beheer-URL. Als je beheer-URL bijvoorbeeld https://pizza-delicious.myshopify.com/admin is, dan is je subdomein pizza-delicious.

Stap 3: Shopify verbinden in ChatLab

1. Log in op ChatLab en selecteer je bot
2. Ga naar het tabblad Connect (Verbinden)

3. Klik op Connect (Verbinden) op de Shopify-tegel
4. Voer je Client ID in (uit Stap 1)
5. Voer je Secret in (uit Stap 1)
6. Voer je Shopify subdomain in (uit Stap 2)

7. Klik op Connect (Verbinden)

ChatLab test de verbinding automatisch door te controleren of je API-inloggegevens over de vereiste toegangsbereiken beschikken. Als dit slaagt, zie je een bevestigingsbericht.

Stap 4: Shopify Actions configureren

Na het verbinden kun je afzonderlijke AI-acties inschakelen en aanpassen. Navigeer naar Settings > Actions (Instellingen > Acties) en filter op het Shopify-platform.

Er zijn twee acties beschikbaar:

• Shopify - product search - stelt de chatbot in staat om je productcatalogus te doorzoeken
• Shopify - order details - stelt de chatbot in staat om bestelinformatie op te zoeken

Klik op de activeringsknop bij elke actie om deze in te schakelen. Je kunt ook het actielabel aanpassen (het bericht dat aan gebruikers wordt getoond terwijl de actie wordt uitgevoerd) en de instructies waarmee de AI wordt aangestuurd bij het gebruik van elke actie.

Product Search - Voorraadinstellingen

De actie voor het zoeken naar producten bevat opties voor het filteren van de voorraad op het tabblad Product Search Settings (Instellingen voor product zoeken):

• Products in stock only (Alleen producten op voorraad) - Indien ingeschakeld, toont de chatbot alleen producten die momenteel op voorraad zijn. Producten die niet op voorraad zijn, worden uitgesloten van de zoekresultaten.
• Show products available for pre-order (Producten tonen die beschikbaar zijn voor pre-order) - Deze optie verschijnt wanneer "Products in stock only" is ingeschakeld. Indien actief, worden producten die niet op voorraad zijn, maar in Shopify zijn ingesteld om te blijven verkopen (pre-order), nog steeds in de zoekresultaten weergegeven, gemarkeerd als beschikbaar voor pre-order.

Je integratie testen

Open na het activeren van de acties je chatbot-widget en probeer:

• "Laat me hardloopschoenen zien" (test het zoeken naar producten)
• "Wat is de status van mijn bestelling #1001?" (test de bestelgegevens)

Controleer of de antwoorden overeenkomen met de gegevens uit je Shopify-winkel en of de productlinks correct openen.

Chatbot installeren op je Shopify-winkel

Om de chatwidget aan je Shopify-webshop toe te voegen:

1. Ga in ChatLab naar het tabblad Deploy (Publiceren) voor je bot
2. Selecteer het platformtabblad Shopify
3. Kopieer het codefragment
4. Ga in je Shopify-beheerpaneel naar Online Store > Themes (Webshop > Thema's)
5. Klik op het menu met de drie puntjes bij je actieve thema en selecteer Edit code (Code bewerken)
6. Open het bestand theme.liquid onder Layout
7. Plak het codefragment binnen het <head>-gedeelte
8. Klik op Save (Opslaan)

Tot slot - je moet de AI Actions inschakelen die beschikbaar zijn voor Shopify - Order details en Product Search.