(1 minute read)
One of my current clients is the Sandbag Climate Campaign. They're a small organisation primarily focussed on the European carbon emissions trading scheme as well as the upcoming global climate conference at Copenhagen (COP-15).
One of their latest projects is a global parkour jam titled "One Giant Leap!", designed to raise the public's awareness of the importance of the upcoming conference. The jam is scheduled to take place on Saturday, September 26th, 2009 in over 30 countries simultaneously (see the map).
One of my tasks for this has been to create a pop-up widget which lets web users sign the One Giant Leap petition online. The requirement was for anyone to be able to embed this widget into their website. It had to stand out and couldn't take up too much space on a page. After much fiddling with Javascript and CSS and with help from the other Sandbagger's in terms of aesthetics a widget is finally born!
To embed the widget you simply need to add the following line to your webpage:
<script class="copenhagen_petition" src="http://sandbag.org.uk/embeddable_widgets/copenhagen_petition.js" type="text/javascript"></script>
This Javascript file first loads and initialises the jQuery library. It then generates the anchor link image you see in front of you. When you click the image a Thickbox pops up with the full sign-up form. The form is generated using the same PHP code used to generate the original petition form (albeit with minor style changes). Indeed, when you submit the widget form the server thinks you've just submitted the original petition form.