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.

1<div id="revue-embed">
2  <form
3    action="http://newsletter.kochie.io/add_subscriber"
4    method="post"
5    id="revue-form"
6    name="revue-form"
7    target="_blank"
8  >
9    <div class="revue-form-group">
10      <label for="member_email">Email address</label>
11      <input
12        class="revue-form-field"
13        placeholder="Your email address..."
14        type="email"
15        name="member[email]"
16        id="member_email"
17      />
18    </div>
19    <div class="revue-form-group">
20      <label for="member_first_name"
21        >First name <span class="optional">(Optional)</span></label
22      >
23      <input
24        class="revue-form-field"
25        placeholder="First name... (Optional)"
26        type="text"
27        name="member[first_name]"
28        id="member_first_name"
29      />
30    </div>
31    <div class="revue-form-group">
32      <label for="member_last_name"
33        >Last name <span class="optional">(Optional)</span></label
34      >
35      <input
36        class="revue-form-field"
37        placeholder="Last name... (Optional)"
38        type="text"
39        name="member[last_name]"
40        id="member_last_name"
41      />
42    </div>
43    <div class="revue-form-actions">
44      <input
45        type="submit"
46        value="Subscribe"
47        name="member[subscribe]"
48        id="member_submit"
49      />
50    </div>
51    <div class="revue-form-footer">
52      By subscribing, you agree with Revue’s
53      <a target="_blank" href="https://www.getrevue.co/terms"
54        >Terms of Service</a
55      >
56      and
57      <a target="_blank" href="https://www.getrevue.co/privacy"
58        >Privacy Policy</a
59      >.
60    </div>
61  </form>
62</div>

Loading languages

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

1const Revue = () => {
2  return (
3    <div
4      id="revue-embed"
5      className="relative max-w-5xl mx-auto px-4 mb-0 pb-10 mt-10"
6    >
7      <Card>
8        <form
9          className="p-4 md:p-8 lg:p-14 group"
10          action="http://newsletter.kochie.io/add_subscriber"
11          method="post"
12          id="revue-form"
13          name="revue-form"
14          target="_blank"
15        >
16          <div className="flex mb-5 items-center">
17            {/* <div className="">{Icon}</div> */}
18            <h1 className="text-2xl">
19              Like what you see? <br />
20              Find out when I sporadically scream into the void...
21            </h1>
22          </div>
23          <div className="grid grid-cols-6 gap-6">
24            <div className="col-span-6">
25              <label
26                htmlFor="member_email"
27                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
28              >
29                Email Address
30              </label>
31              <input
32                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
33                placeholder="tony@stark.industries"
34                type="email"
35                name="member[email]"
36                id="member_email"
37              />
38            </div>
39
40            <div className="col-span-6 sm:col-span-3">
41              <label
42                htmlFor="member_first_name"
43                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
44              >
45                First Name <span className="optional">(Optional)</span>
46              </label>
47              <input
48                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
49                placeholder="Tony"
50                type="text"
51                name="member[first_name]"
52                id="member_first_name"
53              />
54            </div>
55            <div className="col-span-6 sm:col-span-3">
56              <label
57                htmlFor="member_last_name"
58                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
59              >
60                Last Name <span className="optional">(Optional)</span>
61              </label>
62              <input
63                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
64                placeholder="Stark"
65                type="text"
66                name="member[last_name]"
67                id="member_last_name"
68              />
69            </div>
70            <div className="col-span-6 md:col-span-1">
71              <input
72                type="submit"
73                value="Subscribe"
74                name="member[subscribe]"
75                id="member_submit"
76                className="w-full p-4 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded transform duration-200 cursor-pointer"
77              />
78            </div>
79            <div className="col-span-6 md:col-span-4 my-auto">
80              By subscribing, you agree with Revue&apos;s{' '}
81              <a
82                target="_blank"
83                rel="noreferrer"
84                href="https://www.getrevue.co/terms"
85                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
86              >
87                Terms of Service
88              </a>{' '}
89              and{' '}
90              <a
91                target="_blank"
92                rel="noreferrer"
93                href="https://www.getrevue.co/privacy"
94                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
95              >
96                Privacy Policy
97              </a>
98              .
99            </div>
100            <div className="col-span-1 justify-self-end self-center mr-5 hover:fill-orange-600">
101              {Icon}
102            </div>
103          </div>
104        </form>
105      </Card>
106    </div>
107  )
108}

Loading languages

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.

