# Adding a Klaviyo Pop-up to a Hyperlink

### 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.

{% hint style="info" %}
This method works best when you want to maintain the visitor on the current page while still capturing their email.
{% endhint %}

### 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

{% hint style="warning" %}
Embedded forms cannot be triggered with a button click. Your form type must be Popup, Flyout, or Full Page.
{% endhint %}

### 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

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2F7jJYJejrxweGofaMy2Ff%2FScreenshot%202026-02-09%20at%201.06.40%E2%80%AFPM.png?alt=media&#x26;token=0ebe8cf5-8abd-4069-95b4-e6dc73b25157" alt=""><figcaption></figcaption></figure>

9. 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**

{% hint style="warning" %}
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](https://help.klaviyo.com/hc/en-us/articles/115005074627).
{% endhint %}

10. Double-check your **Flows** to see which of your Live flows are associated with the list selected in the pop-up settings.&#x20;

### 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.**&#x20;
   1. Embed and Banner *do not work.*&#x20;
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

&#x20;     V27UAW = `FORMID`

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fk5sdRTnoYGYn0SBp2Zml%2FScreenshot%202026-02-09%20at%203.18.51%E2%80%AFPM.png?alt=media&#x26;token=209c77b6-bb36-4424-8627-cc4c02ad3c80" alt=""><figcaption></figcaption></figure>

5. Click **Publish changes** in the top right
6. Close Klaviyo

{% hint style="info" %}
This popup only appears when visitors click on the link in a Test or Personalization.&#x20;
{% endhint %}

### 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**

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FJYjWSvpFbd6xn9o0urOi%2FScreenshot%202026-02-09%20at%203.22.47%E2%80%AFPM.png?alt=media&#x26;token=05027e65-68c8-4b56-a063-77a8c9296502" alt=""><figcaption></figcaption></figure>

4. Then click **Select an element**&#x20;
5. Click on your announcement bar to identify the selector, and then click **Edit HTML/CSS**
6. Add the following code:

```html
<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<br>

6. Click **Apply**
7. Click **Save** on the Intelligems onsite editor widget
8. Go back to Intelligems
9. Click **Refresh** in Intelligems to see the changes
10. 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

{% hint style="warning" %}
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.
{% endhint %}

### 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](https://help.klaviyo.com/hc/en-us/articles/4418052317339)