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 by using a duplicated version of your pop-up.

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

8. Click on the Button within the form and review the List to Submit section

   1. Emails submitted via this form will be added to the List you select in this dropdown

1. Since you've duplicated another pop-up, the List settings will automatically transfer over. If you want to send these signups to a different list, create a new list or Add a property

We recommend adding a profile property Intelligems with the value [name of your personalization or test] as another tracking mechanism. Learn more about Klaviyo profile properties.

1. Double-check your Flows to see which of your Live flows are associated with the list selected in the pop-up settings.

Step 2: Configure Pop-Up Form Settings

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

   1. Embed and Banner do not work.

2. Navigate to the Targeting & Behaviors tab, and then click Display

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

4. Copy your FORMID from the URL. Example: klaviyo.com/forms/V27UAW

V27UAW = FORMID

1. Click Publish changes in the top right

2. Close Klaviyo

This popup only appears when visitors click on the link in a Test or Personalization.

Step 3: Select Your Announcement Bar & Add Klaviyo Snippet

1. In Intelligems, click into the Modifications tab of your Test or Personalization

2. Click Add & Edit changes in Visual Editor

3. Using the onsite editor widget, click on the Make onsite edits icon

1. Then click Select an element

2. Click on your announcement bar to identify the selector, and then click Edit HTML/CSS

3. Add the following code:

<div class='ANNOUNCEMENT BAR SELECTOR'>
  <a href="#"
     onclick="event.preventDefault();window._klOnsite=window._klOnsite||[];window._klOnsite.push(['openForm','FORMID']);">
    <span style="text-decoration: underline;">
      Welcome! Sign up to get $15 off your order.
    </span>
  </a>
</div>

Replace these items:

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

• FORMID with your 6 character form id from Klaviyo found in Step 2

• Welcome! Sign up to get $15 off your order with your actual call-to-action text

1. Click Apply

2. Click Save on the Intelligems onsite editor widget

3. Go back to Intelligems

4. Click Refresh in Intelligems to see the changes

5. Click Save in Intelligems

Step 5: Add Targeting

1. In the Targeting tab, click Custom

2. In the Targeting type dropdown, select Klaviyo Segment

3. Add your Klaviyo Segments using the Import from Klaviyo button

4. Click Save

Step 6: Preview 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 FORMID in the HTML with your actual Form ID, and that the form is published in Klaviyo.

Troubleshooting

Form doesn't appear when clicked:

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

• Confirm the form is published in Klaviyo

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

Klaviyo documentation