This component is Part of the Essential Components plugin. Browse and insert 25+ ready-to-use components directly in Framer. Start for free
A beautiful, conversion-focused popup that displays a promotional offer with a copy-to-clipboard coupon code. It includes both an Open and Closed state, so users can reveal the offer when they’re ready and dismiss it without disrupting their experience.
Copy and paste the component into your Framer project.
Add it to your Template page if you want it to appear across your site.
Set the position to Fixed so it floats above your content.
Choose where it sits on the screen (left, right, bottom, or center depending on your layout).
This component includes two main variants:
Closed Variant: Displays a small floating button like “Get 10% Off” with an icon.This keeps the UI clean while still teasing the offer.
Open Variant : Reveals the full popup with:• Headline text (e.g. “Enjoy 10% OFF Today!”)• Optional image or graphic• Subtext like minimum order value• A large coupon code button with copy icon• Close button in the top corner
When users click the closed button:• The popup opens with your full offer• They can click the coupon code to copy it instantly• Visual feedback confirms the code was copied
When users click the close icon:• The popup hides back into the floating button
Text & Content: Main offer text, Conditions like “Minimum order of $25”
Coupon Code: Fully editable• Closed Button Text: Example “Get 10% Off”
Design: Background colors for popup and button• Text colors• Font family and weight• Border radius• Icon size and color• Image slot for seasonal or campaign graphics
Layout : Control popup width and spacing• Position the closed button anywhere on screen• Adjust padding and alignment
Final Step : Once you’re done customizing:Set the component to the Closed variant before publishing so visitors first see the teaser button.
E-commerce: Promote site-wide sales, seasonal discounts, or first-order coupons•
Landing Pages: Increase conversions with limited-time offers• SaaS: Offer promo codes for trials or upgrades
Creators & Courses: Give discounts on digital products• Events: Share exclusive attendee or launch codes
This popup is designed to feel lightweight, modern, and conversion-friendly while giving you full visual control inside Framer.
Live preview:https://couponpopup.framer.website/
Framer Essentials
