Resources

×

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

Home

Forum

Blog

Github

Login

Signup

Made in Builder

Klaviyo app template

Builder offers a simple solution to integrate with Klaviyo allowing you to collect data about your customers to deliver memorable experiences, drive more sales, and create stronger relationships via emails and messaging.

You have two ways to add a Klaviyo app template to your Builder content:

  1. Using the Klaviyo native embed template
  2. Using the Klaviyo generic embed template 

When to use the native embed template:

  • Performance - this template loads much faster than the standard JavaScript embed, as it is native to Builder using Klaviyo’s APIs. 

When to use the generic embed template:

  • Existing Klaviyo forms - If you have existing Klaviyo forms you don’t want to modify or recreate in Builder
  • More functionality - The Klaviyo embedded form contains lots of capabilities out of the box. Builder’s native embed template covers many of the most popular use cases. You can acquire email addresses, names, and/or phone numbers, and add them to a single list. If you you're looking for additional capabilities, then you should use the generic embed. 

Klaviyo native embed template

Click Import from Apps which will open a popup and choose Klaviyo native embed form.

Drop the app template anywhere onto the page.

The app will require some information to properly display information. On the right sidebar, navigate to the Options tab where it will require you to add the List Id. You can find the List id by navigating to https://www.klaviyo.com/lists, selecting a list and then viewing the Settings page for that list.

After entering in the required data, your form will be connected with Klaviyo!

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

Klaviyo generic embed template

👉Tip: Learn more about Klaviyo’s embedded form here

Click Import from Apps which will open a popup and choose Klaviyo generic embed form.

Drop the app template anywhere onto the page.

The app will require some information to properly display information. On the right sidebar, navigate to the Options tab where it will require you to add the API key, Form Id, and Company Id. You can find a list id by navigating to https://www.klaviyo.com/lists, selecting a list and then viewing the Settings page for that list.

API key: This is your 6-character public API key from the Accounts > Settings > API Keys tab in your Klaviyo account.

Form Id: You can find this in your browser's URL bar when viewing the form in Klaviyo, it looks like: https://www.klaviyo.com/forms/<formId>/reports/overview where <formId> is the value you enter here.

Company Id: After entering in the required data, refresh your page, and your form will be connected with Klaviyo!

While the look and feel of your form cannot be modified in Builder -- you will manage this in Klaviyo -- you can use Builder to A/B test how the form appears and/or target it at different audiences.

Was this article helpful?