Adding a Klaviyo Pop-up to a Hyperlink

How to trigger a Klaviyo pop-up to show based on clicking a link or button

Why Use This Method

Instead of linking directly to a /signup page, you can trigger a Klaviyo pop-up form when visitors click on hyperlinked text in your announcement bar. This creates a smoother experience and allows you to track sign-ups specifically from your Intelligems Personalization separately from other sign-up methods.

This method works best when you want to maintain the visitor on the current page while still capturing their email.

Before You Start

Make sure you have:

• An active Klaviyo account connected to Intelligems

• An existing Klaviyo sign-up form (popup, flyout, or full page type)

• Access to edit your Klaviyo forms

Embedded forms cannot be triggered with a button click. Your form type must be Popup, Flyout, or Full Page.

Step 1: Duplicate Your Klaviyo Sign-Up Form

Duplicating your form allows you to track sign-ups from this personalization separately from your main form.

1. Log in to Klaviyo

2. On the left side navigation, under Website, go to Sign-up Forms

3. Find your main sign-up form

4. Click the three dots menu and select Clone

5. Rename the duplicated form to something like "Intelligems - Non-Subscriber Personalization"

6. Click Continue

7. Click into the newly duplicated form to edit it if necessary

Step 2: Configure Form Settings

1. In the Styles tab, confirm your Form Type is set to Popup, Flyout, or Full Page

2. Navigate to the Targeting & Behaviors tab

3. Under Timing show form, select Only show on custom trigger

Step 3: Get Your Form ID

1. While still in the Klaviyo form editor, look at the URL in your browser

2. Copy the 6-digit code at the end of the URL (this is your Form ID)

   • Example URL: https://www.klaviyo.com/form/ABC123/?blahblahblah

   • Form ID: ABC123

3. Save this Form ID somewhere, you'll need it in the next step

Step 4: Create the HTML Code

Now you'll create the code to paste into Intelligems. Replace the placeholder text with your specific information:

HTML to be added after the selector

<div class=['ANNOUNCEMENT BAR SELECTOR']  
  <button class="klaviyo_form_trigger" style="background:none; border:none; color:inherit; text-decoration:underline; cursor:pointer; font-size:inherit; padding:0;">
    CLICK HERE TO GET $15 OFF
  </button>
</div>

<script type="text/javascript">
  document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
    window._klOnsite = window._klOnsite || []; 
    window._klOnsite.push(['openForm', 'YOUR_FORM_ID']);
  });
</script>

Replace these items:

• ANNOUNCEMENT BAR SELECTOR with the element you select using the Intelligems onsite editor widget

• CLICK HERE TO GET $15 OFF with your actual call-to-action text

• YOUR_FORM_ID with the 6-digit Form ID you copied in Step 3

The style attribute on the button removes default button styling so it looks like regular announcement bar text.

Step 5: Add Code to Personalization

1. Go back to your Personalization for Non-Subscribers

2. In Step 8 where you edit the announcement bar HTML, paste the code above

3. Click Apply then Save

4. Click Refresh in Intelligems to see the changes

Step 6: Test Your Setup

1. Preview the personalization in Intelligems (click Include to see the non-subscriber experience)

2. Click on the text in your announcement bar

3. The Klaviyo sign-up form should appear as a popup

If the form doesn't appear, double-check that you replaced YOUR_FORM_ID with your actual Form ID and that the form is published in Klaviyo.

Multiple Forms on the Same Page

If you're adding multiple personalizations with different Klaviyo forms on the same page, you'll need to use unique class names for each button:

First form:

html

<button class="klaviyo_form_trigger_1">

Second form:

html

<button class="klaviyo_form_trigger_2">

And update the JavaScript accordingly:

javascript

document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){

Troubleshooting

Form doesn't appear when clicked:

• Verify your Form ID is correct (6-digit code from Klaviyo URL)

• Confirm the form is published in Klaviyo

• Check that Timing is set to "Only show on custom trigger"

Button doesn't look right:

• The styling in the code removes default button appearance

• You can adjust the style attribute to match your announcement bar design

• Contact support if you need help with custom styling

Klaviyo documentation