Some letterboxes in a row on a typical american street.

Add Revue to your website

Published on 18/10/2022

5 min read

I recently started writing a newsletter as a way of keeping track of what I'm doing week to week. I've been using Revue to write and send the content, mainly because I wanted the twitter integration. But I've also found that Revue comes with a simple way to add a newsletter signup form to your website. Here's how I built mine.

Step 1: Create a Revue account

First, what is Revue? Well it brands itself as "an editorial newsletter tool for writers and publishers. Build a loyal audience Revue makes it easy for writers and publishers to send editorial newsletters — and get paid." I'm not too sure about the monitary side of things, but I do like the way it integrates with Twitter as you can see below.

Twitter integration with Revue

If you don't already have a Revue account, head over to getrevue.co and create an account and link with your Twitter account.

Step 2: Get the embed code

Once you've created your account, you'll be taken to the dashboard. Click on your profile image and select Account Settings

Revue account settings

Once there you'll see a tab called Integrations. Click on that and you'll see a list of applications you can link to your account. At the very bottom under Tools will be an option to embed a signup form.

Integrations Page

Click on Learn More to get to the embedded code for your newsletter.

Embed Source Code

It should look something like mine here, note on line 3 where you need to change the action to point to your newsletter, be it a Revue domain or a custom one.

Now once you have this code you can simply add it to your site if you're using HTML. The once thing you'll need to do is add css to make it look nice. But since my site uses Next.js and TailwindCSS I needed to do one more thing before I could complete this task.

Step 3: Converting to a React component

Using the UI kit I've designed for this site I converted the HTML that's given as a component into a React component. Take note of the highlighted lines as where I'm adding my own css classes with Tailwind

The full code for this component and my entire site is available on Github.

Extra Tweaks

There are a few extra features I've added to my component to give it a little flair. For started I've added the Revue logo as an SVG that changes colour when the entire component is hovered over.

I'm also using the Card component that my pages use to render the cutout that content appears on

And the end result is the nice little sign up form you see below.

End result, the Revue sign up form

And there you have it! You should now have a nice form for people to use to sign up for your email newsletter! 🎉

Robert Koch

👋 I'm Robert, a Software Engineer from Melbourne, Australia. I write about a bunch of different topics including technology, science, business, and maths.