Add transparency information according to the GDPR to your website using your privacy policy in TILT format and save the privacy preferences using YaPPL. Designed according to Effective regulation through design (by Grafenstein et al. 2021) proposed by the Privacy Icons Forum and technically powered by the Transparency Information Language and Toolkit (Grünewald and Pallas 2021).
For more information, see also:
- Privacy Icons Forum: https://www.privacy-icons.info/
- TILT: https://github.com/Transparency-Information-Language/meta
- YaPPL: https://github.com/yappl
Disclaimer: This is a very prototypical implementation and not yet recommended for production use cases.
- The framework is built using Bootstrap, jQuery, and Cytoscape.js
- Relevant privacy information is loaded from tilt documents
- Depending on the purposes and data categories specified in the tilt document, the corresponding privacy banner is rendered
- Users can then specify their privacy settings by changing the toggle buttons
- These privacy preferences are output as a YaPPL preference. Here they saved in local storage with the key "YaPPL".
- The information stored in the YaPPL is used when re-loading the page.
- tilts/ folder contains exemplary privacy policies in tilt-format
- Icons/ folder contains preliminary privacy icons
- Img/ folder contains background images
- For adding other purposes change
main_privacy.jsfunctionload_componentsin line 368.
- Clone repository with
git clone
- Open file
index_pif.html - Click on the buttons or enter a custom tilt to show the transparency information for the different services
For an example check out the index_pif.html.
- Save your tilt file as a String named
tilt:
tilt = `{"meta": ...}`
- Add jQuery and load your tilt as a script in your
<head>tag:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script type="text/javascript" src=path_to_tilt></script>
- Add the function calls
load_YaPPL_cookie()andload_tilt(tilt)to your<body>tag and start your body with a div for the privacy banner:
<body onload="load_YaPPL_cookie(); load_tilt(tilt);">
<div id="privacy_info"></div>
- At the end of your body add the following scripts to load the privacy banner
<script type="text/javascript" language="javascript" src="privacy-banner-code.js"></script>
<script type="text/javascript" src="privacy-banner.js"></script>
- Alternatively, load them via a CDN from Github
<script src='https://cdn.jsdelivr.net/gh/DaSKITA/privacy-icons@master/privacy-banner-code.js'></script>
<script src='https://cdn.jsdelivr.net/gh/DaSKITA/privacy-icons@master/privacy-banner.js'></script>
- Elias Grünewald [Corresponding Author]
- Johannes Halkenhäußer
- Flora Muscinelli