Sending email securely with WordPress doesn’t have to be expensive or complicated.
That is the motto of the freemium WP Mail Pro extension that I had the chance to develop for an American client in 2021. It simply allows admins of WordPress websites to outsource the task of sending emails; once the plugin is configured, the emails are then sent through the SparkPost API for optimal deliverability.
The free version of the extension allows users to send 1000 emails per month for free. Beyond this limit, the freemium model offers the user a monthly subscription to unlock this monthly email limit.
Pierre did amazing work delivered exactly as promised. Great to work with as always!
Nicholas Goodman, Creator of the WP Mail Pro Extension
A Modern and Ultra Responsive WordPress Admin Experience
Through this project, I was able to apply my technical expertise on many levels.
On the one hand, the administration interface was designed entirely with React JS, and all settings and interactions are powered by AJAX requests for absolute responsiveness and user experience.
On the other hand, I had to develop an interface with many APIs:
- API SparkPost for sending emails, creating and checking the sending domain and its DNS, retrieving statistics,
- Internal API to respond to SparkPost webhooks and to record events on transmitted emails (reception, opening, clicks, etc.),
- WooCommerce API Manager for license activation, regular license validity checking, and checking for remote plugin updates.
Closer Look at the 100% AJAX Extension Interface with React JS
The WP Mail Pro extension has its admin page to be configured. This interface is displayed through a custom-developed React JS module based on SparkPost’s design system called Matchbox. The Matchbox library offers a proven palette of flexible components — developed by SparkPost — to quickly set up a visual interface and forms.
I created a custom Rest API on the back end to cater to this React JS widget. Each action or data request is securely sent in AJAX, and the instantaneous result offers the user a modern and responsive experience.
A first tab allows the user to view statistics that can be filtered by period (day, week, month). These statistics are:
- Related to his sending limit linked to his current subscription,
- Related to the email transmissions made and their delivery and engagement rates (openings, clicks).
Another tab displays a complete log of the last transmissions and presents:
- Details of the email sent,
- Sending/receiving status,
- Indicators as to whether it was opened/clicked by the recipient.
Full Integration with the SparkPost API and its Webhooks
After activating the WP Mail Pro extension, the administrator must define the domain name used for sending emails. The React JS interface allows to define this domain name, retrieve the DNS records required by SparkPost, and check the validity of these DNS.
These actions are intimately linked to SparkPost, and a custom development was made to interact with the SparkPost API. They are managed in this way:
- Creation or deletion of the email sending domain,
- Retrieve the DNS record details for the chosen domain,
- Live validation of the domain’s DNS,
- Retrieve detailed statistics on past transmissions.
Sending emails is also externalized via the SparkPost API. This behavior is injected on the pluggable function wp_mail() of WordPress, in charge of sending emails from the website.
A Webhook to Govern Them All
Another advanced integration with SparkPost is that when the extension is activated, the system uses the SparkPost API to register a webhook. Thanks to this webhook, SparkPost then communicates information about the events of the mail transmissions (deliverability, opening, click, bounce, rejection, spam, etc.).
An internal API route to the WordPress website has been developed to respond to this webhook; securely (via a unique token passed in the header), it intercepts the events published by SparkPost and saves them in a database specific to the plugin.
On the back-end, the administrator can consult a detailed log table to follow the successful sending of these emails and display the status and details of each transmission.
General Extension Settings
Finally, a last tab of settings allows the user:
- To define the name and the email used as the sender of the website mails,
- To send a test email for verification,
- To activate or deactivate the plugin license (logic based on the WooCommerce API Manager plugin).