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 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

Here are the steps you need to complete to quickly achieve compliance.

Add the code below to every page on your website

This code loads the Flipdish cookie modal into your website

<script type="text/javascript" src="https://flipdish-cookie-consent.s3-eu-west-1.amazonaws.com/www/production/latest/fd-cc.js"></script>

Launch the modal

On every page load, the page should initialise 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 initialising 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 categorised 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

At the moment, the cookie modal lists 4 categories for the user.

1. Necessary
These cookies are strictly necessary for the website to perform its necessary functions. For Flipdish web ordering, this means things like remembering authentication, and security cookies to enable secure payments.

2. Functional

These cookies enable things like a longer authentication time, so the user doesn't have to log in every time. For you, they could be things like remembering user preferences perhaps.

3. Performance

These cookies are for trackers that measure the performance of your site, for instance Google Analytics. They do not include cookies to do with advertising

4. Advertising

These cookies are for providing a better ad experience for your user. One example that could fall into this category would be Facebook tracking pixels.

Please Note

This article is not intended to be legal guidance. It is only to describe how you might use the Flipdish cookie management modal to help achieve compliance on your site. Every website is different, and uses different cookies for different purposes. Please seek legal advice for all matters concerning compliance in your jurisdiction.

For developers, see a working codepen here.

Did this answer your question?