Privacy Label javascript library

Let's take a closer look at how the Privacy Label javascript library works.
‌
‌You will need to provide the PrivacyLabel object with two things before it can generate a label:

  • A JSON file that describes a privacy label.
  • A JSON file that contains all the languages you want to be able to translate the label into. 

Getting the translations

You can download the latest translations from the Privacy Label website. For example, this link will give you all available languages as a JSON file:
‌https://www.privacylabel.org/languages/json
‌
‌You can also get the same data, but as a javascript variable called `privacylabel_languages`. Additionally, if the library detects this variable when it is initialised, it will automatically load its languages.
‌https://www.privacylabel.org/languages/js
‌
You can also get a selection of specific languages like so (once again with the option to wrap it in javascript by changing json to js):
‌‌https://www.privacylabel.org/languages/json/en-gb,nl,de,fr,ro

Note: if you are going to be making large amounts of requests to our server, then please host the translation files yourself or get in touch with us.

Let's generate a label

Click on the button below to view a basic example. 

Open example in a new window


‌The example uses this code:



<‌html>
<head>
‌<meta charset="utf-8"/>
<‌title>Privacy Label example</title>
<link href="https://www.privacylabel.org/label/privacylabel.css" rel="stylesheet" media="all" type="text/css">
<script src="https://www.privacylabel.org/label/privacylabel.js"></script>
</head>
<body>
‌
<div id="privacylabel-container"></div>

// Initiate the Privacylabel object:
var main_label = Privacylabel();

// Show more details in the console:
main_label.setDebug(true);                 

// Set the element in which the generated HTML should be placed
main_label.setTarget('privacylabel-container');

// Automatically download language files from privacylabel.org:
main_label.setAutoDownloadLanguages(true);    

// Load a demo label JSON file:
main_label.loadLabelJson('https://www.privacylabel.org/examples/demo.json')
.then(function(outcome){
    console.log(outcome);
    
    // Now that the label data is loaded, generate the HTML and place it in the specified element:
    return main_label.generate();
    
})
.catch(function(err){
    console.log("Error:", err);
});
‌
‌</body>
‌</html>

‌‌‌

It does a number of things:

  • Loads a CSS file with some minimal styling for the label. This file is required because the library does not include the CSS in it's HTML output. Fun fact: the generated HTML also does not contain any javascript. The label is designed to work on devices that have javascript disabled.
  • Loads the Privacy Label library itself (privacylabel.js)
  • Creates an element called 'privacylabel-container' that the generated HTML will be placed into.
  • Creates the main_label object, which is the instance of the privacy label library.
  • Enables debugging. This will give more detailed output in the javascript console of your browser.
  • Enables autoDownloadLanguages. This feature will download missing language files from the Privacy Label websites automatically.
  • Loads a JSON file that contains label data.
  • Finally, when the download is complete, tells the library to generate the HTML and place it in the target container.
    •   

More examples

Looking at examples it a great way to learn, so we've provided a few.

Loading multiple JSON files in a promises chain

In this example the library loads two JSON files, and only generated the HTML once both files are loaded.

Example 2
Pre-loading serverside data

If you want to provide the library with data from a serverside script such as PHP, you could output the values directly into the HTML. This will bypass the need to load JSON files. If you use special names for your variables, the library will even automatically load the data when it initialises.

Example 3
Creating a language dropdown

This example demonstrates how you might create a language selection dropdown that changes the language in which the label is displayed whenever the user selects a new option.

Example 4

The library has many more options, which are discussed on the Javascript library methods page.