How to Add Newsletter Signup (Revue) to a Static Site (Gatsby)
A newsletter can be a great way to share content with readers and build an audience. Starting out, I wanted a good user experience flow:
- Provide a signup form (a react component) can can be embedded in pages, blog posts .. essentially anywhere on a Gatsby website.
- Allow the entire signup process to happen within the component (Async). No page refresh or redirection. This would involve making a call to the newsletter api to add the user's email address and showing an update for successful or fail attempts.
Here is the workflow I settled on with Revue:
- Insert Revue form in component.
- Validate email on form submit.
- Submit form to revue "Add subscriber" page (this is done after a slight delay to give the illusion of some local processing being done). This is a redirect which I have to accomodate.
There are multiple mail services (with comparable basic functionality) that you can use for a newsletter e.g. MailChimp, Substack and Revue 1 3. MailChimp 4 has an excellent gatsby plugin which I tried out for the first version of my newsletter explorations. Some reasons I have decided to try Revue as at time of writing:
- They have been recently acquired by Twitter, it is likely the product will improve. Or not. 🤷
- They provide unlimited subscribers compared to MailChimp capped at 2k subscribers.
- They offer the configuration of a custom domain. For example I was able to map newsletter.victordibia.com to my Revue profile page. This helps with maintaining the illusion of a single victordibia.com experience.
Add html form to component. Revue provides sample form integration code (go to your account settings -> integrations -> sign up forms). The form can contain additional details such as first name and last name etc. We will edit the default to just capture email address as shown below.
Note that the submit
button above has an
onClick event which :
- prevents default submit behaviour
- validates the email address. This shows or hides an error message as needed
- submits the form if email validation checks out .. this triggers a redirect to the Revue profile page. The delays (setTimeout) are used to display a loading spinner for a short duration before the redirect. This communicates activity to the user and prepares them for the coming redirect.
onClick are shown below.
And really, thats it!
- Cross-Origin Resource Sharing (CORS) https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS↩
- Substack Vs Mailchimp Vs Pateron Vs Revue: Which Platform Is The Best To Make Money Writing. https://medium.com/menlo-office/substack-vs-mailchimp-vs-pateron-vs-revue-which-platform-is-the-best-to-make-money-writing-5ca31dde6506↩
- Newsletter Crew | Substack vs. Revue https://newslettercrew.com/substack-vs-revue/↩
- Mailchimp Gatsby Plugin https://www.gatsbyjs.com/plugins/gatsby-plugin-mailchimp/↩