Install Klaviyo.js to Publish Signup Forms

read
Last updated at:

Overview

This guide walks through installing a code snippet in the header of your site that allows you to publish signup forms from your Klaviyo account to 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. 

2019-10-17_14-13-29.png

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

Some integrations, such as Shopify and BigCommerce, automatically install klaviyo.js when you set up our built-in integration. Additionally, if you've installed the Klaviyo plugin with WooCommerce or Magento, you automatically have klaviyo.js installed as well. If you've already enabled klaviyo.js, you don't need to follow the installation instructions 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.

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. Then, paste the updated snippet into your site's theme files.

This code block automatically populates line 3 with the Klaviyo public API key for the Klaviyo account you are currently logged in to. If you use multiple Klaviyo accounts, check that the correct public API key has been added to the code block. If you see "Public API Key", then your public API key has not loaded, and you'll have to manually update it. Copy your 6-character public API key from the Accounts > Settings > API Keys tab in your Klaviyo account.

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.

2019-10-17_14-10-44.png

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

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.

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

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.

2019-10-14_13-21-05.png

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.

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.

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.

After saving the file, we can check our site.

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.

Learn more about how to find where to paste a form's embed code.

x
Was this article helpful?
218 out of 493 found this helpful