Introduction
This Framer timed popup ad component gives you complete control over user engagement timing and frequency. Choose when your promotional popup appears with customizable show delays, and set how often users see it again with flexible frequency intervals, from as short as 1 hour to as long as 7 days.
The popup automatically tracks user interactions through localStorage, ensuring visitors aren't overwhelmed while maximizing conversion opportunities. Perfect for special offers, announcements, or lead generation campaigns that respect user experience while driving meaningful engagement.
Don’t have the component yet? Purchase it here.
Getting Started
Click on the remix link you received from Lemon Squeezy which will open the project in Framer. Grab the component from the canvas by copying and pasting it into your own project. Replace the content with your own, and you're all set!
Component Features
Preview
Toggled between ON and OFF, for the component to work as intended you have to turn the preview off once you're done customizing it.
Show Delay
Amount of seconds after which the popup shows up, ideally anything between 10-20 seconds.
Frequency
Set this to show again to the same user after a set amount of hours, minimum is 1 hour and maximum is 7 days (don't spam people…).
Image Controls
You can set your own image and define the amount of space it should occupy in relation to the content.
Overlay
Change the color of the overlay to fit your brand.
Direction
You can choose between two options, specifically, two columns side by side (default) and stacked, where the image is on top of the content. This option makes it extremely versatile to accommodate breakpoints where for example, two columns would not fit well on a mobile screen.
Ideally you keep two columns on desktop and stacked for tablet and mobile.
Container Size & Scale
You can set the max-width of the container and once you're happy with that you can increase or decrease the entire scale whilst maintaining all your set sizes without having to re-adjust each individually.
Content
You can fully customize the layout of the content like having it all left or center aligned, changing the background, changing the gap between elements, inner padding and outer margins… possibilities are endless.
Voucher
You can choose to show or hide the voucher and customize it completely to the tiniest details of styling.
Button (Call to Action)
The button has pre-built controls to style it to your needs but also control hover states and the transition is uses so you can create a polished look.
You can set your button width to either Fit or Fill. When set to fit, the button size is determined by its padding and content, rather than stretching to full width.
Close Button
The component wouldn't be completely customizable if you couldn't style the close button too right? That's covered as well with pre-built controls and of course, hover states.
