Create a Custom Fly Out

read

Overview

If you want more control designing a fly out sign up, this guide will explain how you can write completely custom HTML for your fly out and still have it interface with Klaviyo's JavaScript library. 

1. Start with Our Basic Form Code

To build your own fly out, use the HTML below as a starting point. This contains Klaviyo classes to get the same look as a basic Klaviyo fly out form:

<div id="custom_flyout" class="klaviyo_flyout klaviyo_right" >
  <div class="klaviyo_inner">
  <div class="klaviyo_topbar"></div>
  <a href="#" class="klaviyo_close_flyout klaviyo_header_close">×</a>
 <form action="" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
    <input type="hidden" name="g" value="LIST_ID" />
      <p class="klaviyo_header">Interested in our Newsletter?</p>
      <p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
     <div class="klaviyo_inline_fieldset">
        <input type="email" name="email" placeholder="Your email address" />
        <button type="submit" class="klaviyo_submit_button">
           <span>Sign Up</span>
        </button>
     </div>
 </form>
 <div class="success_message" ></div>
 </div>
</div>

2. Attach Your Custom Fly Out to Your Website

Once you've created your HTML, you'll need to let our JavaScript library know which element on your page represents your sign up form. To do so, pass the ID selector from your HTML form to the following line:

var KLAVIYO_FLYOUT_SELECTOR = '#custom_flyout';

Above, you can see that this custom_flyout ID is referenced in our HTML form on the first line as follows:

<div id="custom_flyout" class="klaviyo_flyout klaviyo_right" >

Here is the full JavaScript code that you can add right below your form's HTML code on your website.

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//a.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
 var KLAVIYO_FLYOUT_SELECTOR = '#custom_flyout';
 KlaviyoSubscribe.attachToForms(jQuery(KLAVIYO_FLYOUT_SELECTOR + ' .klaviyo_subscription_form'), {
   success: function ($form) {
   $form.hide();
   KlaviyoSubscribe.setClosedModalCookie();
   
   // Include other JavaScript to run if someone fills out the fly out successfully.
   }
 });
 KlaviyoSubscribe.attachToFlyout(KLAVIYO_FLYOUT_SELECTOR, {
   delay: 5,
   delay_scroll: 0,
   position: 'right'
 });
</script>

From here you can add HTML and CSS to get the exact look and feel you want. Keep in mind a few things:

  • The form.klaviyo_subscription_form element should contain your sign up form has two required fields. First, a hidden field with name="g" whose value is the list people will be subscribed to. Second, an input with name="email".
  • Any element with the class klaviyo_close_flyout will exit the fly out and permanently hide it from that visitor.
  • Use the class klaviyo_submit_button on the button that submits your form if you'd like it to be disabled while the form is submitting.
  • The element inside the klaviyo_flyout wrapper with the success_message class will be shown after someone successfully submits the flyout.
  • If you change the HTML ID of the flyout, make sure to update the KLAVIYO_FLYOUT_SELECTOR JavaScript variable.
  • KlaviyoSubscribe.attachToForms expects a jQuery-like object. If you're already including the jQuery library somewhere else, you can remove the jQuery script file from the JavaScript above.

Custom Newsletter Signup Fly Out

As an example, here's some slightly modified HTML, JavaScript and CSS that produces the following flyout.
639011

HTML:

<div id="custom_flyout" class="klaviyo_flyout klaviyo_right" style="display: none;" >
  <div class="klaviyo_inner">
    <div class="klaviyo_topbar"></div>
      <a href="#" class="klaviyo_close_flyout klaviyo_header_close">×</a>
      <form action="" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
        <input type="hidden" name="g" value="LIST_ID" />
        <p class="klaviyo_header">The Weekly Tinkerer</p>
        <p class="klaviyo_subheader">
          Reviews of the newest products, interviews with their creators and special deals for subscribers.
        </p>
        <div class="klaviyo_inline_fieldset">
          <input type="email" name="email" placeholder="Your email address" />
          <button type="submit" class="klaviyo_submit_button"><span>Sign Up</span></button>
        </div>
      </form>
    <div class="success_message" ></div>
  </div>
</div>

JavaScript:

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//a.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
  var KLAVIYO_FLYOUT_SELECTOR = '#custom_flyout';
  KlaviyoSubscribe.attachToForms(jQuery(KLAVIYO_FLYOUT_SELECTOR + ' .klaviyo_subscription_form'), {
    success: function ($form) {
    $form.hide();
  KlaviyoSubscribe.setClosedModalCookie();
    // EXTRA SUCCESS CODE GOES HERE:
    // Include other JavaScript to run if someone fills out the fly out successfully.
  },
 extra_properties: {
   $source: '$flyout'
 }
 });
 KlaviyoSubscribe.attachToFlyout(KLAVIYO_FLYOUT_SELECTOR, {
    delay: 0.02,
    delay_scroll: 0,
    position: 'right'
 });
</script>

CSS:

<style type="text/css">
   #custom_flyout .klaviyo_subscription_form {
     background: url('/media/images/logo.png') -19px 11% no-repeat;
   }
   #custom_flyout .klaviyo_topbar {
     height: 10px;
     background: #9865CF;
   }
   #custom_flyout .klaviyo_submit_button,
   #custom_flyout .klaviyo_submit_button span {
     background: #9865CF;
   }
</style>
Was this article helpful?
0 out of 0 found this helpful