Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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.

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.

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.

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.

From the Insert tab, under the Import from section, select Apps. Choose the Klaviyo Native 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 Native Embed tile.

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.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy