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.
The Page Tabs feature is only available to Pages with 2000 or more fans, or pages managed by whitelisted apps. Please see Facebook's documentation for more details.
Before you start, you will want to tackle the following two steps first:
- Create a Facebook Page for your business or organization, if you don't already have one, and make sure that you are logged into your business account rather than your personal account
- 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.
First, go to https://apps.facebook.com/static_html_plus/. Next, click Add Static HTML to a Page and choose a page.
You can only create one Static HTML Page per Facebook Page using this app. If you don't see your Facebook Page in the dropdown, then you've already created a Static HTML Page using this app. Navigate to your Facebook Page and check your tabs for a green Edit HTML button.
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. Copy the subscribe URL.
You're going to add
&embed=1 to the end of the url. Your subscribe URL should look something like this:
Add this URL to the code snippet below where you see
YOUR_SUBSCRIBE_URL_HERE. Then, copy/paste the following snippet of code into the Content section of the HTML tab you created in Facebook:
Here's what this window should look like if you're using the "Static HTML: iframe tabs" app:
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."
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: