<!doctypehtml><html dir=ltr lang=en-US><meta charset=utf-8><title>
   How to Install Klaviyo.js to Publish Signup Forms – Klaviyo - Help Center
  </title><meta content=authenticity_token name=csrf-param><meta content=hc:meta:server:tYRJ1EIrLp7MKTWniangKxID0kfCmsvOLAOkO+DyTNEUdH/MBbldsHQ+sfsI08Zkw8XGPJCwE2C5R01BIpE0Mw== name=csrf-token><meta content="Overview This guide walks through installing a code snippet in the header of your site that allows you to publish signup forms from your..."name=description><meta content=https://theme.zdassets.com/theme_assets/1614414/6bf8ffa2ff71b10975de237e374ce30d14b26d71.png property=og:image><meta content=website property=og:type><meta content="Klaviyo - Help Center"property=og:site_name><meta content="How to Install Klaviyo.js to Publish Signup Forms"property=og:title><meta content="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 installatio..."property=og:description><meta content=https://help.klaviyo.com/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms property=og:url><link href=https://help.klaviyo.com/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms rel=canonical><link href=https://help.klaviyo.com/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms hreflang=en rel=alternate><link href=//static.zdassets.com/hc/assets/application-79172500fb4dbec2484043d570946543.css id=stylesheet media=all rel=stylesheet><link href=//static.zdassets.com/hc/assets/theming_v1_support-cf937686d5b6669242017892da7bad78.css media=all rel=stylesheet><link href=//p13.zdassets.com/hc/theming_assets/1614414/5131267/style.css?digest=4398449551629 rel=stylesheet><link rel="shortcut icon"href=//theme.zdassets.com/theme_assets/1614414/d9fc7e4d5e6680c16d225fd4c17d1dac993cb029.png type=image/x-icon><script src=//static.zdassets.com/hc/assets/jquery-d5395f0b7ac5027403fc17855c46dbfc.js></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-30451006-15', 'auto');
