Popup Banner
Discount popup banner component — perfect for offering user discounts and boosting conversions with dynamic display logic.
Make it with Workshop
Build your own component with AI
About
This component was designed for an easy way to apply a global discount banner to your site. We have designed this plugin carefully to ensure it is fully customisable using Framer’s layout tools. Use our template as a base and tweak for your branding across desktop and mobile.
Setup Instructions
Step 1. Copy the popup and popup content from the remix link
Step 2. Paste the component and content within a page, or if you would like it to be displayed globally, a template should be used see https://www.framer.com/updates/layout-templates
Step 3. Publish and ensure the popup is displaying. If not, feel free to reach out to support!
Step 4. Modify and tailor to your needs!
Property controls
There are several useful property controls to modify the display of the popup component.
Frequency to show
The more this is increased, the less often the user will see the popup
It defines the minimum number of hours that must pass after the popup was last shown before it can appear again.
Set to -1 if you never want to show again (often useful in combination with last time updated)
Delay to show
How long popup waits to appear after the page has loaded
Last time updated
Useful when you have got a new promotion
Popup will appear if the user last saw it before the Last Time Updated date.
Mobile
The main content frame of the popup to show when mobile is active
Desktop
The main content frame of the popup to show when desktop is active
Is mobile
When using multiple layouts, enable this property for mobile layouts by setting it to true.
Hide in editor
Prevents the popup from displaying in the layout editor (useful when trying to make edits to the rest of your site)
Hide z index message
We added a z index warning message to prevent misconfiguration of the component, simply toggle this to hide the warning message.
Important notes
Layer names
BnnrFlexContent_fullspread is a keyword used by the plugin. To ensure fullscreen display, you must ensure the layer is named like this. (Often important on mobile popups)
Support
Please feel free to contact Ben at hello@blueboxdigital.co.uk for help setting up the component.
