Work in Progress: How to set up a Micro-Product as a Popup on your Site

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.

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

Step 1: Make sure the Flow and Savvy Analytics are installed

• 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

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:

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.

• Save the Flow

...and you're done!

How do I make the Flow only sometimes appear inside a popup?

Documentation coming soon...

How do I make the button that triggers the popup also answer a Flow question?

See 🖋️Prefilling answers into your Flow