ga('send', 'pageview');</script><meta content=width=device-width,initial-scale=1.0 name=viewport><meta content=summary_large_image name=twitter:card><meta content=@klaviyo name=twitter:site><meta content=https://d3k81ch9hvuctc.cloudfront.net/company/P4K8aP/images/74eb2265-ebb7-4e87-851b-419893ddb295.jpeg name=twitter:image><link href=//fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i rel=stylesheet><link href=//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css rel=stylesheet><link href=https://vjs.zencdn.net/5.2.1/video-js.css rel=stylesheet><script src=//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script><script src=//theme.zdassets.com/theme_assets/1614414/1bef149aedeafff7a797e799cfba168bed0d6dc6.js></script><script src=//theme.zdassets.com/theme_assets/1614414/90c942dd704da2f0c08a796163832b972ce79bd6.js></script><script crossorigin integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script><script src=//theme.zdassets.com/theme_assets/1614414/da5e24c3b63c18003c379af5d6b2d7ecdb62e812.js></script><script src=https://try.abtasty.com/75ab48cb56a7908237072222e677ffc7.js></script><script src=//p13.zdassets.com/hc/theming_assets/1614414/5131267/script.js?digest=4398449551629></script><script async src=/cdn-cgi/bm/cv/669835187/api.js></script><body><div class=layout><header class="topbar container"data-topbar><div class=topbar__inner><div class=topbar__logo-wrapper><a class=topbar__logo href=/hc/en-us title=Home> <img alt=Logo class=logo src=//theme.zdassets.com/theme_assets/1614414/775919438463fa225a1d0783307a8775a4fcb05c.png> </a><span class=topbar__help-center-name> Help Center </span></div><div class=topbar__buttons><button class="btn btn--topbar btn--toggle-search"data-toggle-search><span class="fa fa-search"> </span></button><button aria-label="toggle menu"class="tcon tcon-menu--xcross"data-toggle-menu type=button><span aria-hidden=true class=tcon-menu__lines> </span> <span class=tcon-visuallyhidden> toggle menu </span></button></div><div class="search-box search-box--topbar"data-search-topbar><form accept-charset=UTF-8 action=/hc/en-us/search autocomplete=off class=search data-instant=true data-search role=search><input name=utf8 type=hidden value=✓><input aria-label=Search autocomplete=off id=query name=query placeholder=Search type=search><input name=commit type=submit value=Search></form></div><div class=search-mobile data-search-mobile><div class=container-inner><form class="search-box search-box--mobile"accept-charset=UTF-8 action=/hc/en-us/search autocomplete=off data-instant=true data-search role=search><input name=utf8 type=hidden value=✓><input aria-label=Search autocomplete=off id=query name=query placeholder=Search type=search><input name=commit type=submit value=Search></form></div></div><div class=topbar__controls data-menu><a class=topbar__link href=https://community.klaviyo.com/> Community </a><a class=topbar__link href=https://academy.klaviyo.com/> Academy </a><a class=topbar__link href=https://www.klaviyo.com/> Back to Klaviyo </a><button class="btn btn--topbar btn--toggle-search btn--toggle-search hidden"data-toggle-search id=btn-toggle-search><span class="fa fa-search"> </span></button><a class="btn btn--topbar submit-a-request"href=/hc/en-us/requests/new> Contact Us </a><a title="Opens a dialog"class=login data-auth-action=signin href=/hc/en-us/signin?return_to=https%3A%2F%2Fhelp.klaviyo.com%2Fhc%2Fen-us%2Farticles%2F360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms&locale=en-us rel=nofollow role=button> Sign in </a></div></div></header><main role=main><section class="hero-unit article-hero-unit container"style="background-image: url(//theme.zdassets.com/theme_assets/1614414/1afd44a9175b0d5811f49138bc9fb45e88263e7a.png);"data-hero-unit id=header-background-image><div class="container-inner hero-unit__content"data-search-box><h1 class=hero-unit__title id=article-title>How to Install Klaviyo.js to Publish Signup Forms</h1><p id=reading_time><em> <span class=eta> </span> read </em> <br> <em> Last updated at: <time data-datetime=calendar datetime=2021-04-01T23:48:39Z title=2021-04-01T23:48:39Z> April 01, 2021 23:48 </time> </em></div></section><div class="container article-page"><div class=container-inner><div class=article-page__container><div class=breadcrumbs-wrapper id=breadcrumbs-wrapper><ol class=breadcrumbs><li title="Klaviyo - Help Center"><a href=/hc/en-us> Klaviyo - Help Center </a><li title="Signup Forms"><a href=/hc/en-us/categories/360000190711-Signup-Forms> Signup Forms </a><li title="About Signup Forms"><a href=/hc/en-us/sections/360000443092-About-Signup-Forms> About Signup Forms </a></ol></div></div><div class=article-page__container><div class="row clearfix"><div class="column column--sm-8 column--md-9"id=main_article_container><article class="article clearfix"itemscope itemtype=http://schema.org/Article><div class="article__body markdown"itemprop=articleBody><h2>Overview</h2><p>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 <strong> Signup Forms </strong> tab of your account.<p>The following integrations automatically install klaviyo.js:<ul><li>Shopify<li>BigCommerce<li>WooCommerce<li>Magento</ul><p>If you see your integration listed above, you don't need to also install the snippet outlined below. Instead, you can head to our <a href=https://help.klaviyo.com/hc/en-us/articles/360002050572-The-Signup-Form-Builder> guide to the signup form builder </a> to learn how to build and publish a signup form on your site. You can verify this is set up in the <strong> Integrations  </strong> tab in your account, in the settings for your particular ecommerce platform. <p><img alt=2019-10-17_14-13-29.png src=/hc/article_attachments/360040958752/2019-10-17_14-13-29.png><div class="bs-callout bs-callout-default"><p>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.</div><p>This video walks you through installing Klaviyo signup forms.<p><script async src=https://fast.wistia.com/embed/medias/q4mgnm06mj.jsonp></script> <script async src=https://fast.wistia.com/assets/external/E-v1.js></script><div style="padding: 56.25% 0 0 0; position: relative;"class=wistia_responsive_padding><div style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;"class=wistia_responsive_wrapper><div class="wistia_embed wistia_async_q4mgnm06mj videoFoam=true"style="height: 100%; position: relative; width: 100%;"><div style="height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; transition: opacity 200ms; width: 100%;"class=wistia_swatch><img style="filter: blur(5px); height: 100%; object-fit: contain; width: 100%;"alt src=https://fast.wistia.com/embed/medias/q4mgnm06mj/swatch></div></div></div></div><div class=klaviyo-form-PxL5m2> </div><h2>Install the Signup Form Code Snippet</h2><div class="bs-callout bs-callout-default"><p>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 <a href=https://help.klaviyo.com/hc/en-us/articles/360002050572-The-Signup-Form-Builder> guide to the signup form builder </a> to learn how to build and publish a signup form on your site.</div><p>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.<p>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 " <em> Public API Key </em> ", 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  <a href=https://www.klaviyo.com/account#api-keys-tab rel=noopener target=_blank> Accounts > Settings > API Keys </a> tab in your Klaviyo account. <img alt=mceclip0.png src=/hc/article_attachments/360091153331/mceclip0.png><div><script>// <![CDATA[
var accountId = 'Public API Key'; try { var cookieAccountId = _learnq.identify().AccountID; accountId = (cookieAccountId && cookieAccountId != '9BX3wh' ? cookieAccountId : 'Public API Key');} catch(err) {}; var installcode = "<pre class=\"line-numbers\" data-line=\"3\"><code class=\"language-go\">" + "&lt;script type=\"text/javascript\" async \n src=\"https://static.klaviyo.com/onsite/js/klaviyo.js?company_id="+accountId+"\"&gt;&lt;/script&gt;" + "</code></pre>\n"; document.write(installcode);
// ]]></script></div><p>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.<div class="bs-callout bs-callout-default"><p>You can later control the specific pages your form appears on (or does not appear on) using the <strong> <a href=https://help.klaviyo.com/hc/en-us/articles/360002050572#edit-form-behavior> Behaviors tab </a> </strong> .</div><h2>Verify Your Installation</h2><p>To verify that you have installed the form snippet correctly, visit the <strong> Signup Forms  </strong> tab and click  <strong> Install Code Snippet. </strong><p><img alt=2019-10-17_14-10-44.png src=/hc/article_attachments/360040969751/2019-10-17_14-10-44.png><p>Here, you can enter your site URL and click  <strong> Check my Install </strong> to confirm that klaviyo.js is set up correctly.<p class=wysiwyg-text-align-center><img src=/hc/article_attachments/360003174691/mceclip1.png><p>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 <a href=https://help.klaviyo.com/hc/en-us/articles/115005249348-Signup-Form-Troubleshooting> signup form troubleshooting guide </a> . If your site isn't live or is password-protected, we won't be able to verify your installation.<p class=wysiwyg-text-align-center><img src=/hc/article_attachments/360003174731/mceclip2.png><p>After verifying your installation, you can  <a href=https://help.klaviyo.com/hc/en-us/articles/360002049952> create a new form </a> and publish it on your site.<h2>Add a Klaviyo Embedded Form to Your Site</h2><div class="bs-callout bs-callout-default">If you're using BigCommerce, we have a <a href=https://help.klaviyo.com/hc/en-us/articles/360022594552> specific guide on Adding an Embedded Form to Your BigCommerce site </a> .</div><p>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  <strong> Integrations </strong> tab of your account. Here, review the settings for your ecommerce platform.<p class=wysiwyg-text-align-center><img alt=2019-10-14_13-21-05.png src=/hc/article_attachments/360040677292/2019-10-14_13-21-05.png><p>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  <strong> Publish, </strong> you'll be prompted to verify your installation and add one line of code to your site.<p class=wysiwyg-text-align-center><img height=476 src=/hc/article_attachments/360007423412/mceclip1.png width=563><p>Copy this code, then click  <strong> Publish.  </strong> Now, add the code to the theme files of your site where you'd like your form to appear.  <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;"> Your form won't appear until you've added the code to your site and published your form. </span><p>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.<p><img src=/hc/article_attachments/360007423932/mceclip2.png><p>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 <code class=language-go>
             &LTdiv>
            </code> that contains my copyright, paste in the code.<p><img src=/hc/article_attachments/360007484211/mceclip5.png><p>After saving the file, we can check our site.<p><img src=/hc/article_attachments/360007424412/mceclip6.png><p>Now the form is exactly where we want it. From here, we can use Klaviyo's <a href=https://help.klaviyo.com/hc/en-us/articles/360002050572-The-Signup-Form-Builder> signup form builder </a> to edit the look and feel of the form going forward. Updates will be published automatically when we click  <strong> Publish </strong> -- no need to replace the embed code.<p>Learn more about <a href=https://help.klaviyo.com/hc/en-us/articles/360006897412-How-to-Find-Where-to-Paste-a-Form-s-Embed-Code> how to find where to paste a form's embed code. </a><h2>Troubleshooting</h2><p>Please review <a href=https://help.klaviyo.com/hc/en-us/articles/115005249348-Signup-Form-Troubleshooting> our guide here </a> on troubleshooting signup form issues.</div><div class=article__attachments></div></article></div></div></div></div></div><div class="voteblock voteblock-hide"id=voteblock><div class=topright id=feedback-close>x</div><div class=article-votes__question>Was this article helpful?</div><div class=article-votes__controls><a class="btn btn--default article-vote article-vote--up"data-label="1075 out of 2294 found this helpful"aria-selected=false data-helper=vote data-id=360002035871 data-item=article data-selected-class=article-vote--voted data-type=up data-upvote-count=1075 data-value=null data-vote-count=2294 data-vote-sum=-144 data-vote-url=/hc/en-us/articles/360002035871/vote href=# rel=nofollow role=button title=Yes> </a><a class="btn btn--default article-vote article-vote--down"data-label="1075 out of 2294 found this helpful"aria-selected=false data-helper=vote data-id=360002035871 data-item=article data-selected-class=article-vote--voted data-type=down data-upvote-count=1075 data-value=null data-vote-count=2294 data-vote-sum=-144 data-vote-url=/hc/en-us/articles/360002035871/vote href=# rel=nofollow role=button title=No> </a></div><div class=article-votes__count><span data-label="1075 out of 2294 found this helpful"class=article-vote-label data-helper=vote data-id=360002035871 data-item=article data-type=label data-upvote-count=1075 data-value=null data-vote-count=2294 data-vote-sum=-144 data-vote-url=/hc/en-us/articles/360002035871/vote> 1075 out of 2294 found this helpful </span></div></div></main></div><script>var hidden = false;
  
