Hoe koppelt u n8n aan Workflow Webhooks?

Overzicht van gebruiksscenario’s

Deze configuratie koppelt uw workflow voor e-mails na aankoop in n8n aan Workflow Webhooks, zodat u klantgegevens kunt verzamelen voor een maandelijkse SEO-audit en deze kunt doorgeven aan Shopify Flow.

In dit voorbeeld ontvangt de klant een e-mail met een enquêteformulier (wij maken gebruik van Google Formulieren; Google Formulieren voegt de gegevens toe aan het Google-spreadsheet) waarin het volgende wordt gevraagd:

• Wat is de URL van uw Shopify-winkel?
• Wat is op dit moment uw grootste uitdaging op het gebied van SEO? Met de volgende opties: slow traffic growth, poor product rankings, thin content, technical errors
• Hoe lang heeft u uw winkel al? Met de volgende opties: less than 6 months, 6–12 months, 1–3 years, 3+ years
• Is het e-mailadres gebruikt voor een bestelling in de Winkel?

Wanneer de klant het formulier verstuurt, stuurt n8n de antwoorden door naar uw Workflow Webhooks-eindpunt. Shopify Flow kan vervolgens de klant van een tag voorzien en een notitie toevoegen, zodat uw SEO-team de context onmiddellijk kan zien in Shopify admin.

Wat deze workflow doet

Nadat de klant het formulier in uw e-mailstroom heeft verzonden, worden de gegevens aan de spreadsheet toegevoegd. Van daaruit stuurt n8n de gegevens naar de webhook Workflow Webhooks, waarna de webhook deze payload doorstuurt naar Shopify Flow:

{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "seo_challenge": "poor product rankings",
  "store_age": "1-3 years"
}

Uw Shopify Flow-workflow ziet er dan als volgt uit:

• voegt de klanttag seo-audit-pending toe
• voegt een opmerking van de klant toe met de URL van de winkel en de uitdaging op het gebied van SEO

Hierdoor kan uw team eenvoudig het klantdossier openen in de beheerdersomgeving van Shopify en nagaan wat er moet worden aangepakt voordat de audit van start gaat.

Videogids

Hier kunt u de video van de volledige opstelling bekijken; de video bevat geen geluid. U kunt de afspeelsnelheid van de video naar behoefte verhogen of verlagen.

Voordat u begint

• Installeer en activeer „Workflow Webhooks“ in uw Shopify-winkel.
• Zorg dat u een Shopify Flow-workflow klaar hebt staan, of maak een nieuwe aan op Shopify Flow.
• Stel uw aanmeldingsformulier op in de tool die uw n8n-workflow voedt. Ik maak gebruik van Google Formulieren; zodra het Google-formulier is ingediend, wordt er een record aangemaakt in Google Spreadsheets. gegevens uit het Google-formulier in een spreadsheet
• Zorg ervoor dat u het e-mailadres van de klant precies zo vastlegt als het in Shopify staat, zodat Shopify Flow de juiste klant kan identificeren.

Stel de verbinding in

Maak de webhook aan in Workflow Webhooks.

Voer de naam in en genereer een statisch token (u kunt het statische token direct aanmaken door op de ‘magische knop’ bij nummer 3 in de onderstaande afbeelding te drukken) en sla het op.

Geef in de geavanceerde instellingen de namen op van de variabelen die u wilt ontvangen:

• name
• email
• store_url
• seo_challenge
• store_age

In de instellingen hebben wij 4 variabelen die wij hebben gekoppeld aan naam, e-mail, store_url en seo_challenge. Daarnaast hebben wij ook de optie ‘Aangepaste verzoektekst toestaan’ aangevinkt om andere gegevens, zoals store_age, te kunnen ontvangen.

Selecteer in de Google Sheet-trigger het juiste werkblad dat u wilt controleren en voer een testvermelding in het formulier in om de gegevens te bekijken.

Selecteer vervolgens de actie ‘HTTP-verzoek’ om de formuliergegevens naar de webhook te verzenden die u hebt aangemaakt met behulp van de app Workflow Webhooks.

U kunt de stap volgen die onderaan de pagina Workflow Webhooks wordt vermeld, met de toegewezen velden, het API-token en de URL voor de webhook.

