📤
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)
- In the Flow Builder, click Share in the Top Bar
- Check the
Embed as a Popup Flowcheckbox - 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.
Assing a unique class to the button that's going to open the popup, something like
open_popup- 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!
Documentation coming soon...
Last modified 8mo ago