document.addEventListener('scroll', function(){   
var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight'
  
var currentPage = window.location.href;
var voteblock = document.getElementById('voteblock');


var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

if (sessionStorage.getItem('url') != currentPage && sessionStorage.alreadyClicked == "true") {

  sessionStorage.alreadyClicked = "false"
  sessionStorage.storeItem('url', currentPage);
  hidden = false;
  } else if (sessionStorage.getItem('url') == currentPage){ 
	sessionStorage.alreadyClicked = "true"
  hidden = true;
  };

if (currentPage == "https://help.klaviyo.com/hc/en-us/articles/115005078867-How-to-Cancel-Your-Klaviyo-Account" || currentPage == "https://help.klaviyo.com/hc/en-us/articles/115001002272-How-to-Contact-Support") {

voteblock.style.display = "none";
hidden = true;
  
} else if (hidden == true || sessionStorage.areadlyClicked == "true") {
  voteblock.style.display = "none";
} else if (percent > 10 && hidden == false) {

voteblock.style.display = "block";
  
  }}); 

document.getElementById('feedback-close').addEventListener('click', function(){ 
sessionStorage.alreadyClicked = "true";
voteblock.style.display = "none";
hidden = true;
}); 
document.getElementsByClassName("article-vote--up")[0].addEventListener('click', function(){ 
sessionStorage.alreadyClicked = "true";
hidden = true;
voteblock.classList.add("voteblock-success");

voteblock.textContent = 'Thanks! We appreciate the feedback.';
setTimeout(function(){voteblock.style.display = "none";; }, 3000);

});
document.getElementsByClassName("article-vote--down")[0].addEventListener('click', function(){ 
sessionStorage.alreadyClicked = "true";
hidden = true;
voteblock.classList.add("voteblock-success");

voteblock.textContent = 'Thanks! We appreciate the feedback.';
setTimeout(function(){voteblock.style.display = "none"; }, 3000);
  
});</script><script>window.addEventListener("klaviyoForms", function(e) { 
  if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
    ga('send', 'event', 'Klaviyo form', 'form_open', e.detail.formId);
  }
  if (e.detail.type == 'submit') {
    ga('send', 'event', 'Klaviyo form', 'form_submit', e.detail.formId);
  }
  if (e.detail.type == 'close') {
    ga('send', 'event', 'Klaviyo form', 'form_close', e.detail.formId);
  }
});</script><script>var category = document.querySelector(".breadcrumbs > li:nth-child(2)").getAttribute("title");
  // zendesk's templates are terrible. i'm sorry you had to see that. 
