Where to Paste a Form's Embed Code

read
Last updated at:

Overview

When using a Klaviyo embedded form, you 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 want 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 can 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 with 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.

Get the Embed Code

First, 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'd like, there are two places you can retrieve 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

Then, publish your form and copy the code snippet to paste on your site. 

Paste the Code on Your Site

Where you should paste the code on your site depends on where you want the embedded form to appear and varies by integration. Below, we've outlined some example use cases. Select the platform you use from the sidebar menu to jump to instructions for that platform.

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 how to connect your BigCommerce signup forms to Klaviyo with Stencil Themes and Blueprint Themes

If you’d like to replace your BigCommerce footer form with a Klaviyo form, or if you’d like to add a Klaviyo embedded form elsewhere on your site, you have multiple options, outlined below. 

Use the Page Editor

From your BigCommerce dashboard, navigate to Storefront > Webpages and select the page where the embedded form should appear. Select Edit from the Action menu. 

BC_edit_page_.png

In the Page Content section, click HTML to open the source code editor. Paste in the form’s embed code, then click Update and save your changes.

BC_edit_HTML_in_page_content_.png

Use the Theme Editor

From your BigCommerce dashboard, navigate to Storefront > My Themes. From the Current Theme section, click Customize

BC_Customize_theme.png

Select the page where you’d like to add the embedded form and locate the section on the page where you plan to add it. Drag in an HTML block, and paste your form’s embed code into the block editor. Save the block, then save your changes. 

BC_add_form_HTML_block.gif

Insert into Your Theme Files 

From your BigCommerce dashboard, navigate to Storefront > My Themes. From the Current Theme section, click the Advanced dropdown and click Edit Theme Files. This opens the web editor.

bc-edit-theme-files.png

If you're working with a default theme, the option to Edit Theme Files will not appear. First, make a copy of the theme, then make your edits to the copy. Any edits you make only apply to the theme you are editing. If you change your theme in the future, your edits will not automatically move to your new theme.

Navigate to the file that contains the source code for the section where you want to embed a form. Locate the section in the code where the form should appear, and paste the embed code there. Learn more about embedding a form on your BigCommerce site.

Shopify

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.

However, if you are using a custom theme, you may need to add a small snippet of code to your Shopify form to connect it to Klaviyo.

Shopify Footer

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

Open your footer.liquid theme file. In this example, your signup form will 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

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 your store is not yet live and you’d like to collect newsletter signups on your Shopify store’s password page, you can use a Klaviyo form to ensure that these contacts sync 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 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. 

Manually_adding_JS.png

Please note that any published popup and flyout forms 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. To comment out code in liquid, surround the code with the following tags: {% comment %} and {% endcomment %}. 

Comment_in_Shopify_.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 of your site.

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

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 how to sync a WooCommerce signup form to a Klaviyo list.

If you’d like to add a Klaviyo embedded form on your site, open your WooCommerce dashboard and click Customize Your Site. Navigate to the page where you’d like to add the embedded form. Click Add a widget > Custom HTML and paste the embed code into the content section. When you’re finished, use the Publish button to publish the changes. 

WooCommerce_add_HTML_widget.gif

Other platforms 

For a Klaviyo embedded form to work, two code snippets must be present on your page: Klaviyo’s Javascript, and the form’s embed code. Many of Klaviyo’s default integrations (e.g., Magento, Magento 2) automatically inject Klaviyo’s .js into your site. Check your platform’s integration settings to ensure this option is selected. 

If your platform doesn’t have a native Klaviyo integration, you can add our .js manually by following these instructions

Once Klaviyo’s .js is installed, you can paste the form’s embed code into your site’s HTML/source code wherever you’d like it to appear. If you aren’t comfortable editing code on your site and would prefer to have an expert do it for you, contact a Klaviyo Partner

Additional Resources

x
Was this article helpful?
168 out of 457 found this helpful