Using Klaviyo with Builder

Klaviyo is a marketing service that allows e-commerce business owners to collect and utilize customer-submitted data for email and SMS campaigns. Builder.io offers form templates that make it easy to integrate an existing form with any Builder project.

Prerequisites

Before you get started, you will need:

An existing form in Klaviyo that is published and ready for submissions. If you're logged in to Klaviyo, the following link will Create a form automatically.
A Builder project with a Page or Section model that is ready for content to be placed.

Choose the right template

Builder provides two templates for Klaviyo forms:

Generic Embed: You have already designed your form with Klaviyo's Form Builder and you're ready to place it on your page. This type is ideal if you don't want to edit the form's design in Builder.
Native Embed: You would like to design your form inside Builder's Visual Editor. This option gives you more control over your design and is faster to load.

Using the Klaviyo Generic Embed

From the Insert tab, under the Import from section, select Apps.

Select the Klaviyo Generic Embed.

Screenshot showing the Insert tab with the Import options open and an arrow on the Apps icon. Click on the Apps icon to choose the integration. This image shows the Klaviyo Generic Embed tile.

Drop the app template anywhere on the page.

Navigate to the Options tab to add the Company ID, also known as the Public API key, and your Form ID.

The following screenshot shows the Options for the Klaviyo block.

Screenshot showing the Options tab with the Klaviyo Block Options. This is where you add your form ID and Company ID, which you find in Klaviyo.

To find your Form ID, go to https://www.klaviyo.com/forms and select the Embedded Form. The Form ID is the alphanumeric string at the end of the URL in the address bar, for example LJgRxQ in https://www.klaviyo.com/forms/LJgRxQ .

To find your 6-character Company ID/Public API key, go to the Accounts > Settings > API Keys tab in your Klaviyo account.

Next, refresh the Builder Visual Editor to see your form. You can click the circular arrow next to your project's URL at the top of the Visual Editor, or you can refresh the whole browser page.

Image of Visual Editor with placeholder Klaviyo form in working area.

Now you can use Builder to A/B test and target your form for different audiences.

Native Embed

From the Insert tab, under the Import from section, select Apps. Choose the Klaviyo Native Embed.

Drop the app template anywhere onto the page.

To connect to your Klaviyo form, navigate to the Options tab to add the List ID. You can find the List ID by navigating to https://www.klaviyo.com/lists, selecting a list, and viewing the Settings page for that list.

For more detailed help in finding your List ID in Klaviyo, check out the Klaviyo documentation.

Image showing where the List ID field is in the Options tab.

Using Builder, you can now completely customize the look and feel of your form adjusting styling and editing the form inputs.

Was this article helpful?