Envoyer des e-mails en toute sécurité avec WordPress n’a pas besoin d’être coûteux ni compliqué.
Voila la devise de l’extension freemium WP Mail Pro que j’ai eu la chance de pouvoir développer pour un client américain en 2021. Elle permet aux administrateurs de sites WordPress d’externaliser l’envoi d’e-mails simplement ; une fois le plugin configuré, les e-mails sont ensuite envoyés par l’intermédiaire de l’API SparkPost pour une délivrabilité optimale.
La version gratuite de l’extension offre aux utilisateurs la possibilité d’envoi 1000 e-mails par mois gratuitement. Passé ce cap, le modèle freemium propose à l’utilisateur un abonnement mensuel pour débloquer cette limite d’envoi d’e-mails mensuels.
Pierre did amazing work delivered exactly as promised. Great to work with as always!
Nicholas Goodman, créateur de l’extension WP Mail Pro
Une expérience d’administration WordPress moderne et ultra-réactive
Ce projet m’aura permis d’appliquer mon expertise technique à bien des niveaux.
D’une part, l’interface d’administration a été conçue entièrement avec React JS et tous les réglages et interactions sont propulsés par des requêtes AJAX pour une réactivité et expérience-utilisateur absolues.
D’autre part, j’ai dû développer un interfaçage avec de nombreuses APIs :
- l’API SparkPost pour l’envoi de mails, la création et vérification du domaine d’envoi et de ses DNS, la récupération de statistiques,
- une API interne pour répondre aux webhooks de SparkPost et enregistrer les événements sur les e-mails transmis (réception, ouverture, clic, etc.),
- l’API de WooCommerce API Manager pour l’activation des licences, la vérification régulière de la validité d’une licence et la vérification de mises à jour du plugin à distance.
Zoom sur l’interface d’extension 100% AJAX avec React JS
L’extension WP Mail Pro dispose de sa propre page d’administration pour être configurée. Cette interface s’affiche par l’intermédiaire d’un module React JS développé sur-mesure et se base sur le design system de SparkPost appelé Matchbox. La librairie Matchbox offre une palette éprouvée de composants flexibles — développée par SparkPost — pour mettre en place rapidement une interface visuelle et des formulaires.
Côté back, j’ai créé une API Rest sur-mesure pour répondre à ce widget React JS. Chaque action ou demande de données est envoyée en AJAX de manière sécurisée, et le résultat instantané offre ainsi à l’utilisateur une expérience moderne et réactive.
Un premier onglet permet de présenter à l’utilisateur des statistiques filtrables par période (jour, semaine, mois). Ces statistiques sont :
- relatives à sa limite d’envoi lié à son abonnement en cours,
- relatives aux transmissions d’e-mails effectuées et leurs taux de délivrabilité et d’engagement (ouvertures, clics).
Un autre onglet affiche un log complet des dernières transmissions et présente :
- les détails de l’e-mail envoyé,
- son statut d’envoi/réception,
- un indicateur quant à son ouverture/clic par le destinataire.
Intégration complète avec l’API SparkPost et ses webhooks
Après activation de l’extension WP Mail Pro, l’administrateur doit définir le nom de domaine utilisé pour l’envoi des e-mails. L’interface React JS permet donc de définir ce nom de domaine et récupérer les enregistrements DNS requis par SparkPost, ainsi que de vérifier la validité de ces DNS.
Ces actions sont intimement liées à SparkPost et un développement sur-mesure a été fait pour interagir avec l’API SparkPost. Sont ainsi gérés :
- la création ou suppression du domaine d’envoi d’e-mails,
- la récupération des détails d’enregistrement DNS à indiquer pour le domaine choisi,
- la validation en direct des DNS du domaine,
- la récupération de statistiques détaillées sur les transmissions passées.
L’envoi d’e-mails est également externalisé via l’API de SparkPost : ce comportement s’injecte sur la fonction pugglable wp_mail() de WordPress, en charge d’envoyer les e-mails du site.
Un webhook pour les gouverner tous
Autre intégration poussée avec SparkPost : à l’activation de l’extension, le système utilise l’API SparkPost pour enregistrer un webhook. Grâce à ce dernier, SparkPost communique alors des informations relatives aux événements des transmissions mails (délivrabilité, ouverture, clic, bounce, rejet, spam, etc.).
Une route d’API interne au site WordPress a donc été développée pour répondre à ce webhook : de manière sécurisée (via token unique passé en header), il intercepte les événements publiés par SparkPost et les enregistre dans une base de données maison propre au plugin.
Côté back-end, l’administrateur peut ainsi consulter un tableau de logs détaillé pour suivre le bon envoi de ces mails et afficher le statut et les détails de chaque transmission.
Réglages généraux de l’extension
Enfin, un dernier onglet de réglages permet à l’utilisateur :
- de définir le nom et l’e-mail utilisés en tant qu’expéditeur des mails du site,
- d’envoyer un e-mail de test pour vérification,
- d’activer ou désactiver sa licence de plugin (logique s’appuyant sur le plugin WooCommerce API Manager).