Blurred Coupon Code using JQuery

Securing a Coupon Code

Got asked to create a way to blur out a coupon code until a link is clicked today. Stop now if you’re looking for some eye popping, earth shattering effect because it’s not here..LOL. However it is kind of cool to see how it works, or at least one way you can do it.

The Concept

Blurred out Coupon Code

First let me say that I think if you really want to secure it up you may want to make a quick ajax call or something. Essentially never having the coupon code touch the DOM until you need it. That might be overkill and since I was adding this as kind of a widget for someone, not having direct access to the site, this worked well.

Secured Until Clicked Coupon Code

First thing I did was create a couple buttons. Nothing special they could even be just a link. The next they I did is create an image that had a code then I blurred the text using Photoshop. So basically our blurred out or secured code is the same each time but to the user it just looks like an unreadable code. So here we go. Let’s start with just a touch of css.

.blur { background-image: url('your_fake_blurred_coupon_code.jpg'); }

I’m assuming you understand what JQuery is and how to add a reference to the library either local or CDN. Now that we have that out of the way lets look at some markup. Below we have an anchor wrapped around an image. Again you could do without the image if you wanted. Take note of the two classes here that we’ll be using with our JQuery. That being “getcode” and “code”

Secure/Blurred Html Markup

Next lets look at the actual JQuery. When the page is ready JQuery iterates of “.code” essentially storing the actual coupon code in the element’s data cache. Hence preventing the typical user from just viewing source. Mind you this isn’t locked down as I mentioned. As the page loads if you were to look at the raw data you’d see these codes before JQuery iterates over them but we’re not trying to thwart that caliber of user. We’re trying to make sure Joe blow click the link so we get paid. So JQuery stores each code in data cache then makes the element’s text empty. These examples are more verbose than what I actually used, but should help be clear what’s actually happening.

When an element is clicked it retrieves the data from cache shows the coupon by appending a new element that fades in with our original code. and then opens the link to wherever its going with an assumed query param or something that the third party sees.

$(document).ready(function () {

$(‘.code’).each(function () {
var code = $(this).text();
$(this).data({ secure: true, code: code });

$(‘.getcode’).click(function (e) {

var hasCode, url, code, data, showCode;
hasCode = false;
showCode = $(‘


url = $(this).attr(‘href’);

if ($(this).next(‘div.code’).length > 0) {
hasCode = true;
code = $(this).next(‘div.code’);
data =;

if (hasCode) {


// change window open settings to whatever you prefer, ‘Get Coupon’, ‘width=600, height=400, top=200, left=300’);

Wrap Up

Not rocket science but that’s one way you can do it. Below is the faked blurred out coupon code graphic.

Blurred coupon code mask.

Tags: , , , , , , ,

About Origin1 Technologies

Developer: Asp.Net, MVC, JQuery, MS SQL, VB, C#, Java, Eclipse, Android, Apple, FileMaker Pro and others.

One response to “Blurred Coupon Code using JQuery”

  1. Curious Chap says :

    great stuff mate

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: