Trigger a Popup When a Button is Clicked

read

Overview

One way to be more targeted with your popups is to only have a popup display after someone clicks a certain button. For example, when someone clicks to view a collection or a certain section of your website.

This guide will explain how to add a popup that displays "on click" of a button.

Trigger a Popup When a Button is Clicked

First, create your popup in Klaviyo and navigate to the Behaviors tab. Here, there are two settings that you will need to edit:

  1. Set the display frequency to 0
  2. Set the URL targeting to URL contains #signup

2018-09-18_11-19-40.png

Next, publish the form. 

On your website, set the URL on the button that you would like to trigger the form to #signup. When clicked, this will append #signup to the URL -- for example, klaviyo.com#signup. This will cause the form to display when someone clicks the button.

Currently, when someone closes the form, they won't be able to open it again until they either refresh the page or navigate to another page and then back. If you would like the form to display every time someone clicks the trigger button, please follow the instructions outlined below.

Trigger a Legacy Popup When a Button is Clicked

When you copy and paste the code snippet for a customized Klaviyo popup form on your website, you're actually pasting two things:

  • The code for the form
  • The code to let our JavaScript library know which element on your page represents your sign up form

To configure a popup so that it only appears after a button is clicked, you don't need to adjust your form code. You only need to adjust the method by which the form is called.

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

<div class="klaviyo_modal" id="k_id_modal" style="display:none;">
    <div class="klaviyo_inner">
        <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
        <form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
            <input type="hidden" name="g" value="LIST_ID">
            <div class="klaviyo_fieldset">
                <p class="klaviyo_header">Interested in our Newsletter?</p>
                <p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
            </div>
        <div class="klaviyo_fieldset">
            <div class="klaviyo_field_group">
            <label for="k_id_modal_$email">Email Address</label>
            <input type="email" id="k_id_modal_$email" name="email">
            <label for="klaviyo_form_first_name">First Name:</label>
            <input id="klaviyo_form_first_name" type="text" name="first_name" value="" />
            <label for="klaviyo_form_last_name">Last Name:</label>
            <input id="klaviyo_form_last_name" type="text" name="last_name" value="" />
        </div>
    </div>
    <div class="klaviyo_fine_print"></div>
        <div class="klaviyo_form_actions">
            <button type="submit" class="klaviyo_submit_button">
                <span>Subscribe</span>
            </button>
        </div>
        <div class="klaviyo_below_submit" ></div>
        </form>
        <div class="error_message" ></div>
        <div class="success_message" ></div>
    </div>
</div>

Make sure to replace LIST_ID with the ID of the list you want new subscribers to sync to. The code above will give you a form that looks like the following:

707806

Next, you will need to add code to trigger this popup with the click of a button. Add the following code snippet right below the form code you've already pasted in:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<button onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true, ignore_cookie: true, success_message: false});">Click me</button>

Things to note here:

  • Your form will have an ID associated with it that can be found in the first line. In the above example, our form ID is k_id_modal. You will notice that in the second snippet, this same ID is referenced as follows: #k_id_modal. This is important to ensure the "on click" functionality added is connected to the right form on your site.
  • In this example, the button isn't styled and the button text set is "Click me!" -- when you use this on your site, you will probably want to use an existing button. To do this, copy the full "onclick" function used in the example: onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"
Was this article helpful?
16 out of 31 found this helpful