Comment créer une connexion Systeme IO et WordPress ? Systeme IO est un outil business incroyable qui permet à n’importe qui de se créer une base mail, d’héberger des formations, de créer des communauté, de faire de l’affiliation… Son énorme avantage par rapport à ses concurrents, c’est son prix. Bien inférieurs aux autres, Systeme IO possède également une version gratuite hyper complète qui permet par exemple de profiter de 2000 contacts mail sans dépenser le moindre centime !
Dans les outils surpuissants du business, on retrouve également WordPress. On ne le présente plus, c’est l’outil numéro un pour créer un site web en 2024 et il est gratuit !
Pour quiconque qui démarre une activité en ligne, il est donc normal de se tourner vers ces deux outils. WordPress pour sa vitrine en ligne et Systeme IO pour sa base e-mail.
Le problème que rencontrent alors ces personnes, c’est qu’il n’existe aujourd’hui aucun moyen « officiel » de créer une connexion Systeme IO et WordPress. En effet, Systeme IO proposant également un système de site web comme WordPress (beaucoup moins performant), ils ne proposent pas d’outil pour faire la liaison avec WordPress.
Et donc comment récupérer des mails depuis WordPress pour les envoyer dans notre base Systeme IO ? C’est ce que je vais te présenter dans cet article, comment tu vas pouvoir créer une connexion Systeme IO et WordPress.
Création du formulaire sur WordPress
La première chose à faire pour récupérer les mails de nos prospects depuis notre site WordPress, c’est de créer un formulaire.
Extension de formulaire
Il existe une multitude d’extensions WordPress qui te permettent de créer des formulaires et de faire la même chose que moi. Dans cet article, je vais utiliser le plus commun, Contact Form 7.
Si tu utilises également cette extension, alors on va également en installer une autre qui s’appelle CF7 to Webhook.
Dans cet article, nous allons utiliser des webhooks. Normalement, peu importe ton extension de formulaire, tu peux ajouter des webhooks qui s’activent automatiquement à l’envoi des données. Si besoin, contacte-moi sur Instagram, je t’aiderai à faire la configuration 🙂
Notre formulaire
Maintenant, on va se rendre dans notre extension pour créer un formulaire.
Dans le cadre de cet article, je vais partir du formulaire par défaut fourni par Contact Form 7. Celui-ci nous donnes 4 champs : Nom, Adresse e-mail, objet et Message.
Je t’invite bien sûr à adapter les informations que tu demandes à ton prospect. Si c’est dans le cas d’un formulaire de contact, un formulaire optin, ou autre…
Une fois le formulaire créé, je copie le shortcode et je l’importe dans une nouvelle page/page existante pour le rendre accessible.
C’est bon, l’étape 1 de notre tutoriel est terminée ! On va maintenant s’attaquer à la partie où on transmet les données à Systeme IO.
Envoyer les données de notre formulaire WordPress vers Systeme IO
Jusque là, nous n’avons rien vu de spécial, nous avons simplement préparé le formulaire envoyé par nos prospects.
Tu avais même probablement déjà un formulaire sur ton site que tu peux bien sûr continuer d’utiliser.
L’étape suivante consiste à se rendre sur Make.com. Il s’agit d’un outil d’automatisation qui te permet de relier des applications entre elles.
Plus tôt, je te disais que Systeme IO n’avait pas d’extension pour le relier à WordPress. Nous allons créer cette connexion Systeme IO et WordPress grâce à Make.
Make a une version gratuite et une version payante. La version gratuite fait amplement l’affaire pour notre projet du jour.
Création d’un webhook sur Make pour notre connexion Systeme IO et WordPress
Rends-toi sur Make.com, puis après avoir crée ton compte, crée un nouveau scénario.
Si tu veux en savoir plus sur Make avant de commencer à l’utiliser, je t’invite à lire l’article Comprendre le potentiel de Make en 10 minutes.
On va d’abord créer un module Webhook – Custom webhook.
PS : Je t’ai mis un lien à la fin de cet article qui te permettra de télécharger l’automatisation complète que je crée dans cet article. C’est cadeau, ça te devrait te faire gagner pas mal de temps ! (Tu peux quand même suivre l’article pour être sûr de comprendre son fonctionnement 🙂 ) Si tu ne veux pas attendre, tu peux la télécharger en cliquant ici.
Clique ensuite sur « Add » pour créer un nouveau webhook, nomme-le par exemple « Webhook Formulaire WordPress » et clique sur « Save ».
A cet instant, tu devrais voir sur le module, un bouton stop qui semble être « en chargement ». Cela signifie que Make attend de recevoir des informations.
Globalement pour t’expliquer, un webhook est un déclencheur. Il attends constamment des informations et dès qu’il en reçoit, il déclenche l’automatisation que nous allons créer par la suite.
Ici, il attend de recevoir ses premières données. Alors pour lui envoyer ces données, on va commencer par cliquer sur le bouton à côté de « Stop », « Copy address to clipboard ».
Connecter le webhook à notre formulaire WordPress
Maintenant, on va retourner sur WordPress, sur la page de notre formulaire. Si tu utilises Contact Form 7, alors rends-toi dans l’onglet « Webhook » de ton formulaire. Je pense que pour les autres extensions, il devrait également y avoir un paramètre « webhook » qui fonctionne de la même façon.
Dans cet onglet webhook, on va cocher la case « Send to Webhook » et on va venir coller le texte copié depuis Make dans le champ « Webhook URL ».
La case juste en dessous « Send CF7 mail as usually » te permet de spécifier si tu souhaites toujours recevoir les données envoyées via le formulaire sur ta boite mail. Libre à toi de la cocher ou pas selon tes besoins.
C’est tout pour cet onglet, tu peux scroller et cliquer sur « Enregistrer ».
Maintenant, retournons sur la page de notre formulaire et faisons un premier test.
Normalement, en cliquant sur « Envoyer », si tu retournes sur Make, le bouton « Stop » qui était en chargement a disparu et tu devrais voir le message « Successfully determined ». Cela signifie que Make a bien reçu les informations du formulaire.
Félicitations, nous venons de réussir à envoyer les données de WordPress vers Make. Maintenant, notre objectif, c’est de les envoyer de Make vers Systeme IO.
Créer un contact Systeme IO avec Make
Les données de notre formulaire sont bien arrivées sur Make. Maintenant, nous devons faire en sorte qu’à chaque fois que quelqu’un valide le formulaire, un contact soit créé sur Systeme IO.
Pour ce faire, sur Make, après notre module Webhook, on va utiliser le module de Systeme IO – Create a contact.
Connecter Systeme IO à Make
Pour utiliser les modules Systeme IO de Make, la première chose à faire est de connecter ton compte Systeme IO. Normalement, en ajoutant le module Systeme IO, tu devrais avoir un bouton « Create a connection ». En cliquant sur ce bouton, tu as une fenêtre qui s’ouvre où tu peux renseigner un nom de connexion et une clé API.
Nomme ta connexion comme tu le souhaites (moi je l’ai simplement appelé « Connexion Systeme IO et WordPress »).
Et pour obtenir ta clé API, rends-toi à l’adresse suivante : https://systeme.io/dashboard/profile/public-api-settings.
Sur cette page, tu devrais pouvoir cliquer sur « Créer une nouvelle clé API », copie cette clé et retourne la coller sur Make dans le champ API Key.
C’est bon, Systeme IO est maintenant connecté à ton compte Make.
Créons notre contact Systeme IO
Après avoir connecté ton compte Systeme IO à Make, les champs du module « Create a contact » devrait apparaitre.
Pour créer un contact, tu as simplement besoin d’une adresse e-mail, à renseigner dans le champ du même nom. Tu peux également renseigner une locale et mettre « fr » par exemple.
Pour ajouter l’adresse e-mail, clique simplement sur le champs texte et tu devrais voir les données récupérées notre webhook.
Il te suffit alors de sélectionner la donnée correspondant au mail de ton prospect.
Maintenant, sauvegarde ton automatisation et active là en cochant la case « ON » en bas à gauche de ton écran.
Tests et amélioration de notre automatisation
C’est bon, nous avons réussi à envoyer les données de notre formulaire de WordPress jusqu’à Systeme IO. Et si nous testions tout ça ?
Premier test de notre automatisation
Pour tester notre automatisation, retourne donc sur la page de ton formulaire, renseigne tous les champs et envoie-le.
A partir de ce moment-là, 3 scénarios peuvent se produire :
- Tout a très bien fonctionné, un nouveau contact avec l’adresse mail donnée a été créé sur Systeme IO.
- Tu as renseigné une adresse mail qui existe déjà dans ta base de contacts Systeme IO, ce qui a provoqué une erreur sur Make et qui a désactivé notre automatisation
- Tu as renseigné une adresse mail qui n’existe pas, Systeme IO l’a détécté et a désactivé notre automatisation.
Gestion des erreurs
Quand on automatise un processus, il faut penser à tous les cas de figure.
Certes, si un prospect vient pour la première fois sur ton site et qu’il donne sa vraie adresse mail, alors tout fonctionnera comme prévu. Par contre, si tu possèdes déjà son mail dans ta base ou s’il fait une faute de frappe et que le mail entré n’existe pas, ton automatisation sera désactivée.
A priori, rien de grave.
Seulement, toutes les personnes suivantes qui rempliront le formulaire, même si elles donnent une bonne adresse mail, ne seront pas enregistrées dans ta base mail. Parce que l’automatisation a été désactivée.
Nous devons donc traiter les erreurs.
Sur Make, fais un clic droit sur le module Systeme IO et clique sur « Add error handler », qui va nous permettre d’effectuer une action spécifique dans le cas d’une erreur.
Parmi les « error handlers » proposés, ajoute le module « Commit ». Ce module fera en sorte que l’automatisation soit arrêtée en cas d’erreur, sans pour autant la désactiver.
Tu peux maintenant enregistrer ton automatisation et la réactiver pour refaire un test.
Tu verras cette fois que l’automatisation n’est plus désactivée s’il y a un problème avec l’adresse mail.
Ajouter des informations au contact créé
C’est bien beau tout ça, mais tu aimerais peut-être ajouter d’autres informations sur la fiche contact Systeme IO. Pour ce faire, après notre module Systeme IO, on va ajouter le module Systeme IO – Update a contact (en cliquant sur le + à droite collé au module).
Ce que notre automatisation fait, c’est qu’elle crée d’abord un nouveau contact, puis on vient modifier ce contact tout juste créé en lui ajoutant les données qui nous intéressent.
Pour mettre à jour notre contact, on doit fournir au module l’id de celui-ci. L’id du contact, on l’a obtenu via le module « Create a contact » précédent. Tu devrais d’ailleurs pouvoir le récupérer en utilisant sa variable.
Ensuite, plus bas dans le module, coche la case « Show advanced settings » pour faire apparaitre le paramètre « Fields ». Ce paramètre te permet d’ajouter les champs que tu veux à ta fiche contact.
Dans mon formulaire, la seule information demandée est le prénom du prospect, je vais donc ajouter un item dans le paramètre « Fields ».
En ajoutant un item, on me demande le « Slug », qui correspond à la clé de mon champs et la value, qui correpond à la valeur de mon prospect.
Par exemple, si je veux spécifier le prénom de mon prospect, le Slug est « first_name » et la value, c’est la variable « your-name » qui vient de mon webhook.
Voici une liste des slugs principaux de Systeme IO :
- Prénom : first_name
- Nom : surname
- Téléphone : phone_number
- Adresse : street_address
- Ville : city
- Pays : country
- Code postal : postcode
- Région : state
Maintenant, notre automatisation crée un contact, puis lui ajoute son prénom sur sa fiche.
Ajouter un tag au contact créé
Une fonctionnalité intéressante de Systeme IO est d’assigner des tags aux contacts. Ces tags nous permettent de savoir différencier nos contacts selon les critères de notre choix (canal d’acquisition, produit intéressés, client, prospect, affilié…).
Bref, c’est une fonctionnalité très puissante à ne pas négliger.
Et dans Make, on peut également ajouter un tag à notre contact. Pour ce faire, on va ajouter un module après notre « Update a contact ». Parmi les différents modules de Make, cherche « Add a Tag to a Contact ».
De la même manière que pour modifier un contact, nous allons utiliser le contact ID reçu du module « Create a contact ». Pour le paramètre Tag ID, en cliquant dessus, tu pourras choisir parmi tous les tags que tu as crée sur Systeme IO.
Notre automatisation commence à ressembler à quelque chose maintenant !
Résumons :
- Quelqu’un remplit notre formulaire sur notre site web.
- Ses données sont envoyées sur Make
- Nous créons un contact sur Systeme IO
- Nous lui complétons sa fiche client (son prénom dans cet article)
- Et nous lui assignons le tag « Newsletter »
C’est déjà un gros boulot ! Mais il nous reste un dernier scénario que nous n’avons pas prévu…
Dernière modification : Et si le contact existe déjà ?
On crée un contact et on lui assigne un tag, c’est parfait.
Mais comment faire si le mail de ton prospect est déjà dans ta base de données et qu’on souhaite quand même lui associer un tag ?
Nous devons modifier notre automatisation.
Entre le webhook et le module « Create a Contact », tu vas ajouter un nouveau module Systeme IO – List Contacts (en faisant un clic droit sur la liaison entre les deux).
Ce module va avoir pour but de vérifier si un compte existe déjà avec l’adresse mail reçue via le formulaire.
Le seul paramètre à renseigner dans ce module, c’est « Email », tu vas utiliser la variable de notre webhook comme nous avons fait dans les étapes précédentes.
Quand Make exécute ce module, il peut alors se présenter deux scénarios :
- Il existe 0 compte avec cette adresse mail
- Il existe au moins 1 compte avec cette adresse mail
Dans le premier scénario, c’est simple, on va rediriger vers la branche que nous avons créée précédemment. Dans l’autre cas, on va devoir faire une autre branche.
Ajouter un router
Pour faire des branches dans Make, on utilise des routers. Fais donc un clic droit sur la liaison entre « List contacts » et « Create a contact » et ajoute un router.
Un router fait donc son apparition. Normalement pour l’instant, il ne possède qu’une seule branche, celle que nous avons crée ensemble.
Pour en ajouter une nouvelle, il te suffit de faire un clic gauche dessus. Une nouvelle branche apparait. Ajoute un module au bout de cette nouvelle branche, un module Systeme IO – Add a Tag to a Contact.
Comme nous ne sommes plus dans la même branche, on ne va pas pouvoir utiliser le même User ID qu’on avait utilisé dans la première branche. Cette fois, on va devoir utiliser la variable « ID » qui vient du module « List Contacts ».
Voilà à quoi devrait ressembler ton automatisation à présent.
Les conditions du router
Tiens bon, on arrive enfin à la fin !
Maintenant que nous avons crée deux branches, nous devons spécifier dans quel cas passer par la branche du haut et dans quel cas passer par celle du bas.
Pour cela, on va utiliser des filters. On appelle aussi cela des conditions en programmation. Si la condition est remplie, alors Make va exécuter tout ce qui se situe après ce filter. Sinon, il ne va rien faire.
Pour commencer, fais un clic gauche sur la liaison entre le router et « Create a Contact ». Une fenêtre devrait s’ouvrir. Ici la condition que nous mettre en place, c’est : si le nombre de résultats trouvés par le module « List contacts » est égal à 0, alors on prend la branche du haut.
On va faire la même chose avec la branche du bas en ajoutant la condition : si le nombre de résultats trouvés par le module « List contacts » est supérieur à 0, alors on prend la branche d’en bas.
Ces deux conditions nous permettent de nous assurer que la branche d’en haut sera executée uniquement si l’adresse mail du contact n’est pas dans notre base de données.
Tandis que la branche du bas sera exécutée seulement si l’adresse mail est déjà connue. Dans ce cas on viendra simplement lui ajouter le tag qu’on souhaite s’il ne le possède pas déjà.
Télécharge mon automatisation et gagne un temps fou
Je te l’avais promis, cette automatisation est longue, elle contient beaucoup de modules, je te laisse télécharger la mienne directement en passant par le lien ci-dessous.
Tout ce qu’il te reste à faire, c’est de cliquer sur le bouton « Import Blueprint » et tous les modules apparaitra comme par magie !
Conclusion : Connexion Systeme IO et WordPress
Ces deux outils offrent un nombre de fonctionnalités inestimables dans un business. Malheureusement, les deux sont également concurrents, voilà pourquoi il est difficile de trouver un moyen de les lier entre eux pour profiter des points forts de l’un et de l’autre.
J’ai moi-même mis en place plusieurs automatisations avec une connexion Systeme IO et WordPress et je trouve que ce sont les outil idéaux pour commencer à construire une liste email conséquente et un siste web sans sortir un seul centime de sa poche.
J’espère que ce tutoriel était clair et que je ne t’ai pas perdu.
Si c’est le cas, n’hésite pas à commenter cet article ou à m’envoyer un message sur Instagram.
A très bientôt.
Nathan