window.addEventListener("klaviyoForms", function(e) { 
  if (e.detail.type == 'submit' || e.detail.type == 'redirectedToUrl') {
    _learnq.push(['track', 'HC Feedback Submitted', {
      'formId' : e.detail.formId,
      'path' : window.location.href,
  		'category' : category,
      'HCArticleFeedback' : e.detail.metaData['HC Article Feedback'],
      'HCArticleIssue' : e.detail.metaData['HC Article Issue']
    }]);
  }
});</script><script>$(function() {
      
    $('article').readingTime({
      wordCountTarget: '.words',
    });
        
  });</script><script>//
// GENERATE ARTICLE SECTION HEADINGS
// ---------------------------------------------

$(function () {

  var heading_elems = $('.article__body h2, h3');
  var toc_title = $('.hero-unit__content h1');
  if (heading_elems.length < 1) {
    return;
  }
  
  var sidebar_elem = $('<div class="article-headings-wrapper" id="article-headings-wrapper">').append(
      $('<span class="article-headings-label"><a href="#"></a></span>').text(toc_title.text())
      ),
      sidebar_list_elem = $('<ul class="article-headings" />').appendTo(sidebar_elem);

  var heading_count = 0;
  var last_tag = '';
  
  heading_elems.each(function () {
    var elem = $(this),
        title = elem.text(),
        title_sanitized = title.toLowerCase().replace(/[^\w]/g, '-'),
        anchor = title_sanitized + heading_count;
        
    elem.before($('<a class="heading-anchor" />').attr('name', anchor).html('&nbsp;'));
    elem.append($('<a class="heading-bookmark"><i class="fa fa-link"></i></a>').attr('href', '#' + anchor));
                               
    //If header is an H2 append it to list normall, if H3 append it with new class with margin that creates sub-directory
      if($(this).prop('tagName') === 'H2') {
        sidebar_list_elem.append(
          $('<li class="heading-list__item hh' + heading_count +  '"/>')
            .append($("<a class='heading-list__link'></a>").attr('href', '#' + anchor).text(title))); 

        heading_count++;

      } else {
        sidebar_list_elem.append(
          $('<li class="subheading-list__item hh' + heading_count +  '"/>')
            .append($("<a class='subheading-list__link'></a>").attr('href', '#' + anchor).text(title))); 

        heading_count++;

      }
    });

  $('.article').parent('.column')
    .removeClass('column--md-9')
    .addClass('column--md-8')
    .before(
      $('<div class="column column--sm-4 column--md-3" />').append(sidebar_elem)
    );
  
  
  // Highlighting.
  sidebar_list_elem.find('li:first a').addClass('is-active');

  $(window).on('scroll', function (e) {
    
    
    
    var curr_pos = $(this).scrollTop();

    if (!$('body').hasClass('scrolling-from-click')) {
      if (curr_pos === 0) {
        sidebar_list_elem.find('a').removeClass('is-active');
        sidebar_list_elem.find('li:first a').addClass('is-active');
        return;
      }
      
      var heading_elems = $('.article__body h2'),
          which_elem_to_highlight = null;

      $(heading_elems.get().reverse()).each(function () {
        var elem = $(this),
          bottom_of_page = $(window).scrollTop() + $(window).height(),
          top_of_heading = elem.offset().top;


        if (top_of_heading < bottom_of_page) {
            which_elem_to_highlight = elem;
            return false;
        }
      });

      if (which_elem_to_highlight) {
          $('.article-headings')
            .find('a.is-active').removeClass('is-active').end()
            .find('a:contains(' + which_elem_to_highlight.text() +')').addClass('is-active');
            var title = which_elem_to_highlight.text(),
                anchor = title.toLowerCase().replace(/[^\w]/g, '-');
      }
    }
  });

  sidebar_list_elem.find('a').on('click', function (e) {
    var elem = $(e.currentTarget),
        title = elem.text().toLowerCase().replace(/[^\w]/g, '-'),
        anchor = elem.attr('href'),
        scroll_position = $('.article__body a[name="' + anchor.substring(1) + '"]').offset().top;
        
    $('body').addClass('scrolling-from-click');

    sidebar_list_elem.find('a.is-active').removeClass('is-active');

    elem.addClass('is-active');

    $('html, body').animate({
      scrollTop: scroll_position
    }, 600, function () {
      $('body').removeClass('scrolling-from-click');
      window.location.hash = anchor;
    });
    
    return false;
  });
  
  
  // Make sidebar sticky.
  var topbar_elem = $('[data-topbar]'),
      article_page_elem = $('.article-page'),
      article_padding = parseInt(article_page_elem.css('padding-top'));
  
  new Waypoint.Sticky({
    element: sidebar_elem.get(0),
    stuckClass: 'article-headings--fixed',
    offset: topbar_elem.outerHeight() + article_padding,
    handler: function () {
      this.$element.css('top', topbar_elem.outerHeight() + article_padding);
    }
  });
  
  //Stops sidebar before voting section so the TOC doesn't bleed into footer
  $('.article-votes').waypoint(function(direction) {
    $('.article-headings-wrapper').toggleClass('sticky-surpassed', direction === 'down');
  }, { offset: function() {
       return $('.article-headings-wrapper').outerHeight();
  }});  

});</script><script>try {
document.getElementsByClassName("article-vote--down")[0].addEventListener("click", function(){
    window.location.hash = "signupdownvote"
});
}
catch(e) {}</script><script>var _learnq = _learnq || [];

   var item = {
   Title: 'How to Install Klaviyo.js to Publish Signup Forms',
   ArticleID: 360002035871,
   Site: 'Help Center',
   Url: '/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms' 
 };

  _learnq.push(['track', 'Viewed Article', {
   Title: item.Title,
   ItemId: item.ArticleID,
   Site: item.Site,
   Url: item.Url
  }]);
  
  <!-- accordion menu -->
  var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
                           
