Interactive Scratch and 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.

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


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.


The CSS is pretty basic. The scratch pad needs to have set a set width and height in order to work.


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.

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.

  1. promoCode: which will contain the plain-text promo code based on the randomized image.
  2. bg1: Contains the image path for the $400 off image
  3. bg2: Contains the image path for the $500 off image
  4. bg1: Contains the image path for the “Sorry try again” image

Next, I added some code to randomize the scratch & win image and based on that image, display the corresponding plain-text promo code.

Lastly, the jQuery plugin code needs to be added.

Here’s the final JavaScript

Putting it all together


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

Related Posts

  • 07/07/2020
    How I Passed The Salesforce Certified Pardot Consultant Exam: Flashcards, Resources & Tips

    Are you already a Salesforce Certified Pardot Specialist? Do you have around 12 months or more of hands-on experience implementing and administering the Pardot Lightning App and Salesforce platform? The next step in your Pardot certification journey is to take the Salesforce Certified Pardot Consultant exam. In this post, I share how I prepared for the exam, what study resources I used and share the flashcards I created to pass the exam.

  • 01/07/2020
    How to Prevent Lead Source From Being Overwritten in Salesforce

    Creating a validation rule in Salesforce is a great way to restrict certain users from making updates to a particular field. Let’s look at how a validation rule can be used to restrict who can update the lead source once the lead source has a value.

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

18 comment(s)
  • Mike

    02/11/2018 at 7:59 pm

    Have you ever thought about a way to add a scratching sound to this?

  • opoy

    19/05/2018 at 12:19 am

    this part doesn't appear to work? 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); } }

  • Bailey Wilson

    08/12/2017 at 6:19 am

    Hey Jenna! Love this! How would you recommend limiting the number of winning tickets? We would like to use this but only have 5 or 10 winners. Another option we would like to include is only allowing each person to scratch once per hour. Might you have any ideas on how to incorporate that type of functionality? Thanks!

    • Donald
      to Bailey Wilson

      25/11/2018 at 11:15 pm

      @ANETTE I would insert each result into a database... $user_id = $_SESSION['user_id']; $promo = // Variable stored based on scratcher results $400 off, etc. Likely passed through a $_POST global variable. Example... $query = "INSERT INTO sales(user_id, promo) VALUES(:user_id,:promo)"; $stmt = $db->prepare($query); $stmt->bindValue(':user_id',$user_id); $stmt->bindValue(':promo',$promo); $stmt->execute(); Then count the number of promos accepted... $query = "SELECT * FROM sales"; $stmt = $db->prepare($query); $stmt->execute(); $counter = $stmt->rowCount(); Then execute conditional statement... if($counter >= 10) { // Do Nothing } else { // Execute Scratcher promo code here }

  • Anette Egsgaard

    14/09/2017 at 5:16 am

    Hi Jenna I was very happy to find this script as I am trying to make a Facebook tab with scratch and win. It dosen't seem to work and I have changed all pictures and link to my own images and links. Would it be a problem to use this in a facebook tab, would you know anything about this? Thank you for making this script. kind regards Anette

    • Jenna Molby
      to Anette Egsgaard

      14/09/2017 at 9:35 am

      Hi Anette, sorry you're having trouble with the script. I never created Facebook tabs before, so I'm not familiar how to get it to work for you within Facebook.

    • Rafa
      to Anette Egsgaard

      25/10/2017 at 11:49 pm

      Hello thanks for your script, a query: I installed it but when you scratch and win the "Register Now" button does not appear, can you help me?

    • Jenna Molby
      to Rafa

      26/10/2017 at 1:19 pm

      Hi Rafa, Can you share a link to your page with me? I can help you troubleshoot from there. Cheers, Jenna

    • Louis
      to Jenna Molby

      11/12/2017 at 10:11 pm

      Hi Jenna, first I would like to say thank you for this wonderful script, it sure helps non-technical person like me who needs to create email campaign on a daily basis. I also tried to mimic your code (just copy and paste on html file) but it seems the promo-container is not popping out even with the original code. Would that be an reason in this code which prevent .promo-container from now showing? Your answer is highly appreciated. Louis

    • Jenna Molby
      to Louis

      12/12/2017 at 9:29 am

      Hi Louis, This will happen when the images and the JS file (wScratchPad.min.js) are not hosted on the same domain. Try uploading them to your website and then update the paths within the HTML/

    • Mariam
      to Jenna Molby

      19/03/2018 at 8:39 am

      Hello Jenna your code is the best for scratch to win example! I tried your code but i have the same issue as RAFA, (the part of the code+ register now is not showing) Could you please tell me what was the solution for his problem? Thanks

    • Jenna Molby
      to Mariam

      19/03/2018 at 11:53 am

      Hi Mariam, So happy you like the scratch & win! Are you hosting the JS file (wScratchPad.min.js) on your own server? This should fix your problem. Thanks, Jenna

  • Dallas Thurn

    29/12/2016 at 6:21 pm

    This is exactly what I'm looking for. Is there anyway to stop a person from just refreshing the page or clicking the link twice and getting a different result?

    • Jenna Molby
      to Dallas Thurn

      30/12/2016 at 9:08 am

      Hi Dallas, Glad you found it useful. You could always store a cookie with the value of the scratch and win. That way when they refresh it will pull from the cookie instead of generating a new value.

    • Louis
      to Jenna Molby

      11/12/2017 at 10:13 pm

      Hi Jenna Would that be any chance you can show me how we can incorporate this set and retrieve Cookie can be done in your existing script? Tried to take reference to other sources like W3School but just couldn't make it work. Thanks. Cheers, Louis

    • Jenna Molby
      to Louis

      12/12/2017 at 9:29 am

      Hi Louis, I would use the jQuery cookie library for this:

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Most Commented
Popular Posts