I recently worked on a project that involved creating an online scratch & win landing page. The scratch & win landing page was going to be used as an interactive way to offer discounts to customers for an upcoming conference. Here’s an overview of what I created and a template so you can build your own interactive scratch & win landing page.
How it works
The customer receives an email containing a link to the scratch & win landing page. The customer is taken to the landing page where they can scratch off their discount code for the conference. When the page is loaded it will show 1 of 2 discount codes or say ‘try again next time’. The discount codes are completely random, so no data work is necessary.
How to create your own scratch & win
The Setup
Graphics/Images
There were 5 required graphics for the landing page.
1. The overlay image
The overlay image is used to hide the discount code when the page has loaded.
2. Discount image
The second image contains one of the the discount codes and the amount of the discount for the conference.
3. Another discount image
The third image contains another discount code for the conference.
4. Try again image
The last required image was a ‘better luck next time’ image.
5. A coin image
5. This image is used as the cursor for the scratch & win.
The Page
The page is built with HTML, CSS and jQuery plugin.
CSS
The CSS is pretty basic. The scratch pad needs to have set a set width and height in order to work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .scratchpad{ width: 450px; height: 445px; border: solid 10px #FFFFFF; margin:0 auto; } body { background:#efefef; } .scratch-container { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width:100%; } .promo-container { background:#FFF; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:450px; padding:20px; margin:0 auto; text-align:center; font-family:'Open Sans', Arial,Sans-serif; color:#333; font-size:16px; margin-top:20px; } .btn { background:#56CFD2; color:#FFF; padding:10px 25px; display:inline-block; margin-top:15px; text-decoration:none; font-weight:600; text-transform:uppercase; border-radius:3px; -moz-border-radius:3px; -webkit-border-radiuss:3px; } @media only screen and (max-width : 480px) { .scratchpad {width:400px;height:396px;} .scratch-container {width:400px !important;} } @media only screen and (max-width : 320px) { .scratchpad {width:290px;height:287px;} .scratch-container {width:290px !important;} } |
The HTML
The HTML is simple. There’s a scratch container and a scratch pad which will contain the images for the scratch & win. The images will be added via jQuery in the next step. There’s also a section that contains the promo code (in plain text so the user can copy & paste) and the call-to-action to register for the conference. This section will be shown when the scratch card is more than 50% scratched.
1 2 3 4 5 6 7 |
<div class="scratch-container"> <div id="promo" class="scratchpad"></div> </div> <div class="promo-container" style="display:none;"> <div class="promo-code"></div> <a href="htttp://jennamolby.com" target="_blank" class="btn">Register Now</a> </div> |
The JavaScript
The javascript is where all the functionality for the scratch & win is.
First, I setup 5 variables. This is where all the promo code images are defined.
- promoCode: which will contain the plain-text promo code based on the randomized image.
- bg1: Contains the image path for the $400 off image
- bg2: Contains the image path for the $500 off image
- bg1: Contains the image path for the “Sorry try again” image
1 2 3 4 |
var promoCode = ''; var bg1 = 'https://jennamolby.com/scratch-and-win/images/400.png'; var bg2 = 'https://jennamolby.com/scratch-and-win/images/500.png'; var bg3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png'; |
Next, I added some code to randomize the scratch & win image and based on that image, display the corresponding plain-text promo code.
1 2 3 4 5 6 7 8 9 |
var bgArray= [ bg1, bg2, bg3 ], selectBG = bgArray[Math.floor(Math.random() * bgArray.length)]; if (selectBG == bg1) { promoCode = 'SCRATCH400'; } else if (selectBG == bg2) { promoCode = 'SCRATCH500'; } if (selectBG == bg3) { var promoCode = ''; } |
Lastly, the jQuery plugin code needs to be added.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$('#promo').wScratchPad({ // the size of the eraser size : 70, // the randomized scratch image bg: selectBG, // give real-time updates realtime : true, // The overlay image fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png', // The cursor (coin) image 'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default', scratchMove: function (e, percent) { // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched if ((percent > 50) && (promoCode != '')) { $('.promo-container').show(); $('body').removeClass('not-selectable'); $('.promo-code').html('Your code is: ' + promoCode); } } }); |
Here’s the final JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var promoCode = ''; var bg1 = 'https://jennamolby.com/scratch-and-win/images/400.png'; var bg2 = 'https://jennamolby.com/scratch-and-win/images/500.png'; var bg3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png'; var bgArray= [ bg1, bg2, bg3 ], selectBG = bgArray[Math.floor(Math.random() * bgArray.length)]; if (selectBG == bg1) { promoCode = 'SCRATCH400'; } else if (selectBG == bg2) { promoCode = 'SCRATCH500'; } if (selectBG == bg3) { var promoCode = ''; } $('#promo').wScratchPad({ // the size of the eraser size : 70, // the randomized scratch image bg: selectBG, // give real-time updates realtime : true, // The overlay image fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png', // The cursor (coin) image 'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default', scratchMove: function (e, percent) { // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched if ((percent > 50) && (promoCode != '')) { $('.promo-container').show(); $('body').removeClass('not-selectable'); $('.promo-code').html('Your code is: ' + promoCode); } } }); |
Putting it all together
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700' rel='stylesheet' type='text/css'> <title>Scratch Card</title> <style type="text/css"> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .scratchpad{ width: 450px; height: 445px; border: solid 10px #FFFFFF; margin:0 auto; } body { background:#efefef; } .scratch-container { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width:100%; } @media only screen and (max-width : 480px) { .scratchpad {width:400px;height:396px;} .scratch-container {width:400px !important;} } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { .scratchpad {width:290px;height:287px;} .scratch-container {width:290px !important;} } .promo-container { background:#FFF; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:450px; padding:20px; margin:0 auto; text-align:center; font-family:'Open Sans', Arial,Sans-serif; color:#333; font-size:16px; margin-top:20px; } .btn { background:#56CFD2; color:#FFF; padding:10px 25px; display:inline-block; margin-top:15px; text-decoration:none; font-weight:600; text-transform:uppercase; border-radius:3px; -moz-border-radius:3px; -webkit-border-radiuss:3px; } </style> </head> <body> <div class="scratch-container"> <div id="promo" class="scratchpad"></div> </div> <div class="promo-container" style="display:none;"> <div class="promo-code"></div> <a href="htttp://jennamolby.com" target="_blank" class="btn">Register Now</a> </div> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"></script> <script type="text/javascript"> var promoCode = ''; var bg1 = 'https://jennamolby.com/scratch-and-win/images/400.png'; var bg2 = 'https://jennamolby.com/scratch-and-win/images/500.png'; var bg3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png'; var bgArray= [ bg1, bg2, bg3 ], selectBG = bgArray[Math.floor(Math.random() * bgArray.length)]; if (selectBG == bg1) { promoCode = 'SCRATCH400'; } else if (selectBG == bg2) { promoCode = 'SCRATCH500'; } if (selectBG == bg3) { var promoCode = ''; } $('#promo').wScratchPad({ // the size of the eraser size : 70, // the randomized scratch image bg: selectBG, // give real-time updates realtime : true, // The overlay image fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png', // The cursor (coin) image 'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default', scratchMove: function (e, percent) { // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched if ((percent > 50) && (promoCode != '')) { $('.promo-container').show(); $('body').removeClass('not-selectable'); $('.promo-code').html('Your code is: ' + promoCode); } } }); </script> </body> </html> |
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
Hey, Love your work. It’s massively helpful.
quick question, is there a way for the cursor to make square scratches rather than circular? My use of this script requires the coin to be replaced with a square paint brush which would create rectangular scratches instead of circular ones.
Thanks so much
Hii jennaa.
You are working a great.
Actually i don’t sufficient words to define you and your work.
Thats Amazing.
I got my desired script from your site.
I really appreciate your work.
The way of teaching is unique and fantastic.
Have a nice journey DEAR.
Lve from india.