Badge Webflow Award Winner 2023

Comment connecter votre site Webflow à Sendinblue ?

Publié le 
1/12/2021
Modifié le 
27/3/2023
Temps de lecture : 5 min
Ordinateur avec icone Sendinblue et icone Webflow sur fon bleu
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

Sendinblue est un outil no-code qui vous permet de créer des campagnes marketings ciblées. Connectez Webflow à Sendinblue pour automatiser vos campagnes marketing, et améliorer l'expérience utilisateur de votre site web.

Points clés à retenir

Si vous cherchez à optimiser les flux de données et le parcours utilisateur de votre site webflow, vous êtes sur le bon tuto ! 🤩

Nous vous montrons ici comment automatiser vos emailings, et campagnes marketing en connectant votre site Webflow à l’outil no-code de webmarketing Sendinblue. Pour optimiser les différents workflow que vous mettrez en place entre votre site web et Sendinblue, nous utiliserons l’outil d’automatisation no-code Integromat.

Integromat vous propose de connecter vos outils no-code à l’aide de modules. Vous aurez donc un module Webflow qui vous permettra notamment de récupérer les données de votre site web issues par exemple de vos formulaires de contacts, formulaires d’inscriptions, formulaires de candidatures, newsletter, etc. Quand au module Sendinblue, il integromat vous propose de nombreuses actions à automatiser.

  • Gérez vos contacts - trouver un contact dans une liste, créer un contact, ajouter, mettre à jour ou supprimer un contact.
  • Gérez vos listes - trouver une liste, créer une liste, la mettre à jour ou la supprimer.
  • Gérez vos fichiers - trouver un fichier, créer un fichier, le mettre à jour ou le supprimer.
  • Gérez vos campagnes - trouver une campagne, la mettre à jour, la supprimer, ou en créer une nouvelle, envoyer un rapport détaillé d’une campagne, envoyer un email.
  • Autres fonctionnalités - connecter à l’API, obtenir un comptes, envoyer un SMS.

Toutes ces fonctionnalités vous permettront de créer des flux automatiser entre votre site Webflow et vos campagnes marketing. Plus besoin de gérer vos campagnes, Integromat et Sendinblue s’occupent de retargetter vos contacts, de les ajouter à des listes d’envoyer, de lancer des campagnes d’emailing, d’envoyer une newsletter automatique, etc.

Voici comment connecter Webflow et Sendinblue en 4 étapes.

1 - Ajoutez un module Webflow à Integromat

1.1 - Connectez votre site Webflow à Integromat

Ajoutez un premier module Webflow pour connecter votre site à Integromat. Ce module est un déclencheur “Watch Event” dont le but va être de récupérer les données de votre site web après chaque nouvelle action.

Par exemple, dès qu’une personne s’inscrira à votre newsletter, l’automatisation se déclenchera et le module Webflow recevra son adresse e-mail. C’est un moyen d’optimiser le parcours utilisateur de votre site web, déclenchant par exemple un envoie d’email de bienvenu à la suite d’une première inscription. Pas de délais d’attente, Integromat reçoit les données de Webflow en direct.

Ajout d'un module Webflow dans l'interface de workflow Integromat
Nouveau module Webflow

1.2 - Lancez le déclencheur Webflow

Votre workflow n’étant pas encore actif, vous devrez manuellement envoyer les informations au déclencheur Webflow pour pouvoir continuer de paramétrer votre  automatisation. Pour cela faite un clic droit sur le module et cliquez sur “Run this module only”. Une fois votre module lancé, retournez sur votre site web et remplissez le formulaire web que vous souhaitez connecter. Retournez dans Integromat, et vérifiez que les données récupérées par le déclencheur sont bien celles que vous souhaitez réutiliser.

Lancement du déclencheur Webflow dans Integromat
Déclencheur Webflow

2 - Créez une nouvelle API dans Sendinblue

Pour pouvoir connecter votre compte Sendinblue à Integromat, vous devrez dabord créer une nouvelle clé API dans Sendinblue. Pour cela, allez dans les paramètres SMTP & API de votre compte Sendinblue. Puis cliquez sur “Générer une nouvelle clé API”. Renommez la “Integromat API key” puis copiez là. Si besoin, voici un lien vers toutes les ressources API de Sendinblue.

Interface de création d'une nouvelle clé API dans Sendinblue
Nouvelle API Integromat

3 - Connectez Sendinblue à votre site Webflow

Connectez votre premier module Sendinblue à Webflow dans l’interface Integromat. Choisissez l’action que vous souhaitez effectuer, comme par exemple “Create a contact” pour créer un nouveau contact dans votre base de données Sendinblue. Dans ce cas, après chaque nouveau formulaire rempli sur Webflow, un contact sera créé dans Sendinblue.

Ajout d'un nouveau compte Sendinblue à l'interface Integromat
Nouveau compte Sendinblue

4 - Associez vos données Webflow à Sendinblue

Paramétrez votre intégration Sendinblue en faisans correspondre les différentes données du module Webflow avec le module Sendinblue. Vous aurez uniquement à récupérer les balises issues du module Webflow et les ajouter à Sendinblue. Un champ est obligatoire dans le module Sendinblue, il s’agit de l’adresse mail. En effet, la base de données Sendinblue est conçu de sorte à rattacher un contact par adresse mail. En effet, ce sont les mails qui s’inscrivent à des listes d’envoi. Ainsi, une même personne pourra être inscrite sur votre base de données avec plusieurs adresses mails. C’est indispensable pour pouvoir gérer au mieux les doublons ou les désinscriptions de vos listes. Vous devrez donc obligatoirement indiquer un mail. Les autres champs correspondants à “attributs” vos attributs Sendinblue sont facultatifs, mais nous vous recommandons de les remplir si vous souhaitez avoir une base de données complète.

Astuce 💡 Cochez la case “Show advanced settings” pour accéder à d’autres paramètres du module.

Paramétrage du module sendinblue dans integromat avec ajout de balise webflow
Paramétrage de Sendinblue et Webflow

Note blog vous propose plein d'autres astuces pour continuer à automatiser votre site Webflow !

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop