Coupon Reveal places a small icon in the bottom corner of the page. Click it and a coupon box opens with your code and a copy button. Visitors copy the code in one click and use it at the checkout.
The coupon opens with the code Welcome35 and a Copy Code button. Click the icon again to close it.
Welcome35
Add the element once and it sits in the corner of the page.
Drop Coupon Reveal onto a page, or into your footer so it shows on every page.
Type the coupon code, the text above and below it, the button text and the message shown after copying.
Pick the corner, icons, animation and colours to match your site.
A small, focused element for sharing one offer code.
Show any code you like. The code, top text and bottom text can also come from dynamic data.
The copy button puts the code on the clipboard and shows your success message.
Place the icon in the bottom left or bottom right corner.
Make the icon jiggle or bounce to draw the eye, or turn the animation off.
Choose the icon for the closed state and the close icon shown when the coupon is open.
Make the coupon start open, which also helps while you style the box.
Set the coupon box background, borders, radius and shadow.
Style the top text, bottom text and coupon code separately, with alignment.
Set the button typography, background, hover colour and borders.
Anywhere you want to offer a discount without a pop-up that blocks the page.
Offer new visitors a first-order code.
Share a sale code for a limited time and swap it when the sale ends.
Add a code on specific products or categories.
Show a thank-you code on a confirmation page.
Share an early-bird ticket code on an event page.
Show a partner's code on a landing page built for their audience.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Icon | Icon shown on the closed button. | Price tags |
| Icon Close | Icon shown when the coupon is open. | Cross |
| Coupon Code | The code to show and copy. | Welcome35 |
| Button Text | Text on the copy button. | Copy Code |
| Text Above | Text above the code. | — |
| Text Below | Text below the code. | — |
| Success Message | Message shown after the code is copied. | — |
| Make Coupon Visible | Start with the coupon open. | On |
| Position | ||
| Location | Left or Right. | Left |
| Coupon Container | ||
| Background Color | Background of the coupon box. | White |
| Borders | Border, radius and shadow. | 3px dashed, 10px radius |
| Icon | ||
| Background Color | Background of the icon button. | #FFAF0F |
| Icon Color | Colour of the icon. | White |
| Borders | Icon button borders. | — |
| Container Size | Size of the icon button, 40 to 100. | 50 |
| Icon Size | Size of the icon, 20 to 50. | 24 |
| Content | ||
| Top Text | Typography and alignment of the text above. | 18px, centre |
| Bottom Text | Typography and alignment of the text below. | Centre |
| Coupon | Typography of the code. | ABeeZee, 18px |
| Borders | Borders around the code. | — |
| Button | ||
| Typography | Button text style. | Poppins 15px, white |
| Background Color | Button background, with a hover colour. | #FFAF0F / #3E3D42 |
| Borders | Button borders and radius. | 5px radius |
| Animation | ||
| Animation | None, Jiggle or Bounce. | Jiggle |
Place the element in your footer template. It sits in the bottom corner of the screen wherever the footer is used.
No. It only shows and copies the code. Create the coupon itself in WooCommerce or your shop plugin.
Yes. The coupon code, top text and bottom text accept dynamic data, so you can pull them from a custom field.
Make Coupon Visible starts the coupon open, which makes it easier to style. Turn it off so visitors see only the icon until they click it.
Use one per page. The element is designed as a single corner offer.
Coupon Reveal is included with Phox Elements, along with 150+ other premium elements for Breakdance.