// 04·Building this site·CH.02·software·frontend

Add Revue to your website

Add a newsletter signup form to your website in less than 10 minutes.

By Robert Koch18 OCT 20225 MIN READ

// IN A PROJECT:Building this site·CHAPTER 2 OF 3VIEW PROJECT →

FIG. 01Some letterboxes in a row on a typical american street.

Update (January 2023): Twitter shut down Revue on January 18, 2023. The service is no longer available. This article is preserved as a historical reference; links to getrevue.co point to archived snapshots.

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.

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

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.

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

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.

FIG. 06

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

FIG. 07

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

FIG. 08

§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.

FIG. 09

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

FIG. 10

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

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

§Step 1: Create a Revue account

§Step 2: Get the embed code

§Step 3: Converting to a React component

§Extra Tweaks

Like what you see?