Comment connecter n8n à Workflow Webhooks

Présentation des cas d'utilisation

Cette configuration relie votre workflow d'e-mails post-achat dans n8n à Workflow Webhooks afin que vous puissiez collecter les informations client nécessaires à un audit SEO mensuel et les transmettre à Shopify Flow.

Dans cet exemple, le client reçoit un e-mail contenant un formulaire d'enquête (nous utilisons Google Forms, qui ajoute une entrée dans la feuille de calcul Google) lui demandant :

Quelle est l'URL de votre boutique Shopify ?
Quel est votre plus grand défi en matière de référencement naturel (SEO) à l'heure actuelle ? Voici les options proposées : slow traffic growth, poor product rankings, thin content, technical errors
Depuis combien de temps gérez-vous votre boutique ? Voici les options proposées : less than 6 months, 6–12 months, 1–3 years, 3+ years
L'adresse e-mail utilisée pour passer une commande dans la boutique ?

Lorsque le client soumet le formulaire, n8n envoie les réponses à votre point de terminaison Workflow Webhooks. Shopify Flow peut alors attribuer une balise au client et ajouter une note afin que votre équipe SEO puisse immédiatement prendre connaissance du contexte dans l'interface d'administration de Shopify.

Fonctionnalités de ce workflow

Une fois que le client a validé le formulaire dans votre flux d'e-mails, les données sont ajoutées dans la feuille de calcul ; à partir de là, n8n transmet ces données au webhook Workflow Webhooks, qui envoie à son tour cette charge utile à l'adresse Shopify Flow :

perl

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

Votre workflow Shopify Flow se présente donc comme suit :

ajoute la balise client seo-audit-pending
ajoute une note client contenant l'URL de la boutique et le défi en matière de référencement naturel

Cela permet à votre équipe d'ouvrir facilement la fiche client dans l'interface d'administration de Shopify et de voir ce qui nécessite une attention particulière avant le début de l'audit.

Guide vidéo

Vous trouverez ici la vidéo présentant l'ensemble de l'installation ; cette vidéo est muette. Vous pouvez augmenter ou réduire la vitesse de lecture de la vidéo selon vos besoins.

Avant de commencer

Installez et activez l'extension « Workflow Webhooks » dans votre boutique Shopify.
Préparez un workflow Shopify Flow, ou créez-en un nouveau sur Shopify Flow.
Créez votre formulaire d'enregistrement dans l'outil qui alimente votre workflow n8n. J'utilise Google Forms : une fois le formulaire Google Forms envoyé, une entrée est créée dans les feuilles de calcul Google. données issues du formulaire Google dans une feuille de calcul
Veillez à saisir l'adresse e-mail du client exactement telle qu'elle figure sur Shopify afin que Shopify Flow puisse identifier le bon client.

Configurer la connexion

Dans « Workflow Webhooks », créez le webhook.

Saisissez le nom et générez un jeton statique (vous pouvez créer ce jeton instantanément en appuyant sur le bouton « magique » situé au numéro 3 sur l'image ci-dessous), puis enregistrez.

Dans les « Paramètres avancés », nommez les variables que vous souhaitez recevoir :

name
email
store_url
seo_challenge
store_age

Dans les paramètres, nous disposons de 4 variables que nous avons associées aux champs « nom », « e-mail », « store_url » et « seo_challenge » ; nous avons également coché l'option « Autoriser le corps de requête personnalisé » afin de recevoir d'autres informations telles que « store_age ».

Dans le déclencheur Google Sheet, sélectionnez la feuille que vous souhaitez surveiller, puis créez une entrée test dans le formulaire afin de visualiser les données.

Sélectionnez ensuite l'action « Requête HTTP » pour envoyer les données du formulaire vers le webhook que vous avez créé à l'aide de l'application Workflow Webhooks.

Vous pouvez suivre la procédure indiquée au bas de la page Workflow Webhooks relative au webhook, en précisant les champs mappés, le jeton API et l'URL du webhook.

J'ai ajouté l'URL, sélectionné la méthode POST et ajouté les en-têtes de cette manière dans l'action « Requête HTTP » de n8n.

J'ai ensuite mis en correspondance les variables créées dans le webhook avec les questions proprement dites. Vous verrez dans la vidéo de démonstration comment je glisse-dépose les réponses dans les champs. J'ai également ajouté la variable « store_age », qui se trouvait sous la page défilante et qui ne tenait pas sur la capture d'écran.

Exécutez ensuite cette étape et consultez les données envoyées par n8n vers votre webhook dans l'application Workflow Webhooks. Dans la section « Invocations », vous pouvez voir que le système externe a déclenché ce webhook et consulter le Payload. Vous pouvez utiliser ce Payload dans votre Shopify Flow pour effectuer n'importe quelle action.

Votre webhook ayant bien reçu les données provenant de n8n, enregistrez et publiez le workflow.

Dans « Shopify Flow », créez un workflow qui se lance lorsque vos données de webhook sont reçues via Workflow Webhooks. Ensuite, dans le déclencheur de webhook, cliquez sur « Enregistrer les événements ».

Rendez-vous maintenant sur l'appel de webhook précédent et relancez le webhook afin d'envoyer cette charge utile à votre déclencheur de webhook dans l'Shopify Flow.

Dans les données, vous pouvez désormais voir la payload ainsi que l'identifiant du webhook.

Vous pouvez voir ce même webhook dans le tableau de bord des webhooks ; il vous permet d'identifier votre webhook.

Ajoutez à présent la condition suivante : si l'identifiant du webhook reçu correspond à celui que vous avez créé pour le flux n8n, effectuez alors les actions liées au formulaire. En effet, chaque déclencheur de webhook reçoit les données envoyées à n'importe quelle URL de webhook dans l'application Workflow Webhooks, et cet identifiant vous permettra de sélectionner les données pertinentes issues du webhook à des fins spécifiques.

Utilisez la valeur « E-mail entrant » pour rechercher le client correspondant à l'aide de la requête avancée. Dans la requête, vous pouvez utiliser l'adresse e-mail, qui provient des variables de déclenchement du webhook. Dans mon cas, le champ « fieldTwo » correspond à l'adresse e-mail. Ma requête se présente comme suit : email:"{{fieldTwo}}"

Vérifiez maintenant si le client existe. Je vérifie si l'identifiant du client existe.

ruby

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

Ajoutez ou mettez à jour la note client en y indiquant l'URL de la boutique et le défi SEO. Pour récupérer l’identifiant client, dans la configuration, j’ai utilisé ce code : j’ai utilisé le contrôle d’espaces blancs dans la syntaxe des balises {{-, -}}, {%- et -%} afin de supprimer les espaces blancs à gauche ou à droite de l’identifiant client. Si des espaces blancs sont présents, la requête ne fonctionnera pas.

ruby

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

Activez le workflow, envoyez une réponse test à partir de votre formulaire et vérifiez que la fiche client concernée dans Shopify reçoit bien la balise et la note.

Voici comment cela fonctionne : le formulaire est envoyé → N8N reçoit les données → N8N transmet les données au webhook Workflow Webhooks -> le webhook Workflow Webhooks déclenche l’Shopify Flow -> vous filtrez le déclencheur de flux en fonction de l’identifiant du webhook -> puis vous récupérez le client à partir de cet identifiant -> vous vérifiez si le client existe -> vous ajoutez la balise -> vous ajoutez la note

La balise et la note s'affichent comme sur l'image suivante pour le client.