Ik heb de URL toegevoegd, de POST-methode geselecteerd en de headers op deze manier toegevoegd in de n8n HTTP-verzoekactie.

Vervolgens heb ik de variabelen die in de webhook zijn aangemaakt, gekoppeld aan de daadwerkelijke vragen. In de videodemonstratie kunt u zien hoe ik de antwoorden via slepen en neerzetten in de velden plaats. Ik heb ook de variabele store_age toegevoegd, die zich onder de schuifbare pagina bevond en niet in de schermafbeelding paste.

Voer vervolgens de stap uit en bekijk de gegevens die vanuit n8n naar uw webhook zijn verzonden in de app Workflow Webhooks. In het overzicht van de aanroepen kunt u zien dat het externe systeem deze webhook heeft aangeroepen en kunt u ook de payload bekijken. U kunt deze payload gebruiken in uw Shopify Flow om een willekeurige actie uit te voeren.

Aangezien uw webhook de gegevens van n8n met succes heeft ontvangen, dient u de workflow op te slaan en te publiceren.

Maak in ‘Shopify Flow’ een workflow aan die start wanneer uw webhook-gegevens worden ontvangen via Workflow Webhooks. Klik vervolgens in de webhook-trigger op ‘Gebeurtenissen vastleggen’.

Ga nu naar de eerdere webhook-aanroep en herhaal de webhook om deze payload naar uw webhook-Trigger in de Shopify Flow te verzenden.

In de gegevens kunt u nu zowel de payload als de webhook-ID zien.

U kunt dezelfde webhook terugvinden in het webhook-dashboard; deze kunt u gebruiken om uw webhook te identificeren.

Voeg nu de voorwaarde toe: als de ontvangen webhook-ID overeenkomt met de webhook-ID die u voor de n8n-flow hebt aangemaakt, voer dan de acties uit die betrekking hebben op het formulier. Aangezien elke webhook-trigger de gegevens ontvangt die naar een willekeurige webhook-URL in de Workflow Webhooks-app zijn verzonden, helpt deze ID u om de relevante gegevens uit de webhook te selecteren voor een specifiek doel.

Gebruik de waarde ‘Inkomende e-mail’ om de bijbehorende klant te vinden met behulp van de geavanceerde zoekopdracht. In de zoekopdracht kunt u het e-mailadres gebruiken; dit e-mailadres wordt ontvangen via de triggervariabelen van de webhook. In mijn geval is ‘fieldTwo’ het e-mailadres. Mijn zoekopdracht ziet er als volgt uit: email:"{{fieldTwo}}"

Controleer nu of de klant bestaat. Ik controleer of het klantnummer bestaat.

Voeg vervolgens de tag seo-audit-pending toe. Om de klant op te halen, heb ik in de configuratie deze code gebruikt om het klant-ID in te voeren. Ik heb de witruimtestering in de tagsyntaxis {{-, -}}, {%- en -%} gebruikt om witruimte aan de linker- of rechterkant van het klant-ID te verwijderen. Indien er witruimte aanwezig is, zal de query niet werken.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Voeg de winkel-URL en de SEO-uitdaging toe aan de klantnotitie of werk deze bij. Om de klant te identificeren, heb ik in de configuratie deze code gebruikt om het klant-ID op te nemen. Ik heb de -functie voor het verwijderen van witruimte toegepast in de tagsyntaxis {{-, -}}, {%- en -%} om witruimte aan de linker- of rechterzijde van het klant-ID te verwijderen. Indien er witruimte aanwezig is, zal de query niet werken.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Schakel de workflow in, verstuur een testbericht via uw formulier en controleer of het juiste klantdossier in Shopify de tag en de notitie ontvangt.

Dit werkt als volgt: het formulier wordt verzonden -> N8N ontvangt de gegevens -> N8N stuurt de gegevens naar de webhook op Workflow Webhooks -> de webhook op Workflow Webhooks activeert de Shopify Flow -> u filtert de flow-trigger op basis van de webhook-ID -> vervolgens haalt u de klant op basis van de ID op -> controleert of de klant aanwezig is -> voegt de tag toe -> voegt de notitie toe

De tag en het briefje zien er voor de klant uit zoals op de onderstaande afbeelding.