Add a Klaviyo Sign Up Form to a Facebook Page

Overview

This guide will explain how to embed a Klaviyo sign up form as it's own separate tab of a Facebook Page. For a live example of this feature, check out Klaviyo's Facebook Page. Here, you will see a Newsletter tab that demonstrates what this guide will help you create.

Before you start, you will want to tackle the following two steps first:
  1. Create a Facebook Page for your business or organization, if you don't already have one
  2. Choose which Klaviyo list you want new subscribers to be added to and customize this list's subscribe page so you can embed this form in Facebook

Add Support for Static HTML

In order to add a new tab to your Facebook Page, you will need to use an app that provides support for Static HTML. For the purposes of this example, we will feature how to use the app "Static HTML: iframe tabs" as this is one of the most heavily utilized apps for this purpose (and it's free!).

First, go to https://apps.facebook.com/static_html_plus/. Next, click Add Static HTML to a Page and choose a page. 
666750

This will automatically create a new tab on the Facebook Page you selected. Next, you will be taken to a window where you can add content to this new tab.

Add Your Klaviyo Subscribe Page Snippet

After you have used a Static HTML application to create a new tab for your Facebook Page, all you have to do is copy and paste a short snippet of code that will render as your customized Klaviyo subscriber form.

You will want to use a subscribe page here instead of customizing a simple embedded sign up form. Click on your newsletter list, and then navigate to the Subscribe Page tab. Here, you will be able to customize the style of this full-page form as well as add custom fields.

Next, you will need to copy/paste the following snippet of code into the Content section of the HTML tab you created in Facebook:
<iframe id="klaviyo_subscribe_page" src="SUBSCRIBE_URL&embed=1" seamless="seamless" width="100%" scrolling="no" ></iframe>
<script type="text/javascript" src="//a.klaviyo.com/media/js/lib/iframeresizer.js"></script>
<script type="text/javascript">iFrameResize({}, '#klaviyo_subscribe_page');</script>

Where you see SUBSCRIBE_URL you will want to insert the subscribe URL for the subscribe page you created in Klaviyo. This URL will appear next to a Copy URL button; if you can't find it, click here.

Here's what this window should look like if you're using the "Static HTML: iframe tabs" app:

666753

To rename this tab, click Actions and select Edit name and image. You may need to authenticate with Facebook before you can complete this step. We recommend naming this tab "Newsletter."

666762

Click Preview to see what this embedded form will look like. Last, click Save & Publish and head to your Facebook Page to view your new tab. You should see something like this:

666765
 
Was this article helpful?
1 out of 1 found this helpful