{{#markdown}} ### About the banner

The Web Guidelines Committee and Web Development team have worked to replace the existing cookie banner with one compatible with EMBL-EBI’s Data Protection efforts.

Tl;dr:If you’re using the EBI Visual Framework , don’t have a unique privacy policy and don’t use React or Angular, you don’t need to do anything else. #### What is it? It’s a bit like a cookie banner 2.0. It persists on page views until accepted and will reappear if the data protection policy is updated. See a comparison here. #### What’s it look like? The development version is in use on the Style Lab (also sceenshoted below)

### How do I use it If you’re using any version the EBI Visual Framework (v1.1, v1.2, or v1.3), you don’t need to do anything else. We’ll replace the cookie banner with this banner in time for 25 May 2018. #### If you have a unique privacy policy and need to customise the text, links Add the code below and the banner will be built accordingly: ``` {{> banner-data-protection}} ``` Be sure to `data-service-id` to match the URL stub from [your Data Protection record in the ContentDB](http://content.ebi.ac.uk/list-data-protection-records). Advantages for doing this are: 1. Those URLs are by definition unique per privacy notice. Using these prevents two teams accidentally giving the same service-id, and consent getting muddled up. 2. In the future we want this component to automatically pull in the latest version number from the corresponding privacy notice. The API to do that will need the service-id to match between this code and the [EMBL-EBI Data Protection Engine](http://content.ebi.ac.uk/list-data-protection-records). #### If you use a JS framework (Angular, React, ...) and the banner gets destroyed on page render Re-invoke the banner on page build with `ebiFrameworkRunDataProtectionBanner();` #### If you're not using the EBI Visual Framework: This banner code will be automatically invoked for users of the EBI Visual Framework, sites still using Compliance theme (or other frameworks) can add this JS code: ``` var localFrameworkVersion = '1.1'; // 1.1 or 1.2 or compliance or other // if you select compliance or other we will add some helpful // CSS styling, but you may need to add some CSS yourself var newDataProtectionNotificationBanner = document.createElement('script'); newDataProtectionNotificationBanner.src = 'https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/ebi-global-includes/script/5_ebiFrameworkNotificationBanner.js?legacyRequest='+localFrameworkVersion; document.head.appendChild(newDataProtectionNotificationBanner); newDataProtectionNotificationBanner.onload = function() { ebiFrameworkRunDataProtectionBanner(); // invoke the banner }; ``` ### How it works Acceptance will be stored on the user's device with a cookie name automatically derived from the `service-id` and `data-protection-version`. This sample implementation has been designed to be flexible and is currently being shown using the `ebi-lite.css` version. It will work the same using the full `ebi-global.css` ### Demo For an interactive demo, [see the sample CodePen](https://codepen.io/khawkins98/pen/LmWpMV). ### I have an idea/concern/problem Let us know! khawkins@ebi.ac.uk or [post to the GitHub issue](https://github.com/ebiwd/EBI-Framework/issues/137). {{/markdown}}