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.
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 then you don't need to also install the snippet listed lower in this section.
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. The exact file and location where this code must be placed varies by ecommerce integration.
- If you're using Shopify, paste the snippet into your theme.liquid file on a new line above the closing </body> tag.
- If you're using a BigCommerce Stencil theme, navigate to Storefront > Footer Scripts from your BigCommerce Admin panel and paste the snippet into the Footer code box on a new line.
- If you're using a BigCommerce Blueprint theme, paste the code into the Footer.html file on a new line at the end of the file.
If you're using an integration that is not listed above, paste the snippet into your default theme file, so that it appears on every page of your site. This allows you to trigger forms on any page on your site.
You can 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, enter your site URL and click Check my Install. A green success message will confirm that you've installed the form snippet 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
If you're using an 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're prompted to verify your installation and add one line of code to your site.
Copy this code, the click Publish. Now add the code to the theme files of your site where you'd like your form to appear.
Check out our guide on How to Find Where to Paste a Form's Embed Code if you need some help finding where to add your embed form code. Your form won't appear until you've added the code to your site and published your form.
In the example below, I want to add an embedded form to the bottom of of my page, below the full span image, but above the copyright.
I know this is the footer of my site. In my theme editor, I open my footer theme file, and search for the word "copyright". On a new line above the
<div> that contains my copyright, I paste in my code.
I save my file, and check my site.
Now my form is exactly where I want it. From here, I can use Klaviyo's Signup Form Builder to edit the look and feel of my form.