# How to set up a Micro-Product as a Popup on your Site

{% hint style="info" %}
**Popup Flows** are Flows that appear in a popup, triggered by a button on the same page, rather than embedded in the page or on a separate page.
{% endhint %}

Rather than building a popup in Webflow and embedding the Flow inside it, it's better to use Flows' inbuilt popup feature, for 3 reasons:

* It's easier!
* It's less likely to end up with weird bugs (e.g. z-index issues)
* It means we can report analytics properly (otherwise we're unable to track when users open the popup)

## How to set up Popup Flows <a href="#abf46a4c-2c55-4a6f-a891-442ff96c6836" id="abf46a4c-2c55-4a6f-a891-442ff96c6836"></a>

### Step 1: Make sure the Flow and Savvy Analytics are installed <a href="#id-14d47dbf-2e8b-4fe0-9269-a94ddec2cb18" id="id-14d47dbf-2e8b-4fe0-9269-a94ddec2cb18"></a>

* In the Flow Builder, click **Share** in the Top Bar
* Check the `Embed as a Popup Flow` checkbox
* Copy the installation code and add it to the Head or Footer of the site
  * **Important:** Make sure you don't end up with the code installed twice (e.g. if you've already added some or all of it to your site before). If you're already using Flows on your site then you may only need to add the last line of the embed code.

### Step 2: Configure the Button <a href="#id-0a718cb1-ff48-4e88-92d4-368d04948997" id="id-0a718cb1-ff48-4e88-92d4-368d04948997"></a>

Assing a unique class to the button that's going to open the popup, something like `open_popup`

### Step 3: Set the Trigger

* Go to the Options tab on the Right Sidebar when selecting Entire Flow
* Paste your selector in the Popup Trigger Selector input box (don't forget the dot at the beginning), it should look something like this:

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FQJmxMRkN4bzpfY0k0Z0D%2Fimage%20\(64\).png?alt=media\&token=1facf089-e462-4868-9e0c-2f5f99944c99)

{% hint style="info" %}
**Tip:** A good strategy is to use data attributes (like `[trigger='main-popup']`) instead of classes for this, as they're less likely to get accidentally removed later by someone in Webflow. To do this, in Webflow you would add a custom attribute onto the button with key `trigger` and value `main-popup`, and then use the selector `[trigger='main-popup']` in the Flow builder.
{% endhint %}

* Save the Flow

...and you're done!

## How do I make the Flow only *sometimes* appear inside a popup? <a href="#id-53200f1b-ad73-4b6c-a7fd-9f9b26fbc4d6" id="id-53200f1b-ad73-4b6c-a7fd-9f9b26fbc4d6"></a>

*Documentation coming soon...*

## How do I make the button that triggers the popup *also* answer a Flow question? <a href="#id-1869b872-d7c7-47fe-a843-fdf22ca1d7be" id="id-1869b872-d7c7-47fe-a843-fdf22ca1d7be"></a>

See [🖋️Prefilling answers into your Flow](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/prefilling-answers-into-your-flow)
