Interactive Scratch & Win Landing Page Tutorial

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.

View Demo

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.

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;}
}

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.

<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>

</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

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 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.

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 = '';
  }

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.

$('#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);
        }
      }
 });

$('#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

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);
        }
      }
 });

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

<!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="https://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>

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>

<head>

<title>Scratch Card</title>

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>

<a href="htttp://jennamolby.com" target="_blank" class="btn">Register Now</a>

</div>

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>

View Demo

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

How it works

How to create your own scratch & win

The Setup

Graphics/Images

1. The overlay image

2. Discount image

3. Another discount image

4. Try again image

5. A coin image

The Page

CSS

The HTML

The JavaScript

Putting it all together

Questions?

Receive my latest posts directly to your inbox

What are you interested in?

18 Comments

Leave a Reply Cancel reply

Related Posts

How to Code a Simple, Responsive Email From Scratch

How To Use Conditional Comments To Target Outlook

How to Prevent Form Spam by Using The Honeypot Technique