# Add Revue to your website

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

- URL: https://blog.kochie.io/articles/04-adding-revue-component
- Author: Robert Koch
- Published: 2022-10-19
- Tags: software, frontend, 100DTO
- Project: https://blog.kochie.io/projects/personal-site

---

> **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](https://web.archive.org/web/20221201000000/https://www.getrevue.co/) 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 monetary side of things, but I do like the way it integrates with
Twitter as you can see below.

![Twitter integration with Revue](https://blog.kochie.io/images/articles/04-adding-revue-component/screenshot_0.png)

If you don't already have a Revue account, head over to
[getrevue.co](https://web.archive.org/web/20221201000000/https://www.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](https://blog.kochie.io/images/articles/04-adding-revue-component/screenshot_1.png)

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](https://blog.kochie.io/images/articles/04-adding-revue-component/screenshot_2.png)

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

![Embed Source Code](https://blog.kochie.io/images/articles/04-adding-revue-component/screenshot_3.png)

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.

```html{3} lineNumbers
<div id="revue-embed">
  <form
    action="http://newsletter.kochie.io/add_subscriber"
    method="post"
    id="revue-form"
    name="revue-form"
    target="_blank"
  >
    <div class="revue-form-group">
      <label for="member_email">Email address</label>
      <input
        class="revue-form-field"
        placeholder="Your email address..."
        type="email"
        name="member[email]"
        id="member_email"
      />
    </div>
    <div class="revue-form-group">
      <label for="member_first_name"
        >First name <span class="optional">(Optional)</span></label
      >
      <input
        class="revue-form-field"
        placeholder="First name... (Optional)"
        type="text"
        name="member[first_name]"
        id="member_first_name"
      />
    </div>
    <div class="revue-form-group">
      <label for="member_last_name"
        >Last name <span class="optional">(Optional)</span></label
      >
      <input
        class="revue-form-field"
        placeholder="Last name... (Optional)"
        type="text"
        name="member[last_name]"
        id="member_last_name"
      />
    </div>
    <div class="revue-form-actions">
      <input
        type="submit"
        value="Subscribe"
        name="member[subscribe]"
        id="member_submit"
      />
    </div>
    <div class="revue-form-footer">
      By subscribing, you agree with Revue’s
      <a target="_blank" href="https://www.getrevue.co/terms"
        >Terms of Service</a
      >
      and
      <a target="_blank" href="https://www.getrevue.co/privacy"
        >Privacy Policy</a
      >.
    </div>
  </form>
</div>
```

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](https://tailwindcss.com)

```tsx{5,7,9,16,18,23,24,27,32,40,43,48,55,58,63,70,76,79,85,94,100} lineNumbers
const Revue = () => {
  return (
    <div
      id="revue-embed"
      className="relative max-w-5xl mx-auto px-4 mb-0 pb-10 mt-10"
    >
      <Card>
        <form
          className="p-4 md:p-8 lg:p-14 group"
          action="http://newsletter.kochie.io/add_subscriber"
          method="post"
          id="revue-form"
          name="revue-form"
          target="_blank"
        >
          <div className="flex mb-5 items-center">
            {/* <div className="">{Icon}</div> */}
            <h1 className="text-2xl">
              Like what you see? <br />
              Find out when I sporadically scream into the void...
            </h1>
          </div>
          <div className="grid grid-cols-6 gap-6">
            <div className="col-span-6">
              <label
                htmlFor="member_email"
                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
              >
                Email Address
              </label>
              <input
                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
                placeholder="tony@stark.industries"
                type="email"
                name="member[email]"
                id="member_email"
              />
            </div>

            <div className="col-span-6 sm:col-span-3">
              <label
                htmlFor="member_first_name"
                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
              >
                First Name <span className="optional">(Optional)</span>
              </label>
              <input
                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
                placeholder="Tony"
                type="text"
                name="member[first_name]"
                id="member_first_name"
              />
            </div>
            <div className="col-span-6 sm:col-span-3">
              <label
                htmlFor="member_last_name"
                className="block text-sm font-medium text-gray-700 dark:text-gray-100"
              >
                Last Name <span className="optional">(Optional)</span>
              </label>
              <input
                className="text-black px-3 py-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
                placeholder="Stark"
                type="text"
                name="member[last_name]"
                id="member_last_name"
              />
            </div>
            <div className="col-span-6 md:col-span-1">
              <input
                type="submit"
                value="Subscribe"
                name="member[subscribe]"
                id="member_submit"
                className="w-full p-4 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded transform duration-200 cursor-pointer"
              />
            </div>
            <div className="col-span-6 md:col-span-4 my-auto">
              By subscribing, you agree with Revue&apos;s{' '}
              <a
                target="_blank"
                rel="noreferrer"
                href="https://web.archive.org/web/20221201000000/https://www.getrevue.co/terms"
                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
              >
                Terms of Service
              </a>{' '}
              and{' '}
              <a
                target="_blank"
                rel="noreferrer"
                href="https://web.archive.org/web/20221201000000/https://www.getrevue.co/privacy"
                className="underline text-orange-500 hover:text-orange-600 transform duration-200"
              >
                Privacy Policy
              </a>
              .
            </div>
            <div className="col-span-1 justify-self-end self-center mr-5 hover:fill-orange-600">
              {Icon}
            </div>
          </div>
        </form>
      </Card>
    </div>
  )
}
```

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

GitHub repository: [kochie/blog.kochie.io](https://github.com/kochie/blog.kochie.io)

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

```tsx{14} lineNumbers
const Icon = (
  <svg
    height="30px"
    viewBox="0 0 76 90"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    className=""
  >
    <g id="revue" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <path
        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"
        id="Combined-Shape"
        className="fill-current duration-300 group-hover:fill-[#E15718]"
        fill="white"
      ></path>
    </g>
  </svg>
)
```

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

```tsx lineNumbers
const Card = ({
  children,
}: PropsWithChildren<Record<never, never>>): ReactElement => {
  return (
    <div
      className="
      shadow-2xl rounded-2xl transition ease-in-out duration-200 bg-gray-300
      dark:bg-neutral-600 text-black dark:text-white w-full h-full z-20
    "
    >
      {children}
    </div>
  )
}
```

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

![End result, the Revue sign up form](https://blog.kochie.io/images/articles/04-adding-revue-component/screenshot_4.png)

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