JustGiving has a rich set of public REST APIs available to the developer community but their uptake can be a challenge for many of our charity and fundraising customers who lack the technical expertise to use them. So we decided to build out a set of JustGiving widgets, powered by our APIs. These allow our data sets to be consumed widely with a simple cut-and-paste code snippet. For example, we’ve released a widget that means charities can have a leader board of their supporters fundraising pages on their site. In this two-part post I talk over the approach used to build JustGiving widgets.
The widgets needed to meet the following criteria:
– Require no technical expertise to use
– Be flexible in terms of their content and complexity
– Built from client-side technologies to minimise workflow overhead
– Have a fluid layout
– Allow users to select different configurations for their widget
– Work cross-browser and cross-device
– Lightweight and fast and leave no code or performance footprint on our users’ pages
– Be easily iterated so new widgets can be built quickly
What is a widget?
To clarify, by the term ‘widget’ I mean a piece of JustGiving functionality that can be added and displayed on an end-user, third-party website [I shall refer to this site as the ‘host’ site]. If you’ve ever used a Facebook like button on a website other than Facebook you’ve used a widget. Our initial offering of widgets will aim for simplicity, but the sky’s the limit as to which widgets we build, from leader boards and data visualisation, to mash-ups with other 3rd-party APIs.
Problem 1: Adding JustGiving functionality to a third-party webpage
There’s a downside and this is that iframes are not inherently flexible when placed within the DOM. As with any browser window, if the content inside an iframe is larger than the iframe’s dimensions, scroll bars are triggered creating a poor user experience. The solution to this problem is explained a little later.
Problem 2: Simple to use
Problem 3: A fluid iframe
You can read about the next steps in building out the JustGiving widget framework in part 2 of this two-part post.