A scratch card makes a discount feel like a prize. The visitor rubs the front of the card away with the mouse or a finger, and the code underneath appears.
The Coupon Code widget does this with a canvas drawn over your front-side content, and one setting decides how much has to be scratched off.
For the full settings tour of the Coupon Code widget, see Coupon Code Widget: Settings Overview.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Coupon Code ships only in The Plus Addons for Elementor Pro. The free plugin contains no coupon widget at all, so there is nothing to fall back to.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Coupon Code and turn its toggle on. This is the Widgets screen, not Extensions.
Build the card
- Edit the page with Elementor and drag the Coupon Code widget onto it.
- In Content > Layout, choose Scratch under Coupon Type.
- In Content > Content, set Width and Height. Both are responsive sliders in pixels.
- Still in Content, set Fill Percent For Reveal. This is the share of the card that has to be scratched off before the rest disappears on its own. It defaults to 70.
- Fill in Content > Front Side (Content Type Default, then Content and Content Tag) and Content > Back Side (Title, Title Tag, Description).
The fields
| Setting | What it does | Default |
|---|---|---|
| Coupon Type | Switches the widget to a scratch card. | Standard – change it to Scratch |
| Width / Height | The card’s size. Responsive; Width is a maximum. | empty |
| Fill Percent For Reveal | How much has to be scratched before the rest clears by itself. 1 to 100. | 70 |
| Content Type (front and back) | Default for plain fields, Template for a saved Elementor template. | Default |
How It Behaves
- The scratch surface is generated in the browser. A moment after the page loads, the widget takes a picture of your front-side content, draws it onto a canvas the same size as the card, and removes the original front side.
- Dragging erases. On a published page, eight full-width drags across a 420 × 260 card removed the canvas entirely and left the back side – the code and its description – on screen.
- Reaching the percentage clears the rest automatically. You do not have to scratch every last corner; once Fill Percent For Reveal is passed the whole surface goes.
- It is one-way. Reload the page to get the card back.
Limitations
- Fill Percent For Reveal is a percentage shown with a px unit. The slider reads px but the number is the share of the card that has to be scratched. Leave the unit alone and set the number.
- The scratch surface is a canvas drawn from your front-side content. It is generated in the browser after the page loads, so it appears a moment late, and the front side is rendered as a flat picture – links, videos or anything interactive in it stop being interactive.
- The card appears a beat after the rest of the page. The scratch surface cannot be drawn until the page has rendered, so on a slow connection the plain front-side content is briefly visible first.
- Icons can render as empty boxes. The widget’s scissors icon and the Close Icon use Font Awesome, which The Plus Addons does not load by itself. On a page with no other Font Awesome icon they can come out blank.
Not verified
So you know exactly what has and has not been checked:
- Touch devices. The peel, scratch and slide-out gestures were driven with a mouse on a desktop viewport. The widget binds touch events too, but a real touch device was not used.
- The Style tab. Standard Style 1 and Style 3 were rendered; no colour, typography, border or popup-styling control was exercised.
- Fill Percent For Reveal at values other than 70. The default was measured. Lower and higher settings were not.
Troubleshooting
There is nothing to scratch
Check the published page rather than the Elementor preview, and give the card a Height – a card with no height has almost no surface to draw on.
The card has to be scratched almost completely
Lower Fill Percent For Reveal. At the default of 70 most of the card has to go before the rest clears.
My front side had a button on it and it stopped working
The front side is flattened into a picture. Put interactive content on the back side, or use Peel or Slide Out, which keep the front side as real elements.
