How to install Klaviyo.js to publish sign-up forms

read
Last updated at:

You will learn

Learn how to publish Klaviyo sign-up forms and track site activity on your website by installing a code snippet, known as Klaviyo’s onsite JavaScript, or Klaviyo.js. This is a one-time installation in the header or footer of your site, and does not need to be repeated when you add or change sign-up forms. 

Before you begin

Klaviyo.js is automatically installed for many of the major ecommerce platforms that integrate with Klaviyo, and is the same code snippet that enables Active on Site tracking. If you see your integration listed below, you do not need to also install the snippet outlined to publish, and the forms you create from our built-in editor will sync all data into Klaviyo.

Instead, you can head to getting started with sign-up forms to learn how to build and publish a sign-up form on your site. 

Learn about Klaviyo.js and your ecommerce platform:

  • Shopify
    Klaviyo.js adds automatically through the integration or through the Klaviyo app embed in Shopify, if you enable it. If you integrated before April 19, 2022, you did not have the Klaviyo app embed option, but can now enable it at any time. Learn more about the app embed and onsite tracking for Shopify
  • WooCommerce
    Klaviyo.js adds automatically when you integrate with WooCommerce, and you can make sure that you’ve completed all steps by reading our WooCommerce integration guide. To test your onsite JavaScript, click the account dropdown in your Klaviyo account and click Setup Web Tracking. Then, find the step where you can enter your site URL in the box, and follow the instructions to test your tracking. 
  • BigCommerce
    Make sure you’ve checked the option on your integration settings page to Automatically add Klaviyo onsite JavaScript. Then, follow the steps to test your onsite JavaScript
  • Magento 1
    Klaviyo.js adds automatically when you integrate with Magento 1, and you can make sure that you’ve completed all steps by reading our Magento 1 integration guide. To test your onsite JavaScript, click the account dropdown in your Klaviyo account and click Setup Web Tracking. Then, find the step where you can enter your site URL in the box, and follow the instructions to test your tracking. 
  • Magento 2
    Klaviyo.js adds automatically when you integrate with Magento 2, and you can make sure that you’ve completed all steps by reading our Magento 2 integration guide. To test your onsite JavaScript, click the account dropdown in your Klaviyo account and click Setup Web Tracking. Then, find the step where you can enter your site URL in the box, and follow the instructions to test your tracking. 

bigcommerce integration settings highlighting box checked off to enable automatic adding of Klaviyo.js

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

How-to video 

This video walks you through installing Klaviyo sign-up forms.

 

Installing the sign-up form code snippet

1. In your Klaviyo account, navigate to the Sign-up forms tab in Klaviyo and click Install Code Snippet in the upper right corner.

signup forms tab showing install code snippet clicked

The Install Code Snippet button will only appear if you have created at least one form. In order to use this modal and verify your installation, first create a form so that you have something to publish on your site.

2. Copy the code in the box and paste it into the main theme file of your site, so that the code appears on every page. 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 of a specific form.

3. To verify that you have installed the form snippet correctly, enter your site URL under Step 2 in the box, then click Check my Install to confirm that klaviyo.js is set up correctly.

A green callout will show that sign-up forms are successfully installed on your site.

green callout showing the klaviyo.js installation was sucessful

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 guide on troubleshooting sign-up forms. If your site isn't live or is password-protected, Klaviyo won't be able to verify your installation.

red callout showing that the klaviyo.js installation was unsuccessful

After verifying your installation, you'll be able to publish forms on your site.

Note that if you're using BigCommerce, you must take an extra step to add a Klaviyo embedded form to your site

Additional resources

x
Was this article helpful?
2539 out of 5440 found this helpful