Creating a Scratch to Win Campaign

What You’ll Learn

• Set up your Scratch to Win
• Understand every widget setting
• Follow Scratch to Win best practices and avoid common issues

The Scratch to Win widget lets visitors scratch off a virtual card with their finger or cursor to reveal a prize. Add it to a pop-up to offer discounts or surprises while you collect emails and phone numbers.

How to get started:

1. Start from a theme or use an existing campaign

You have two options:

• Start from a theme. On the theme page, filter Use Case by Gamification and pick the Scratch to Win Multi-Step Popup. The widget is already turned on, and the theme comes with an email page, a phone page, and a Thank You page.
• Use an existing campaign. Open any campaign in the editor and turn the widget on for the page where you want the scratch card (step 2).

2. Turn on the widget

If you started from the theme, this is already done. Otherwise, in the Steps/Pages panel, expand the page and open its Layout tab. Scroll to Custom Widget and switch the toggle on.

Under Choose a Widget, select Scratch Off. This shows the Configure Widget button.

3. Open the settings

Click Configure Widget. The Scratch Off Settings window opens, with a live preview of the card on the right.

4. Set the offer and what happens next

Under General Settings:

• What will the offer or coupon code be? Enter the code visitors win. It's saved to a custom field (Custom 22 in the theme). Click Edit to choose a different field.
• What do you want to happen after the offer is revealed? Pick Do Nothing, Submit Form, Go to Next Page, or Show Extra Page 1 to 100, then set how long to wait in milliseconds. The theme uses Submit Form after 1000 ms.
• Base size and Border Radius. Set the size of the scratch card in pixels. The card scales responsively from this size.

5. Design the scratch layer

Under Scratch Overlay Settings, set the text, font, and colors for the layer visitors scratch away. Turn on Use Background Image to use an image, like a foil texture. Leave Background Image blank to use the default image.

Threshold is the percentage of the card that must be scratched before the prize reveals itself (0 to 100). The theme uses 30%.

6. Design the reveal

Under Revealed Underlay Settings, set the message visitors see under the scratch layer. HTML like <br> works in the Text field.

Promo Display Text is a short version of the prize, like "20% OFF". It's saved to a custom field (Custom 21 in the theme) so you can show it on later pages.

7. Explore Advanced Options

Click Show Advanced Settings to change the brush size and the reveal animation. Then click Save.

8. Set the next page

If you chose Submit Form in step 4, open the page's Form tab and set After Form Submit to the page that collects the email, for example Go to Next Page or Show (EP1) Email page.

Widget settings are shared by Desktop and Mobile, so you only need to set them once. But other items, like the Form settings are independent, so make you sure to check your Mobile design as you progress through changes. 

9. Preview it

Save your campaign, then open Preview and choose Preview on Blank Site. Scratch the card on desktop and mobile and confirm you land on the right page.

Widget Settings Reference

Best Practices

Tips

1. Collect the email after the scratch, not on the same page. Visitors are more willing to share their email once they've seen what they won. The theme follows this order: scratch card, email page, optional phone page, then the Thank You page with the code.

2. Use merge tags like [CUSTOM_21] or [CUSTOM_22] on later pages to show visitors their prize and coupon code. Use the custom fields you picked in the widget settings.

3. You can use images for both the scratch layer and the reveal. Matching images let you create custom ideas, like a dirty pan that gets "cleaned" to show the discount.

4. Need a foil in your brand color? Put a transparent texture image over a flat background color in that color.

5. Keep the Threshold low (the theme uses 30%). Visitors shouldn't have to scratch the whole card before the prize shows.

6. Add short helper text under the card, like "Use your finger or cursor to scratch", so mobile visitors know what to do.

Troubleshooting

The campaign doesn't move to the next page after scratching.
Point to the exact page instead of using "Go to Next Page". You can do this in the widget's after-reveal setting (for example, Show Extra Page 1) or in the form's After Form Submit (for example, Show (EP1) Email page).

Desktop and mobile go to different pages after the scratch.

Widget settings are shared by Desktop and Mobile, so the after-reveal page is the same on both. If pages were deleted or added on only one breakpoint, the page numbers stop matching. For example, the email page might be EP5 on desktop but EP8 on mobile. To fix it, rebuild the mobile breakpoint by duplicating desktop, so both use the same page numbers.

Running into an issue or have a question? Reach out to our support team via support@digioh.com and we'll be happy to help!