Cookie alert on the website

Design help Custom code
1

Hi,

can someone help me on how to create the cookie alert message on the HP of my website, with a button that accepts and closes it

thanks

2 Likes
2

Hello @orio,

Designing a popup or whatever element to show a button is one thing.
Actually managing cookie storage in another…

Here is 3 third-party solutions to manage cookie consent:

  1. https://www.cookiebot.com/
  2. https://www.iubenda.com/
  3. Setup GDPR Cookie Consent Notification with Google Tag Manager

All 3 methods can be implemented through Google Tag Manager and are quite easy to set up.

Happy GDPR,

Laurent

4 Likes
3

update 2020 (The site redesign).

The “wizard” under download:
https://www.osano.com/cookieconsent/download/

“start coding”:

image
image1163Ă—817 52.3 KB

step 1 (Work with this wizard)

style/colors/layout
https://www.osano.com/cookieconsent/download/

copy the code

step 2

Project Settings → Custom Code → before body (or head) → Paste :slight_smile:

Copy-paste example:

image
image650Ă—524 24.6 KB

1 before head on webflow. 2 before body on webflow

image
image765Ă—554 36.4 KB

8 Likes
4

Hey Siton,

A follow up question if you don’t mind :raised_hands:

I want to create my own CSS style for the popup. I am trying to reference the theme in order to make changes, but I can’t figure out how to make the reference correctly.

Theme name - edgeless

I tried to place this style tag after the script tag:

style
.cc-style-edgeless
{
font-family: “fira”;
}
/style

Can you point me in the right direction?

Thanks!

5

@pitz You should learn about CSS-Selectors and Specificity
(No way to teach this by forum answer).

For the font use this (Not related to the theme)

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" >
   <style>
        .cc-window{
            font-family: "fira";
        }
   </style>

Next, by CSS you can select each element (button and so on). Your custom/override style must be after the call for the cookieconsent CSS (“last win”).

Look at this example (Sass)

4 Likes
6

Thanks so much @Siton_Systems ! I am learning CSS/JS at the moment. This was really helpful!

1 Like
7

And Thank You from me :slight_smile:

8

EDIT: Disregard – I failed to put the code on every individual page in addition to custom code in settings. All good now. Thanks again for your help.

Thanks for linking that resource. I just copied it into my custom code, but haven’t been able to see the cookie notification. Do I just need to be patient and give it more time to work?

Full disclosure: my coding skills are somewhere between weak and non-existent, so copying and pasting this in was about the best I could do. Sorry in advance if that makes answering my question more difficult.

9

Great advice! I now have my own personalized cookie notification. Thank you very much

10

This was super helpful! Thank you @Siton_Systems :slight_smile:

1 Like