# 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="/files/NEn3Bjtf0IJYbjEaFtsj" 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.

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

<figure><img src="/files/LBhEPD42kOCd58IGkORt" 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.
{% 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="/files/HhUi7wAIIYFADTC2lr1u" alt=""><figcaption></figcaption></figure>

4. Then click **Select an element**
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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.intelligems.io/getting-started/adding-a-klaviyo-pop-up-to-a-hyperlink.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.