1const Icon = (
2  <svg
3    height="30px"
4    viewBox="0 0 76 90"
5    version="1.1"
6    xmlns="http://www.w3.org/2000/svg"
7    xmlnsXlink="http://www.w3.org/1999/xlink"
8    className=""
9  >
10    <g id="revue" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
11      <path
12        d="M37.0318819,50.3968732 C40.2417014,35.6207535 41.3628114,31.1848689 41.3628114,28.5615541 C41.3628114,22.7666511 38.0181974,21.7967985 34.6050241,21.7967985 C30.4632412,21.7967985 27.4762105,24.8449067 27.4762105,24.8449067 C29.8677171,29.2031903 25.8307895,44.7463899 24.0737917,51.0511045 C21.9498004,58.7023134 19.0165417,69.990806 17.1748531,77.1658321 C15.3358531,84.3422034 28.1483596,82.4132593 29.0060219,80.2865784 C29.9446099,77.9846419 32.4047119,69.5381884 34.6309263,60.6629825 C38.3664761,59.4986498 42.6466162,57.8481437 42.6466162,57.8481437 C42.6466162,57.8481437 49.6342785,89.4820187 63.8125921,89.4820187 C73.5950504,89.4820187 74.6745219,81.1891735 72.768307,80.2798526 C60.4384035,74.3840634 53.3539518,54.0306101 53.3539518,54.0306101 C53.3539518,54.0306101 75.184011,44.9589235 75.184011,26.4281474 C75.184011,7.87181343 60.125182,0.0484253731 44.9157917,0.0484253731 C28.0287171,0.0484253731 9.26500219,9.16181157 1.16560526,26.7980634 C-3.94541667,37.9466604 10.742386,41.4198358 11.468307,37.9466604 C13.8598136,26.5519011 26.5567105,8.61164552 45.0394671,8.61164552 C54.7856294,8.61164552 60.4962083,15.0481847 60.4962083,26.4281474 C60.4962083,40.5430474 44.240877,47.9837905 37.0318819,50.3968732 Z"
13        id="Combined-Shape"
14        className="fill-current duration-300 group-hover:fill-[#E15718]"
15        fill="white"
16      ></path>
17    </g>
18  </svg>
19)

Loading languages

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

1const Card = ({
2  children,
3}: PropsWithChildren<Record<never, never>>): ReactElement => {
4  return (
5    <div
6      className="
7      shadow-2xl rounded-2xl transition ease-in-out duration-200 bg-gray-300
8      dark:bg-neutral-600 text-black dark:text-white w-full h-full z-20
9    "
10    >
11      {children}
12    </div>
13  )
14}

Loading languages

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.

1const Revue = () => {
2  return (
3    <div
4      id="revue-embed"
5      className="relative max-w-5xl mx-auto px-4 mb-0 pb-10 mt-10"
6    >
7      <Card>
8        <form
9          className="p-4 md:p-8 lg:p-14 group"
10          action="http://newsletter.kochie.io/add_subscriber"
11          method="post"
12          id="revue-form"
13          name="revue-form"
14          target="_blank"
15        >
16          <div className="flex mb-5 items-center">
17            {/* <div className="">{Icon}</div> */}
18            <h1 className="text-2xl">
19              Like what you see? <br />
20              Find out when I sporadically scream into the void...
21            </h1>
22          </div>
23          <div className="grid grid-cols-6 gap-6">
24            <div className="col-span-6">
25              <label
26                htmlFor="member_email"
27                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
28              >
29                Email Address
30              </label>
31              <input
32                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
33                placeholder="tony@stark.industries"
34                type="email"
35                name="member[email]"
36                id="member_email"
37              />
38            </div>
39
40            <div className="col-span-6 sm:col-span-3">
41              <label
42                htmlFor="member_first_name"
43                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
44              >
45                First Name <span className="optional">(Optional)</span>
46              </label>
47              <input
48                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
49                placeholder="Tony"
50                type="text"
51                name="member[first_name]"
52                id="member_first_name"
53              />
54            </div>
55            <div className="col-span-6 sm:col-span-3">
56              <label
57                htmlFor="member_last_name"
58                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
59              >
60                Last Name <span className="optional">(Optional)</span>
61              </label>
62              <input
63                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
64                placeholder="Stark"
65                type="text"
66                name="member[last_name]"
67                id="member_last_name"
68              />
69            </div>
70            <div className="col-span-6 md:col-span-1">
71              <input
72                type="submit"
73                value="Subscribe"
74                name="member[subscribe]"
75                id="member_submit"
76                className="w-full p-4 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded transform duration-200 cursor-pointer"
77              />
78            </div>
79            <div className="col-span-6 md:col-span-4 my-auto">
80              By subscribing, you agree with Revue&apos;s{' '}
81              <a
82                target="_blank"
83                rel="noreferrer"
84                href="https://www.getrevue.co/terms"
85                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
86              >
87                Terms of Service
88              </a>{' '}
89              and{' '}
90              <a
91                target="_blank"
92                rel="noreferrer"
93                href="https://www.getrevue.co/privacy"
94                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
95              >
96                Privacy Policy
97              </a>
98              .
99            </div>
100            <div className="col-span-1 justify-self-end self-center mr-5 hover:fill-orange-600">
101              {Icon}
102            </div>
103          </div>
104        </form>
105      </Card>
106    </div>
107  )
108}