Streaming live at 10am (PST)

Privacy policy statement pop-up


#1

Is there a way to create a pop-up for a privacy statement that will show up on any page, but only once per user visit? So if the user entered through the blog they’ll see the statement, but if they go to the homepage from there it won’t show up again?


#2

Hello @pitz

This topic can help you:


#3

Thanks!! Was looking for a post like this.


#4

I’ve tried to implement the code as described in the post, but it’s not working yet. Maybe I haven’t named the classes correctly?

My project

I named the complete message div - popup and the button popup-close

The custom code I used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(localStorage.getItem('popupState') != 'shown'){
        $(".popup").delay(2000).fadeIn();
        localStorage.setItem('popupState','shown')
    }

    $(".popup-close").click(function(){ // You are clicking the close button
        $('.popup').fadeOut(); // Now the popup is hidden.
    });
});
</script>

CC. @aaronocampo @LuckyScooby

Thanks for looking into this


#5

cookieconsent.js

Use this libary (Time saver - great code - easy to use - minimal extra code - cool design - hide after the user clicks ok)

step 1 (Work with this wizard)

style/colors/layout


copy the code

step 2

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

Thats it :slight_smile:


#6

Thanks @Siton_Systems. It works!

Do you know if there’s an easy way to style it through Webflow somehow? The default designs breaks the site’s visual consistency.

I’d like to change font family, font size and container size. And if possible to put a delay on it, so it shows up 2 seconds after page load


#7

Mark the message above as solved (for future searches + close this topic). Thanks :slight_smile:

EXTRA STYLES

No way by webflow. But you could use the selectors (custom CSS).
add this (last/after the CSS call) - how to find your font-family - inspect your site and thats it.

custom/extra css

.cc-revoke, .cc-window{
       font-family: my-font;
       font-size: 16px;
       line-height: 24px;
 }

same idea for .cc-btn

.cc-btn{
   border-radius: 20px;
}

Example her:
https://cookieconsent.insites.com/app/themes/insites-cookie-consent/examples/example-2-custom-theme.html

the extra code of this example:
https://cookieconsent.insites.com/app/themes/insites-cookie-consent/examples/customTheme.css

##write me in private i will guide you (The rest of this is only regular CSS - no way to teach or solve this by forum Q)

extra delay

About delay - no API for this (only be custom JS)


#8

Thanks man!

This seems like a great solution to the privacy statement, but in my case it’s a bit too limited. I really need control over motion, visual and UI.

Any suggested why the script I used earlier didn’t work?

Here’s a link to the project
https://preview.webflow.com/preview/taxpas?preview=fceb6b6ae882800fd523efb8f9ba477c

And the script I got

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(localStorage.getItem('popupState') != 'shown'){
        $(".popup").delay(2000).fadeIn();
        localStorage.setItem('popupState','shown')
    }

    $(".popup-close").click(function(){ // You are clicking the close button
        $('.popup').fadeOut(); // Now the popup is hidden.
    });
});
</script>

Thanks!


#9

Limited animation? This is cockies popup :slight_smile: no need for any Pyrotechnics her.

Add live url (No way to see custom code by the designer :slight_smile: )


#10

I know, I know… but I’ve been working the details on this project, and seeing this message pop up like that before my page started loading ruins the work I’ve put into it.

the site is live here
taxpas.nl


#11

Hey,

If you want to apply the banner to all pages and be GDPR compliant the best way to do this is add Iubenda cookie consent banner via Google Tag Manager, it will apply to all pages on the domain and once the user consents on the page it will not show again and keeps the consent for 7 days I think. You can also overwrite the code in tag manager with custom HTML to change the message, banner design or add an accept button. Just drop the tag container code into the custom code section (head/footer) in Webfow and GT will do the work for you it will not interfere with the site layout. It will automatically disable cookies on loading until consent is given by setting it to fire on page load and other 3rd party cookies to fire on consent.


#12

This is how we did this with Iubenda and GT

Register with Iubenda, https://www.iubenda.com/en/pricing - the free option contains the banner. Create a Google Tag Manager container for the site.

Add Iubenda - Custom HTML Tag:
var _iub = _iub || []; _iub.csConfiguration = {“lang”:“en”,“siteId”:YOUR SITE ID, "cookiePolicyUrl ":“YOUR COOKIE POLICY URL( or your clients own policy URL)”,
“consentOnScroll”: false,
“applyStyles”:false,
“banner”: { “content”: "

Notice

\n

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the <a style=“text-decoration:underline; color:#fff; font-size:14px; font-weight:normal; " href=“YOUR COOKIE POLICY URL” class=“iubenda-cs-cookie-policy-lnk”>Privacy Policy. By clicking accept you consent to the use of cookies.

”, “innerHtmlCloseBtn”: “<a class=“iubenda-cs-close-btn” style=“margin:0 !important; text-decoration:none !important; font-size: 14px !important; color:#fff !important; position: absolute !important; top: -8px !important; right: 0 !important; border: 1px solid white !important; border-radius: 4px; padding: 4px 8px; letter-spacing:1px;” href=“javascript:void(0)”>ACCEPT”, “backgroundColor”: “#000000” }, …

#13
"cookiePolicyId":YOUR POLICY ID,
  callback: { 
    onConsentGiven: function(){
        console.log("iubenda_consent_given");
        dataLayer.push({'event': 'iubenda_consent_given'});
      	dataLayer.push({'cookie_consent': 'true'});
console.log("iubenda_consent_given");
    }
  }
}; 
</script><script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></script>
<style type="text/css"> #iubenda-cs-banner{ top: 0px !important; left: 0px !important; position: fixed !important; width: 100% !important; z-index: 99999998 !important; background-color: #000000cc !important;; } .iubenda-cs-content{ display:block; margin:0 auto; padding: 20px; width:auto; font-family: Helvetica,Arial,FreeSans,sans-serif; font-size: 14px; background: #00000000; color: #fff; } .iubenda-banner-content{ } .iubenda-cs-rationale{ max-width: 900px; position:relative; margin: 0 auto; } .iubenda-banner-content > p { font-family: Helvetica,Arial,FreeSans,sans-serif; line-height: 1.5; } </style>

TAG firing priority: 100
Fire on all pages

Add a trigger - custom event
Iubenda consent given - Event name: iubenda_consent_given
Fire on all custom events

Add other 3rd party tracking tags to fire on consent given if you want to disable cookies on load until consent.

Then just follow the GT instructions to drop the container ID into the custom code into the head and footer sections for it to work.


#14

Thanks a lot @Alphie! I’ll give it a try.