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

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

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.

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.

For more information please contact our support team via "help@flipdish.com".

To learn more about Flipdish’s products or how to grow your online business enroll for FREE in the Flipdish Academy here: http://academy.flipdish.com.