Snippets, Tutorials

Click to copy and open site script

I needed a script that copies a text (in my case, coupon code) onto clipboard and then open the web address associated with the coupon in a new window for my Coupons for Webmasters page. For the clipboard copying, I'm using ZeroClipboard script written by Joseph Huckaby. ZeroClipboard is a free and open source library that provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. And opening a new window was easier than I thought, with jQuery and a bit of googling.


<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type='text/javascript' src=''></script>
<script type="text/javascript" src="clipboard.js"></script>

<body >
<h1>Zero Clipboard Test</h1>

<div class="coupon">
<h3>Hostgator Hosting Coupon</h3>
<div class="desc">20% off all plans for new customers</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="">GREEN</div>
<div class="coupon-link">Click to copy</div>

<div class="coupon">
<h3>Godaddy Domain Name Coupon</h3>
<div class="desc">$7.49 for any .COM domain</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="">OYH7</div>
<div class="coupon-link">Click to copy</div>

<div class="coupon">
<h3>Website Templates</h3>
<div class="desc">5% off any template (no coupon required)</div>
<div class="expiry">Expiry date: 10 June 2010 </div>
<div class="coupon-link"><a href="" target="_blank">Go to site</a></div>


ZeroClipboard Script (download at Google Code)
You'll need ZeroClipboard.js and ZeroClipboard.swf.



var clip = null;
var url = '';

function init() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );
	$('.coupon-code').mouseover( function() {
		if (clip.div) {
			clip.receiveEvent('mouseout', null);
		} else {
		clip.receiveEvent('mouseover', null);
		url = $(this).attr('rel');
	clip.addEventListener('mouseUp', function(client) {;
$(document).ready(function() {

See the code in action at Coupons for Webmasters. RetailMeNot is also using a similar script to achieve the same result.

5 thoughts on “Click to copy and open site script

  1. Hello,can you give me tips on how to do this with word press , I tried many times but it not displayed ??
    thanks in advance :)

  2. Hi Ei:

    I played with this all day long and struggled a bit. Please help.

    I would like the script to copy to clipboard only. I do not want the script to open a new window to the store’s site.

    Currently, I have it set up as follows. The script doesn’t work this way.


    Your script works when I set up as follows:

    The script works when I set up as follows.


    But, this makes it so hard to control CSS hover effects on the COUPON CODE itself, since it is not an anchor link.

    Can you give a reduced version of your code to just perform the copy function?

    Secondly, do you know wheter the ZeroClipboard script supports copying the text of a hyperlink?

    Thanks in advance.


Comments are closed.