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.
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.
The development version is in use on the Style Lab (also sceenshoted below)
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're also using the VF 2.x, you should use its data protection banner. The 1.4 banner can be disabled by adding an element with data-protection-message-disable="true"
.
Add the code below and the banner will be built accordingly:
<div id="data-protection-message-configuration" data-message="Your message and links <a class='white-color' href='#test'>here</a>." data-service-id="myService" data-data-protection-version="0.1"></div>
Be sure to data-service-id
to match the URL stub from your Data Protection record in the ContentDB.
Advantages for doing this are:
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.
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.
Re-invoke the banner on page build with ebiFrameworkRunDataProtectionBanner();
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
};
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
For an interactive demo, see the sample CodePen.
Let us know! khawkins@ebi.ac.uk or post to the GitHub issue.