How To Create an Exit Intent Popup in Framer

[@jeylawrence369]

Great content... I'm assuming one can add various elements within the pop-up like a video or image component?

[@coastalthemes]

Yes! You can create the variant and put whatever assets you'd like inside! You could even connect it to CMS content if you wanted the ability to change the content easily from one place.

[@Airboxr]

How do we make the background blurred or greyed out when the popup is showing?

[@coastalthemes]

In the variant with the open popup, make sure the frame is the correct height of the viewport. Then you simply fill the background and vary the opacity to create a greyed out effect. You could also use a stop scroll effect when it's open to make sure the user doesn't scroll beyond the framer - framermart.com/component/stop-scroll If you're wanting to blur the background, on the same frame - go to Styles>Filters>BG Blur and you can add the glassy blur effect from the styles panel.

[@mj.7769]

great vid! can you make one on how to create a scroll-triggered popup?

[@coastalthemes]

Noted! We'll get to this -- but here's an EPIC resource I found today.... kanja.lemonsqueezy.com/checkout - mouse leave, scroll % and time delay.

[@ilanm98]

how do you do this on mobile?

[@coastalthemes]

Hey! Great question - I recommend using another set of variants for mobile and tablet sizes, so you can more easily manipulate the sizes. This is probably your best bet!