Here's how you can use the free Flipdish cookie modal to help with meeting EU requirements on cookies.
We've built you a cookie management modal that you can use on your own site, that lets your website visitors easily manage their cookie preferences, meaning you can stay on the right side of GDPR and e-privacy directive compliance.
Warning: It's critical that you and your team understand GDPR, the e-privacy directive, and the correct management of cookies before adding this to your website. Simply adding the code will not make you compliant, the Flipdish cookie modal simply enables the easier management of cookies, but there will still likely be development work for you to do to classify your own cookies correctly, and only have your website use those cookies when the user has made the appropriate selection in the Flipdish cookie modal. This article does not constitute legal advice.
Here are the steps you need to complete to work towards compliance.
Add the code below to every page on your website
This code loads the Flipdish cookie modal into your website
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
Launch the modal
On every page load, the page should initialize the cookie management, using the code below. If the user has made a choice before, the modal will not render. If the user has not made a choice, the modal will pop up and the user will need to make a choice before continuing to use the website.
When initializing the modal, there are 4 optional parameters:
cookiePolicyUrl
Required - the location of your cookie policy on your website
Lang
Optional - defaults to EN - A two-letter code representing the language to use
LogoUrl
Optional - The URL to your logo if you'd like to display it in the modal
restaurantName
Optional - The name of your business
(function() {
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else { document.addEventListener("DOMContentLoaded", fn); }
}
docReady(function() {
window['fdCc'].init({
lang: 'en', // set the language to display
logoUrl: '', // a custom logo url
restaurantName: '', // your business's name
cookiePolicyUrl: '', // where users can find your cookie policy
})
})
})()
Handle your user's choice
So far, your users will see the cookie modal when they visit your site and will need to make a choice of what level of tracking they're comfortable with. However, we need to add some logic that handles when the user confirms their choice.
To do that, we can provide a callback function to the init() call. A comma-separated string of the cookies that your user has opted into will be passed to the callback function as its only argument
function(result) {
/*
we don't need to check for the 'necessary' value
those cookies can run without explicit consent
However, they must be categorized as such in your cookie policy,
and they must also actually be explicitly necessary
for the minimum functionality your site offers
*/
if (result.includes('functional')) {
console.log('Including the functional scripts');
/*
The user has accepted cookies classed as "functional"
We can use scripts that use cookies that are
classed under "functional" in your cookie policy
-- Paste functional scripts below --
*/
}
if (result.includes('performance')) {
console.log('Including the performance scripts');
/*
the user has opted in to the use of
cookies classed as "performance"
we can use scripts that use cookies that are
classed as "performance" in your cookie policy
-- Paste performance scripts below --
*/
}
if (result.includes('advertising')) {
console.log('Including the advertising scripts');
/*
the user has opted in to the use of
cookies classed as "advertising"
we can use scripts that use cookies that are
classed as "advertising" in your cookie policy
-- Paste advertising scripts below --
*/
}
}
The cookie categories
<