Streaming live at 10am (PST)

Cookie consent by Insite


#1

Hello folks, I’m trying to get a cookie consent modal window working (by Insite, https://cookieconsent.insites.com/) and stumbled upon a problem. A newbie question really:

I’ve got the first part of their wizard: putting the code they provide into the header – that one is easy. But what about the second part – letting users opt out of using cooking. Description on their website says that ‘If you have chosen opt-in or opt-out as your compliance type (code that goes into header), you will need to disable cookies on your site depending on the user action. Disabling cookies should be done with the callback hook:

Unfortunately I have no clue what is a callback hook or where should I put this code in webflow:

Can anyone supply me with a very basic explanation, or whether it is even possible to do without prior experience with coding. Thanks in advance :slight_smile:


#2

Hi, I have a similar query.
Using the code snippet from the Cookie Consent by Insites wizard the cookie banner displays fine but with no functionality. Read Only Link and Site URL

My JavaScript is rusty but I think the code generated by the wizard, passes strings and the .js and css files are hosted by Insites on CND Cloudflare, Wizard Code
whilst the code in the documentation hosts the .js & css files are locally and passes objects Code Snippet in Documentation
The .js file is far to big to use in Custom Code or Embed in Webflow

I can’t see how to implement this code in Webflow in order to add the functionality.

Thanks in advance too! :grinning:


#3

Hi there,

Definitely a great question in regards to creating a cookie popup. I’m happy to help!

You may find this helpful for creating the cookie popup: Show a popup based on a cookie — Free clonable template

The awesome @vincent provided a cloneable project specifically for popups with cookie consent.

You can view the live site at http://cookie-template.webflow.io/, and the cloneable project can be found at https://webflow.com/website/Webflow-Cookie-Template

Definitely, great question!


#4

That is still very useful (and it’s what I’ve used in the past), but it doesn’t address how to implement an Opt-In or Opt-out system. As in, something that would allow the site to:

  1. Block any cookie from being used or stored unless given consent by the user.
  2. Give the user the ability to revoke this consent at any point.

#5

Hi mistercreate,

Yes I have seen Vincents cloneable template.
The GDPR legislation is different for different locations, so great as Vincents template is, it is the code behind the added functionality I’m concerned with.

They need to have the option to accept, decline (not run the scripts for the cookies) and change their mind (revoke choice function)


#6

Hi there,

Definitely great points!

I’m not extremely familiar with the following, but I was able to locate a service that provides a GDPR compliant cookie implementation: https://www.cookiebot.com/en/

The cost seems fairly reasonable, and you can implement it for free on one domain with less than 100 pages: https://www.cookiebot.com/en/pricing/

Hopefully this is helpful :nerd_face:


#7

Cookie Consent by Insite can provide all this functionallity… free! And it works in Webflow.
Their documentation provides the code snippets but you have to piece them together. My Javascript is a bit rusty.

The issue for me is, if the .js and css are not local, the are far too big for Custom Code and Embedded code, the banner code snippet is different and don’t know how to incorporate the rest of the code!


#8

I have tried Cookie Bot, it’s very good b ut it didn’t seem to work in Webflow.

Read Only Link

Veiw Site

Their documentation is very clear and it was simple to implement


#9

Exactly! I’ve seen all templates mentioned in this thread (and many other topics on the issue), also talked to support and I can CONFIRM that as of now there is NO way to implement opt-out system for cookies.

It’s really disappointing that Webflow staff points out Vincents guide – because it’s misleading users into thinking that their website complies with GDPR, and it’s not.

Guys at Webflow, if you are reading this – please take note – this needs to be addressed via NATIVE FEATURE built into your service as soon as possible.


#10

I used to use Cookie Consent by insite. It was great for consent without agree / disagree but was tricky to add code to exclude elements like Google Analytics. So I’ve switched to Cookie-Script. I found it so easy to set up. They have this page for adding third party cookie blocks - so simple! I do pay 48 euros a year, but this is for over 50 sites (you can have unlimited sites) and because all our sites are https. They do a have a free option for http sites. Also their support is great. I’m just converting all my sites now. Just 18 more to go and takes me under 10 minutes per site.


#11

Hi pnewest, Thanks for the heads up, it looks good, we will try Cookie Script


#12

You’re very welcome Helen. I’m sure you’re aware, but it’s worth adding the Google Cookie Inspector widget to Google Chrome. That way you can test your cookie blocking on the fly. A good example is for Google Analytics blocking. If you edit <script>for <script type="text/plain" data-cookiescript="accepted"> at the start of the analytics code. Then when published try ‘accepting’, refresh page and you’ll see the gid, gar, gat etc. cookies there. Then ‘decline’ and refresh the page and they’ll go and just ‘ironically’ be replaced with the reject Cookie Script cookie. All good stuff - I’m really pleased! Mike.


#13

Here is another question regarding “Cookie consent by Insite” How would one add a target _self (same window) to the code below in order to link to your own privacy page? The code provided by “Insite” opens the link in a new tab:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebebeb",
      "text": "#404040"
    },
    "button": {
      "background": "#ff0099",
      "text": "#ffffff"
    }
  },
  "content": {
    "href": "http://example.com"
  }
})});
</script>

#14

Ok, here is the working code regarding “Cookieconsent” opening the “Learn more” link in the same window:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebebeb",
      "text": "#404040"
    },
    "button": {
      "background": "#ff0099",
      "text": "#ffffff"
    }
  },

  "elements": {
      'messagelink': '<span id="cookieconsent:desc" class="cc-message">\{\{message\}\} <a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="\{\{href\}\}" target="_self">\{\{link\}\}</a></span>',
      'link': '<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="\{\{href\}\}" target="_self">\{\{link\}\}</a>'
          },
  "content": {
    "href": "https://www.example.com/learn-more" 
  }

})});
</script>