Interactive Scratch and Win Landing Page Tutorial

In:

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.

overlay

2. Discount image

The second image contains one of the the discount codes and the amount of the discount for the conference.

400

3. Another discount image

The third image contains another discount code for the conference.

5

4. Try again image

The last required image was a ‘better luck next time’ image.

sorry

5. A coin image

5. This image is used as the cursor for the scratch & win.

coin1

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.

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.

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



Questions?

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

Related Posts

  • 24/05/2017
    8 Tips for Creating Marketo 2.0 Email Templates From Scratch

    Over the past couple of months, I have been creating email templates using the new(ish) email template syntax in Marketo and I’ve learned a couple tricks along the way. To save you from some headaches, here are 8 tips that I’ve learned from creating Marketo 2.0 email templates from scratch.






  • 13/04/2017
    How to Use Salesforce Campaigns in Pardot to Track Campaign Influence

    Identifying which campaigns and channels have influenced an opportunity is a key piece of information to see which marketing campaigns are the most effective. In this tutorial, I’ll walk you through how I use Salesforce campaigns in Pardot to track campaign influence.






  • 30/01/2017
    5 Noteworthy Sales Cloud Features in the Salesforce Spring ’17 Release

    The Salesforce Spring ’17 release is being rolled out to all ORGs later this week, so it’s time to do a recap of my favorite features coming up in the new release. This release includes some of the most-requested Lightning Experience usability enhancements. If you’re like me and have been hesitant to switch your Sales Cloud users over to the Lightning Experience, this release might change your mind.






2 comment(s)
  • Dallas Thurn

    29/12/2016 at 6:21 pm
    Reply

    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
      Reply

      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.

Leave A Comment

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

About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts