How to Install Klaviyo.js to Publish Signup Forms

read
Last updated at:

Overview

Learn how to publish Klaviyo signup forms and track site activity on your website by installing a code snippet in the header or footer of your site. This is a one-time installation that updates automatically when you add new forms or edit existing forms within the Signup Forms tab of your account.

The following integrations automatically install klaviyo.js:

  • Shopify
  • BigCommerce
  • WooCommerce
  • Magento

If you see your integration listed above, you don't need to also install the snippet outlined below. Instead, you can head to our guide to the signup form builder to learn how to build and publish a signup form on your site. You can verify this is set up in the Integrations tab in your account, in the settings for your particular ecommerce platform. 

Klaviyo's BigCommerce integration page, with the setting Automatically install Klaviyo onsite javascript highlighted

Please note that new signup forms will not render for browsers using Internet Explorer. Legacy signup forms will continue to render for those using any type of web browser.

This video walks you through installing Klaviyo signup forms.

 

Install the Signup Form Code Snippet

To install Klaviyo signup forms on your site, first, copy the signup form code snippet below and update "Public API Key" with your Klaviyo Public API Key. This 6-character key can be found in the Accounts > Settings > API Keys tab in your Klaviyo account. Then, paste the updated snippet into your site's theme files.

After updating this snippet with your Klaviyo public API key, paste it into the main theme file of your site, so that the code appears on every page. This allows you to trigger forms on any page on your site. The exact file and location where this code must be placed varies by ecommerce integration.

You can later control the specific pages your form appears on (or does not appear on) using the Behaviors tab.

Verify Your Installation

To verify that you have installed the form snippet correctly, visit the Signup Forms tab and click Install Code Snippet.

The signup forms tab in the Klaviyo app, with a cursor hovering over the Install Code Snippet button

Here, you can enter your site URL and click Check my Install to confirm that klaviyo.js is set up correctly.

Verify your installation modal with a green success message indicating that the klaviyo onsite javascript snippet is installed

A red callout, on the other hand, will indicate that we are unable to verify your installation. Double check the instructions in this guide, or check out our signup form troubleshooting guide. If your site isn't live or is password-protected, we won't be able to verify your installation.

Verify your installation modal with a red warning message indicating that the klaviyo onsite javascript snippet is not installed

After verifying your installation, you can create a new form and publish it on your site.

The Install Code Snippet button will only appear if you've created at least one form. In order to use this modal and verify your installation, first create a form.

Add a Klaviyo Embedded Form to Your Site

Please note that if you are using Shopify, BigCommerce, Magento 2, or WooCommerce, those who sign up through your theme's embedded form are automatically synced to a list in Klaviyo through the integration. You can verify this, and the list these contacts are syncing to, in the Integrations tab of your account. Here, review the settings for your ecommerce platform.

Klaviyo's BigCommerce integration page, with the setting Subscribe customers who accept marketing to a Klaviyo list highlighted

If you would instead like to use a Klaviyo embedded form, there's one extra step to add your form to your site. After you've built and styled your form, when you click Publish, you'll be prompted to verify your installation and add one line of code to your site.

An embed form modal with the code snippet needed to install the form, and a green success message indicating that Klaviyo's javascript has already been installed

Copy this code, then click Publish.  Now, add the code to the theme files of your site where you'd like your form to appear. Your form won't appear until you've added the code to your site and published your form.

In the example below, we want to add an embedded form to the bottom of the page, below the full span image, but above the copyright.

An ecommerce store's homepage, including a footer that does not yet contain a signup form

We know this is the footer of my site. In our theme editor, we'll open the footer theme file and search for the word "copyright". On a new line above the <div> that contains my copyright, paste in the code.

A Shopify store's footer.liquid file, with the search function activated and searching for the word Copyright. The embed form code has been pasted above the copyright code.

After saving the file, we can check our site.

An ecommerce store's homepage, with an embedded form displaying in the footer

Now the form is exactly where we want it. From here, we can use Klaviyo's signup form builder to edit the look and feel of the form going forward. Updates will be published automatically when we click Publish -- no need to replace the embed code.

Additional Resources

x
Was this article helpful?
1536 out of 3217 found this helpful