Where to Paste a Form's Embed Code

read
Last updated at:

Overview

If you're using a Klaviyo embedded form, you'll need to paste a short snippet of code on your site in order for your form to display. Where you paste this code will depend on where you would like the embedded form to appear and will vary depending on how your site is built.

This step is unique to embedded forms and is not required for popups or flyouts. Once you paste the embed code on your site, you will be able to edit your form within Klaviyo without having to worry about updating the snippet when you're ready to publish your changes.

If you're not integrated Shopify, BigCommerce, Magento, or WooCommerce, which sync a snippet of code called klaviyo.js through the respective integrations, you will first need to install klaviyo.js on your site in order to publish forms.

Getting the Embed Form Code

First, you'll need to create your embedded form using the steps outlined in our documentation on creating and styling a new form.

Once you have your form styled the way you would like, there are two places you can grab the form's embed code:

  1. In the Behaviors tab.
    2020-06-26_14-07-04.png
  2. When publishing an embedded form, you will see a modal that also prompts you to paste the embed code on your site, as outlined in our article on installing signup forms.
    2018-07-10_13-38-25.png

When you're finished styling your form, publish it, and grab the code to paste on your site. 

Paste the Code on Your Site

Where you should paste the code on your site will depend on where you want the embedded form to appear and will vary by integration. Below, we've outlined some example use cases. 

Shopify Footer

By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Shopify embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list.

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.

Open your footer.liquid theme file. Let's say you would like to have your signup form display above your site's copyright information. Search for the term "copyright" in the file.

Next, on a line above the opening <div> for the copyright code, paste the form embed code.

mceclip5.png

Click Save, and the form will appear in the footer of your site.

Shopify Non-Footer

By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. Learn more.

If you would like to include an embedded form on your Shopify site anywhere besides the footer, you can do so using a Custom HTML block. 

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Customize > Add Section. Here, you will either see the option to add a Custom content or a Custom HTML block. If you see Custom content instead of Custom HTML, add this block and delete the default content that populates. Next, click  Add content > Custom HTML 

Here, you can paste in your embed code.

embed_install.gif

Shopify Password Page

If you'd like to collect newsletter signups before your site is live on a landing page, you can use a Klaviyo form to ensure that these contacts are synced to your Klaviyo newsletter list. To do this, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.

Next, open your password-content.liquid theme file. You will first need to install the Klaviyo form installation code, as the password-content.liquid file does not leverage the theme.liquid file. You can find the code installation instructions and snippet in this article. Add the snippet to the end of the file. 

2018-07-12_13-41-52.png

Please note that any published forms you have in your account will appear on this page once you install the snippet unless you specify for them not to be shown on the specific URL

Next, comment out the default Shopify signup form so that you can replace it with your Klaviyo form.

2018-07-12_13-48-39.png

Finally, paste your Klaviyo embed code above the commented out Shopify embed. Once you save the file, the Klaviyo embedded form will appear on the password page on your site.

2018-07-12_13-49-10.png

BigCommerce 

By default, browsers who subscribe to your newsletter through your BigCommerce signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your BigCommerce embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn more.

WooCommerce

By default, browsers who subscribe to your newsletter through your WooCommerce signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your WooCommerce embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn more.

Magento 2.x

By default, browsers who subscribe to your newsletter through your Magento 2 signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Magento 2 embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn more.

Magento 1.x

By default, browsers who subscribe to your newsletter through your Magento 1 signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Magento 1 embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn more.

x
Was this article helpful?
127 out of 342 found this helpful