Add and Customize a Legacy Flyout

read

Overview

A flyout form will "fly out" from the side of your website after a set delay period -- this type of form is less obtrusive than a popup form, but more attention-grabbing than an embedded sign up form.

Here's what it looks like:
636114

Copy the Default Flyout Form Code

In Klaviyo, you can style a basic flyout form and then copy and paste the styled form code into your website's template code. To do this, navigate to the list you would like new signups to be added to and select the Sign Up Forms > Flyout.

After you customize your form's basic styling in Klaviyo, you will see the corresponding code below. This code snippet will be pre-populated with the correct List ID. If you want to use the same form code but have subscribers get added to a different list, you will have to change the "List: ID" value highlighted here:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachFlyoutSignUp({
list: 'LIST_ID',
delay_scroll: 50,
delay_seconds: 0,
content: {
clazz: ' klaviyo_flyout_[LIST_ID]',
header: "Interested in our Newsletter?",
subheader: "Stay in the know with news and promotions.",
button: "Subscribe",
success: "Thanks! Check your email for a confirmation.",
styles: '.klaviyo_flyout.klaviyo_flyout_[LIST_ID] { font-family: "Helvetica Neue", Arial}.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_topbar { background-color: #0064cd;}.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_header { color:#222;}.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_subheader { color:#222;}.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_submit_button,.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_submit_button span { background-color:#0064cd; background-image: none; border-radius: 2px;}.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_submit_button:hover,.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_submit_button span:hover { background-color:#0064cd; background-image: none; }.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_flyout.klaviyo_flyout_[LIST_ID] .klaviyo_fieldset .klaviyo_field_group input[type=email] { border-radius: 2px;}'
 },
modal_content: false
});
</script>

Flyout Custom Configuration Options

If you've used Klaviyo's default flyout form code, there are different custom configuration options available, including:

  • liststring, required. ID for the list that subscribers will be added to. Example, ABcDeF.
  • modal_content: boolean, required, default: false. Determines if form is a flyout or separate modal.
  • pages: array, optional. Limits your form to show on these specific page paths for your website. If this isn't set and "excluded_pages" isn't set, the form will display on all pages. The asterisk(*) character can be used as a wildcard. Example: pages: ["/", "/products/*"]
  • excluded_pagesarray, optional. Excludes your form from showing on these specific page paths for your website. If you set this and don't set "pages", the form will appear on every page except for these. Example: excluded_pages: ["/cart", "/checkout"]
  • delay_scroll: optionalfloat, default: 0. The length, in % of the page, that the user needs to scroll down the page before your form appears on the page.
  • delay_seconds: optional, int, default: 0.1. The delay, in seconds, before your form appears on the page.
  • delay_num_pagesoptional, int, default: 0. The delay, in number of pages, before your form appears on your website.
  • has_closed_modal_cookie_nameoptional, string. By default, when a user closes a flyout or popup, all flyouts and popups will remain closed on all pages. Use this option to give a flyout or popup a specific name, thus causing only others with the same name to remain closed.
  • ignore_cookie: optional, boolean, default: false. If a user closes a flyout or popup, all other flyouts and popups on your site will remain closed as the user continues to navigate the site. Set this option to true to force your flyouts and popups to always appear.
  • extra_properties: optional, dictionary. Assign custom properties to someone's profile when the form submits. Example: If you want to track that someone is signing up from the form on your home page: extra_properties: { $source: 'HomePageSignUp' }
  • position: optional, string, values: right, left. The side of your pages that the form will slide out from. Example: position: 'left'.
  • success_url: optional, string. After a successful form submission, the page will redirect to this URL.
  • success: optional, function. Set a custom function to run on a successful AJAX post.
  • custom_success_message: boolean, default: false. If true, the success message for the form will be replaced with your success_message <div> if one exists, or the "success_message" option below.
  • success_message: optional, string/HTML. The default Success Message for every form is, "Thanks for subscribing! Check your email for a confirmation message." If you would like to choose your own Success Message, leverage this configuration option.
  • hide_form_on_success: boolean, default: false. If set to true, this will hide the form fields after a user submits the form.
  • content: dictionary, optional, not available for custom built modal forms.
    • clazz: optional, string. Assign a custom class to your form.
    • header: optional, string, default: "Interested in our newsletter?". Header message for your form.
    • subheader: optional, string, default: "Check your email for a confirmation message". Informational text under form header.
    • button: optional, string, default: "Subscribe". Text that displays on a form button.
    • success: optional, string/HTML, default: "<div>Thanks for subscribing!</div><div>Check your email for a confirmation message.</div>". Success message someone see's after updating their email.

Change a Form's Default Content

If you've used the Klaviyo's default form code, the first thing you'll want to customize is the content of the form: the header, subheader, button text, and success message. You will find all of these in your form's "Content" array:

KlaviyoSubscribe.attachFlyoutSignUp ({  
   list: 'LIST_ID',
   content: {  
      header: 'Want exclusive deals?',
      subheader: 'Be the first to know about special offers',
      button: 'Sign Up',  
      success: 'Thanks! Check your email for a confirmation.'  
   },  
   modal_content: false 
});

Make sure that if you customize the text here, you use the same syntax and don't delete or change the use of quotations, commas, or brackets.

Change when a Flyout is Displayed

There are a number of options that allow you to control when your flyout form is displayed. The two most common ways to trigger a flyout is either when someone scrolls a certain percentage of the way down a page or after someone has been on a page for a set amount of time. First, an example to change the scroll amount that triggers the sign up:

KlaviyoSubscribe.attachFlyoutSignUp({  
   ...  
   delay_scroll: 20,  
   ... 
});

The delay_scroll option can be a number between 0 and 100, "bottom" or false. If it's set to a number, that's the percentage of the page someone must scroll in order to trigger the flyout. If it's set to "bottom", we'll close the flyout when someone reaches the bottom of a page. Finally, if you set the delay_scroll option to false, how far someone scrolls won't be taken into account when showing the flyout.

If you want to show your flyout after a set amount of time rather than based on scrolling, use the delay_seconds option:

KlaviyoSubscribe.attachFlyoutSignUp({  
   ...  
   delay_scroll: 0,
   delay_seconds: 5,  
   ... 
});

In this example you need to set the delay_scroll to false, which turns it off, and then specify the number of seconds to wait before showing the flyout.

Styling your Flyout Form

If you styled your form already in Klaviyo, you should be all set!

If you'd like to change the default styling of your sign up form - a more technical option - this the HTML structure of the sign up:

<div class="klaviyo_flyout">
 <div class="klaviyo_inner">
 <div class="klaviyo_topbar" />
 <a href="#" class="klaviyo_close_flyout klaviyo_header_close">×</a>
 <form class="klaviyo_subscription_form">
 <p class="klaviyo_header"></p>
 <p class="klaviyo_subheader"></p>
 <div class="klaviyo_inline_fieldset">
 <input type="email" name="email" placeholder="Your email address" />
 <button type="submit" class="klaviyo_submit_button"><span></span></button>
 </div>
 </form>
 <div class="success_message" ></div>
 </div>
</div><br>

You can then add your own HTML/CSS styling.

Creating a Completely Custom Flyout

If you want more control designing a flyoout form, you can write custom HTML for your flyoout and still have it interface with Klaviyo's JavaScript library. 

1. Start with Our Basic Form Code

To build your own flyout, use the HTML below as a starting point. This contains Klaviyo classes to get the same look as a basic Klaviyo flyout 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 Flyout 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 flyout 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?
7 out of 20 found this helpful