How to Connect your Beehiiv newsletter to a Framer Form

Are you looking to grow your newsletter subscribers through your website? In this post we’re going to look into how you can easily connect your Beehiiv newsletter to a form on your Framer website. This means when someone fills out a form on your site, they'll automatically be added to your newsletter list. Pretty cool, right?

What You'll Need Before We Start

To set this up, we'll use three different tools. Don't worry, it's simpler than it sounds!

Here's what you need:

• Beehiiv - This is where you manage your newsletter. You can use any Beehiiv plan, even the free one. If you don't have an account yet, you can sign up for free at Beehiiv.com.

• Framer - This is the tool you probably already used to build your website or are planning to use for an upcoming project. You'll need a Framer account and a form on your site. Don't have an account? No problem! You can create one for free at Framer.com.

• Make - this is an automation software which will let us connect Beehiiv and Framer. It's what makes the magic happen! Head over to the Make website to create an account for free, if you haven’t got one yet.

Now that we've got the basics covered, let's dive in and set up this awesome connection!

Step 1 - Setting up your Beehiiv account

First, we need to get two important pieces of information from your Beehiiv account - the API Key and the Publication ID for your newsletter.

Here's how to find them:

1. Log into your Beehiiv account

2. Go to your Dashboard

3. Click on Settings, then Integrations

On this page, you'll see two different sections:

1. Your Publication ID (at the top):

   • This is like your newsletter's unique code

   • Look for the "API V2" section (ignore V1, it's an old one!)

   • Copy this number and keep it safe

2. Your API Key (at the bottom):

   • Click the "New API Key" button

   • Give it a name (like "Framer x Beehiiv Connection")

   • Your API Key (a long code with letters and numbers) will be generated. Copy it to your clipboard.

   • IMPORTANT: You can only see this API Key once, so make sure to keep it safe!

Quick Tip: If you're new to Beehiiv, you might need to verify your account first. Just follow the steps they give you, then come back here.

To sum up, you should now have two important pieces of info:

1. Your Publication ID (from API V2)

2. Your API Key

If you feel stuck at any time or you’re not sure where to find the Integrations page, please check the Beehiiv blog or contact their support team.

Step 2 - Building your Framer form

Now that we have all the info we need from Beehiiv, let's set up the form on your Framer website before we create the connection between the two.

Framer recently introduced a new Form builder which lets you build custom forms. These forms can send information to different places, like email, Google Sheets, or something called a Webhook.

Webhook is what we’ll need to use for this automation. Think of it as a special messenger tool that listens to your form and each time someone submits your form it can send a “notification” to different websites with the info typed in the form. This is how we’ll tell Beehiiv that a new subscriber needs to be added to your newsletter list.

We won't go into all the details of creating a form here, as this guide is mostly about connecting your form to Beehiiv. But if you need help creating a form, check out our previous post and video tutorial on how to create a form with Framer.

Before moving to the next step, make sure you've created your form in your Framer project. It doesn't need to be fancy but it needs to include at least an “email” field.

Step 3 - Connecting Beehiiv and Framer using Make

Now comes the exciting part - we're going to connect everything together! We'll use Make to create the connection between your Framer form and your Beehiiv newsletter. It might sound tricky, but we'll break it down into easy steps.

Make is an online tool with which we can build connections between different apps. They call these connections "scenarios." Think of it as creating a bridge between your website and your newsletter!

Here’s what we need to do to build our scenario on Make:

1. Create a first module with a Webhook

   • Search for “Webhooks” in the App/Modules list

   • Choose “Custom Webhook”

   • Click the “Create a Webhook” and give it a name, then hit “Save”

   • At that moment the Webhook will start listening for the data, so you need to:

     • Click on the “copy address to clipboard” button to copy the webhook address

     • Go to Framer and paste it in the Webhook field in the settings for your form

     • Preview your website and fill out the form with your email address and submit it

   • Once you’ve done that, the Webhook will know in which format to expect the data from your form.

2. Add a second module for Beehiiv

   • Search for Beehiiv in the App/Modules list

   • Pick “Create a Subscriber” action in the list (you may need to click on “see more” first”)

   • Follow the steps to connect your Make account to your Beehiiv account using the API Key and Publication ID from the first step.

   • Click on the “Email Address” field and it’ll show you the data coming from the Webhook

   • Select the “Email” data from the Webhook

   • Give your scenario a name and save it

3. Test your form

   • Go to your website and sign up using the form

   • Wait a few minutes, then check your Beehiiv account

   • You should see your email added to your subscriber list!

And that’s it! You’ve connected your Framer account to your Beehiiv account!

Now, whenever someone signs up on your Framer website, their email will automatically appear in your Beehiiv subscriber list. No need to manually import subscribers every now and then.

If it’s a bit too technical for you or if you get stuck at any point consider getting help from a Framer developer or reach out to our partner agency 88 Pixels who will be able to set this up for you.