Home
Welcome to the Open Badges Displayer wiki!
Open Badges Displayer is a JavaScript resource for displaying baked badges. The Displayer extracts metadata from the baked badges in a Web page, displaying the information within a customizable, interactive component.
Dump the JavaScript (openbadges-displayer.min.js) and CSS (openbadges-displayer.min.css) files on your server, include them in your page and add this line of code (in a script section before your closing </body> tag):
window.openbadges.unbake();That's it! Any baked badge images in your page will be processed - the Displayer will present the metadata for each badge in an overlay on mouse-over and lightbox on click.
This is the default usage of the Displayer script, but you can tailor the results to suit your needs - read on for more details.
Presenting the metadata for an earner's badges helps to increase the perceived legitimacy of their achievements. The value in Open Badges lies in the supporting information about what a badge represents and who awarded it. By displaying this information alongside the badges, you can convey the earner achievement in an authentic way.
The metadata for an awarded badge is represented as a badge assertion. A baked badge is a badge image with the assertion embedded within it. This makes the badge portable, allowing the earner to display it wherever they want.
A badge assertion includes information about:
- who earned the badge
- what the badge represents
- who issued the badge
If you're new to Open Badge assertions, see:
If you're new to baked badges, see:
You don't need to know much about the tech involved in baking badges to use the Displayer, as the script will extract the data for you. However, some familiarity with the assertion structure may be required, depending on the detail of your display implementation.
The guidance above demonstrates a default implementation - with a little additional coding, you can control which image elements are processed and how the contained metadata is presented to the user.
By using the Displayer script to display Open Badges, you can present the data items from each badge assertion within your own custom Web interface - with all of your processing at client-side. The script handles extracting the metadata from the badge images, making the assertion information available to your client-side code so that you can build it into the page in any way you choose.
The default Displayer output may be sufficient for your needs: it creates an interactive lightbox effect in which the badge name and description are displayed on mouse-over and/or click - see the demo.
To add the Displayer to a page with baked badges in it, include the CSS in your page <head>:
<link rel="stylesheet" type="text/css" href="openbadges-displayer.min.css">Adjust the href to suit your own location.
Include the script and create a Displayer before the closing </body> tag in your page:
<script type="text/javascript" src="openbadges-displayer.min.js" inline></script>
<script type="text/javascript">
window.openbadges.unbake();
</script>Again, adjust the script location to suit.
The script will process any baked badge images included in your page. By default, it will attempt to process every img element, but you can tailor this behavior to select particular elements as follows:
window.openbadges.unbake({
className: 'badgeimg'
});This would apply to image elements with badgeimg as class name. To identify a badge image by ID, use this alternative:
window.openbadges.unbake({
id: 'badgeimg'
});To explore the metadata in the browser, use the window.openbadges.badges array:
window.openbadges.badges[0].assertionThis would access the assertion JSON for the first badge in the array.
When you browse to the page, use your browser console to explore the metadata via this object. For example, to find out how many badges you have assertion data for, check the length of the badges array:
window.openbadges.badges.length
As you will see, each element in the badges array includes an assertion object and an image. Your pages can access any of the data items in the badge assertion, which includes information about the earned badge and the issuing organization.
For more details, see Accessing Badge Metadata.