var parentCategory = $('.breadcrumbs li:nth-child(2) a').html();
if (parentCategory === "Klaviyo FAQ") {
  document.querySelector("#header-background-image").setAttribute("style", "background-image: url('//theme.zdassets.com/theme_assets/1614414/66d9f00c6e82acf73a20b0c63b5cfae0439b3cf8.png'); background-size: cover;");
  document.querySelector("#article-title").innerHTML = "Klaviyo FAQ";
  document.querySelector("#reading_time").setAttribute("style", "display: none");
    var css = '.topbar--fixed {background-color: #2194ab; }',
      head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');

  head.appendChild(style);

  style.type = 'text/css';
  if (style.styleSheet){
    // This is required for IE8 and below.
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

if (parentCategory === "Send Time Optimization") {
   document.querySelector("#breadcrumbs-wrapper").setAttribute("style", "display: none");
}</script><script>adroll_adv_id = "FOXK76Q7R5GY5IOUGDAMQA";
    adroll_pix_id = "QZ3RQ2TA5BHVBDF5G4STRY";

    (function () {
        var _onload = function(){
            if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
            if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
            var scr = document.createElement("script");
            var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
            scr.setAttribute('async', 'true');
            scr.type = "text/javascript";
            scr.src = host + "/j/roundtrip.js";
            ((document.getElementsByTagName('head') || [null])[0] ||
                document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
        };
        if (window.addEventListener) {window.addEventListener('load', _onload, false);}
        else {window.attachEvent('onload', _onload)}
    }());</script><footer><div class=hc-container><img alt="Klaviyo Logo without text"src=//theme.zdassets.com/theme_assets/1614414/ddd7dac75ed48289c64c5a5fc3ca93aea2ec4729.png><ul class=site-nav><div class=klaviyo-form-JqrcMC></div><li><a href=https://www.klaviyo.com/login> Product </a><li><a href=https://www.klaviyo.com/blog> Blog </a><li><a href=https://www.klaviyo.com/about> About Klaviyo </a></ul><ul class=legal-nav><li><p>Copyright 2021 Klaviyo ®</p><li><a href=https://www.klaviyo.com/privacy> Privacy Policy </a></ul></div><script async src=//static.klaviyo.com/onsite/js/klaviyo.js?company_id=9BX3wh></script><script>var _learnq = _learnq || [];
  _learnq.push(['account', 'hYfQf4']);
  (function () {
    var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true;
    b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'a.klaviyo.com/media/js/analytics/analytics.js';
    var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);
  })();</script></footer><script src=//static.zdassets.com/hc/assets/en-us.fa755ce08470d56db6b6.js></script><script data-auth-origin=5131267,true,true data-brand-id=5131267 data-locale=en-us data-return-to=https://help.klaviyo.com/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms data-theme=hc src=https://klaviyo.zendesk.com/auth/v2/host.js></script><script>/*

    Greetings sourcecode lurker!

    This is for internal Zendesk and legacy usage,
    we don't support or guarantee any of these values
    so please don't build stuff on top of them.

  */

  HelpCenter = {};
  HelpCenter.account = {"subdomain":"klaviyo","environment":"production","name":"Klaviyo"};
  HelpCenter.user = {"identifier":"da39a3ee5e6b4b0d3255bfef95601890afd80709","email":null,"name":null,"role":"anonymous","avatar_url":"https://assets.zendesk.com/hc/assets/default_avatar.png","is_admin":false,"organizations":[],"groups":[]};
  HelpCenter.internal = {"asset_url":"//static.zdassets.com/hc/assets/","web_widget_asset_composer_url":"https://static.zdassets.com/ekr/snippet.js","current_session":{"locale":"en-us","csrf_token":"hc:hcobject:server:2a0x1aYiZHdvfn/erA/pdgx4egEslIbz5dEsZtge/AN4XQfN4bAXWddp+4Itdc853b5uen6+Xl1wlcUcGn2E4Q==","shared_csrf_token":null},"settings":{},"usage_tracking":{"event":"article_viewed","data":"BAh7CDoLbG9jYWxlSSIKZW4tdXMGOgZFVDoPYXJ0aWNsZV9pZGwrCJ8gy9FTADoKX21ldGF7CzoPYWNjb3VudF9pZGkDTqIYOhNoZWxwX2NlbnRlcl9pZGwrCBh6isYaADoNYnJhbmRfaWRpAwNMTjoMdXNlcl9pZDA6E3VzZXJfcm9sZV9uYW1lSSIOQU5PTllNT1VTBjsGVDsASSIKZW4tdXMGOwZU--263f72d66086d7557c6cf6fbe96b9d5b5a0f00ce","url":"https://help.klaviyo.com/hc/activity"},"current_record_id":"360002035871","current_record_url":"/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms","current_record_title":"How to Install Klaviyo.js to Publish Signup Forms","search_results_count":null,"current_text_direction":"ltr","current_brand":{"account_id":1614414,"brand_id":5131267,"brand_url":"https://help.klaviyo.com","url":"https://klaviyo.zendesk.com/api/v2/brands/5131267.json","name":"Klaviyo","logo":"","subdomain":"klaviyo","host_mapping":"help.klaviyo.com","help_center_state":"enabled","ticket_form_ids":null,"active":true,"default":true,"has_help_center":true,"created_at":"2017-03-17T17:32:25Z","updated_at":"2021-02-12T17:57:36Z","id":5131267,"route_id":1542569},"current_brand_url":"https://klaviyo.zendesk.com","current_host_mapping":"help.klaviyo.com","current_path":"/hc/en-us/articles/360002035871-How-to-Install-Klaviyo-js-to-Publish-Signup-Forms","authentication_domain":"https://klaviyo.zendesk.com","show_autocomplete_breadcrumbs":true,"rollbar_config":{"enabled":true,"endpoint":"https://rollbar-us.zendesk.com/api/1/item/","accessToken":"731a5a953e9a4b7ab6cac9623f50c732","captureUncaught":true,"captureUnhandledRejections":true,"payload":{"environment":"production","client":{"javascript":{"source_map_enabled":true,"code_version":"f289703e814a87b51147263600059131e5b1f9d0","guess_uncaught_frames":true}}}},"user_info_changing_enabled":false,"has_user_profiles_enabled":false,"has_end_user_attachments":true,"user_aliases_enabled":false,"has_anonymous_kb_voting":true,"has_multi_language_help_center":true,"mobile_device":false,"mobile_site_enabled":false,"show_at_mentions":false,"embeddables_config":{"embeddables_web_widget":false,"embeddables_connect_ipms":false},"base_domain":"zendesk.com","answer_bot_subdomain":"static","manage_content_url":"https://help.klaviyo.com/hc/en-us","arrange_content_url":"https://help.klaviyo.com/hc/admin/arrange_contents?locale=en-us","general_settings_url":"https://help.klaviyo.com/hc/admin/general_settings?locale=en-us","user_segments_url":"https://klaviyo.zendesk.com/knowledge/user_segments?brand_id=5131267","has_gather":true,"has_community_enabled":false,"has_community_badges":false,"has_user_segments":true,"has_answer_bot_web_form_enabled":true,"has_answer_bot_web_form_modal_v2":false,"billing_url":"/access/return_to?return_to=https://klaviyo.zendesk.com/admin/billing/subscription","has_block_answer_bot_embeddable":false,"is_account_owner":false,"theming_cookie_key":"hc-da39a3ee5e6b4b0d3255bfef95601890afd807091-preview","is_preview":false,"has_guide_user_segments_search":true,"has_alternate_templates":true,"arrange_articles_url":"https://klaviyo.zendesk.com/knowledge/arrange?brand_id=5131267","article_verification_url":"https://klaviyo.zendesk.com/knowledge/verification?brand_id=5131267","has_article_verification":true,"guide_language_settings_url":"https://help.klaviyo.com/hc/admin/language_settings?locale=en-us","docs_importer_url":"https://klaviyo.zendesk.com/knowledge/import_articles?brand_id=5131267","community_badges_url":"https://klaviyo.zendesk.com/knowledge/community_badges?brand_id=5131267","community_settings_url":"https://klaviyo.zendesk.com/knowledge/community_settings?brand_id=5131267","gather_plan_state":"subscribed","search_settings_url":"https://klaviyo.zendesk.com/knowledge/search_settings?brand_id=5131267","has_multibrand_search_in_plan":true,"theming_api_version":1,"has_pci_credit_card_custom_field":true,"has_prefill_request_form_from_url":true,"current_brand_id":5131267,"help_center_restricted":false,"current_brand_active":true,"is_assuming_someone_else":false,"flash_messages":[],"user_photo_editing_enabled":true,"has_end_user_apps":false};</script><script src=//static.zdassets.com/hc/assets/moment-f6f8513da6ab17eadada59a1a4edb536.js></script><script src=//static.zdassets.com/hc/assets/hc_enduser-8d5163bcf5ed6a49ee76283018fbd28e.js></script><script>(function(){window['__CF$cv$params']={r:'6398e1913d547f11',m:'e05ccdbdebdd5821d806e27bb4e8ade24072ea62-1617354176-1800-ARGvwAFdOqjirDtp/Io92Mwfn2gNbhYjXe+z8L71yENMpcP7GciF8KXnkqlPvaRYNalPIP0OtpkisBW/9orIuU3xw8Dj11AuntNB3ts2Zv81w/rBKre2IhoVawTr0woXb4KBRvT2nYULNsESjlVdnBptBILHOLz6lxQEbZRgTR1XSL04WgfcRQbVpeDAwD30JTCQdMn1hLjfp6mdhntc+cZINxRTwnZFQpIrYdQSof8P',s:[0x00c0848ef2,0x606370b0e5],}})();</script>