Scenario:

Let’s assume you found an awesome website in your niche. The target website only accepts 250×250 adverts or widgets which is not suitable for your needs because you want to put an image of your product along with some intro text and links to your website. So what do you do?

Well, create a 250×250 pixel widget which has your image but on hover or click it flips and shows the intro text and links to your product landing pages on your website.

In my example, initially the advert/widget will only display an HTC phone but when you click anywhere on the widget it will flip revealing your text and links.

What can you do with this Widget?

  • You add/edit/delete links remotely
  • You can change anchor text remotely
  • You can change the background and product image remotely
  • You can change the CSS styling remotely

Check out the demo.

 

All you have to do is edit the JSON file on your CDN ┬áto change links and anchor texts. Remember, target website(s) hosting your widget don’t have to be notified or anything. In fact with this widget you will able to change the artwork and inject anything you want.

Note: You should not change links or the look and feel of your widget without first agreeing with those who host your widget. I wouldn’t like it if someone did it to me so I will never do it to others!

JSON link data source:

Here is how the JSON data source looks like. Basically every link has a URL and an anchor and are defined like below. Change these and the widget will be updated on all websites.

Here is the code that parses remote JSON and handles flip function. If you are new to JSON/jQuery combo, remember that there is a cross-domain restriction policy unless you used jsonp like I have done below.

$(document).ready(function(){
$(function () {
jQuery.get('https://www.rocketmill.co.uk/labs/Tests/links.json', null, parselinks, 'jsonp');
});
$('.jsonturn').bind("click", function () {
var jsonWidget = $(this);
if (jsonWidget.data('flipped')) {
jsonWidget.revertFlip();
jsonWidget.data('flipped', false)
} else {
jsonWidget.flip({
direction: 'rl',
speed: 100,
onBefore: function () {
jsonWidget.html(jsonWidget.siblings('.jsonPayload').html());
}
});
jsonWidget.data('flipped', true);
}
});
});

function parselinks(j) {
$.each(j.payload.link, function (i, j) {
$('.links').append(
$('<a/>').attr('href', j.url).html(j.title), '<hr />');
});
}

Please use this widget responsibly.

Performance Note:

You can deploy this widget as found but bear in mind I only put this together as a proof of concept/functional prototype. This is not optimised because it doesn’t check whether jQuery and other dependencies are already available or not. Ideally, you should extend this widget to check for existing libraries. If a library or plugin is already included then it should not load it twice.

Checking included libraries can be tricky sometimes, I will cover that issue in another blog post.