> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🔗 PopUps integreren via Webhooks

> ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Webhooks kunt u verzenden popup indiening gegevens naar een externe URL in real time. Dit is perfect voor het verbinden Hoppy PopUps met aangepaste systemen, CRM's, notificatiediensten of een platform dat HTTP-verzoeken accepteert.

Elke keer als een bezoeker een popup formulier indient, stuurt de app een JSON payload naar uw geconfigureerde webhook endpoint direct en automatisch.

---

# **⚠️ Voordat u begint**

Voor het opzetten van webhooks, zorg ervoor:

*   De **Hoppy PopUps** app is geïnstalleerd op uw Shopify opslag
*   Je hebt een **webhook-URL** klaar om gegevens te ontvangen (van uw ontwikkelaar, CRM of service van derden)

Er zijn geen API-sleutels of externe accounts nodig binnen de app, alleen een geldig HTTPS-eindpunt.

---

# **🛠️ Stap 1 Open de sectie Integraties**

Open de **Hoppy PopUps** app van uw Shopify Admin.

Dan:

→ Klik op de **Integraties** tabblad uit het linker navigatiemenu

Zoek de **Webhook-integratie** kaart.

Als de kaart nog niet is aangesloten, wordt het volgende weergegeven:

→ **Niet verbonden**

---

# **🔗 Stap 2**

In de Webhook integratiekaart:

→ Klik **Webhaak verbinden**

Voer uw webhook eindpunt URL in het opgegeven veld.

### **Voorbeeld**

`https://your-crm.com/api/popup-submissions`

Dan:

→ Klik **Opslaan & verbinden**

De app zal de webhook als verbonden markeren. De status-badge verandert in:

→ ✅ **Verbonden**

---

# **📋 Stap 3 Begrijp de payload**

Bij elke popup-inzending stuurt de app een **POST** verzoek aan uw webhook URL met de volgende JSON payload:

`{`  
`"email": "user@example.com",`  
`"phone": "+1234567890",`  
`"EmailCollectionName": "My Popup Name",`  
`"country": "United States",`  
`"time": "14:30",`  
`"date": "2025-01-15",`  
`"isReturningCustomer": false`  
`}`

### **Veldbeschrijvingen**

Veld

Omschrijving

**e-mail**

Het e-mailadres van de bezoeker

**telefoon**

Het ingediende telefoonnummer (indien verzameld)

**E-mailCollectionName**

De interne naam van de popup die de inzending ontving

**land**

Het land gedetecteerd van de bezoeker locatie

**tijd**

De lokale tijd van de indiening

**datum**

Datum van indiening

**isReturning Klant**

`true` indien de bezoeker eerder heeft ingediend; `false` indien nieuw

Het verzoek wordt verzonden met `Content-Type: application/json` en bevat een 5-seconde timeout.

---

# **⚙️ Stap 4: Hoe de Webhaak zich gedraagt**

*   **Vuurt op elke onderwerping** Ongeacht het type popup of de inhoud
*   **Niet blokkeren** Als uw webhook eindpunt is traag of minder, de ervaring van de shopper wordt niet beïnvloed
*   **Automatische herhalingen**
*   **Realtime** De lading wordt onmiddellijk verzonden nadat de indiening is opgeslagen

---

# **✅ Stap 5 Sla de integratie op**

Na het invoeren van uw webhook URL:

→ Klik **Opslaan**

Uw webhook integratie is nu actief.

---

# **🧪 Stap 6 Test de integratie**

Om uw eindpunt te verifiëren ontvangt u gegevens:

→ Open uw storefront in een **Incognito of privé** browservenster  
→ Trigger een popup en stuur een test e-mailadres

Voorbeeld:

`testwebhook@example.com`

Dan:

→ Controleer de logs van uw webhook eindpunt of aangesloten systeem  
→ Controleer of een JSON payload aangekomen met de test e-mail, popup naam, datum, tijd en locatiegegevens

💡 Als je geen toegang hebt tot server logs, gebruik dan een gratis webhook testservice (zoals webhook.site) als een tijdelijk eindpunt om de payload structuur te inspecteren.

---

# **⚠️ Vaak voorkomende problemen oplossen**

## **Webhook ontvangt geen gegevens**

Als inzendingen gebeuren maar uw eindpunt krijgt niets:

→ Controleer de webhook URL is correct en gebruikt **HTTPS**  
→ Controleer de webhook is gemarkeerd als **Verbonden** in de integratiekaart  
→ Controleer de popup is **gepubliceerd** en actief opmerkingen ontvangen  
→ Controleer uw server firewall- of CDN-regels, ze kunnen het verzoek blokkeren

## **Vertraging of ontbrekende payloads**

Als de lading inconsistent is:

→ De app maakt gebruik van een 5-seconde timeout  
→ De webhook is non-blocking; een langzaam eindpunt zal de popup niet stoppen met werken, maar het verzoek kan time-out  
→ Controleer serversnelheidslimieten als u hoge indieningsvolumes ontvangt

## **Ongeldige JSON- of ontledenfouten**

Als uw systeem de lading niet kan lezen:

→ De app stuurt `Content-Type: application/json` met een standaard JSON body  
→ Zorg ervoor dat uw eindpunt verwacht JSON en niet geform-encodeerde gegevens  
→ Sommige velden (zoals `phone`) kunnen lege strings zijn indien niet verzameld

---

# **🎉 Eindresultaat**

Eenmaal succesvol geconfigureerd:

✅ Elke popup indiening stuurt real-time gegevens naar uw aangepaste eindpunt  
✅ Payload omvat e-mail, telefoon, popup naam, locatie, tijdstempel, en terugkeer-klantstatus  
✅ De shopper ervaring wordt nooit geblokkeerd door webhook levering  
✅ U kunt verbinden Hoppy PopUps naar vrijwel elk systeem dat HTTP-verzoeken accepteert 🔗

---