Creating a Cookie Banner which only is visible if a cookie has not been set

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
martin.mattel
 
 
Posts: 83
Joined: Thu Oct 04, 2018 3:04 pm

Creating a Cookie Banner which only is visible if a cookie has not been set

Post by martin.mattel »

This example is about how you can create a cookie banner which appears only if a corresponding cookie has not been set (no accept pressed).
  • Download https://github.com/js-cookie/js-cookie/ ... .cookie.js which is a very small script
  • Make this script available to your site so it gets uploaded to a directory of your choice, eg "scripts"
    Use eg. the FilePublisher Object.
  • Create a Sticky Layer (buttom-right, absolute, center) and add (embed) some text and a button
    Best you place the SL in a master frame to make it available to all pages. The name in this example is master_frameCookieLayer
    Format all items as you like it, like the SL: CSS3 animation: animate-fade-in-up: 0,1000
  • Add two events to that button:
    onclick: run javascript: myCookieSet();
    onclick: animateCSS3: master_frameCookieLayer: animate-fade-out: 0,500
  • Uncheck visibility of the SL in the Object Manager.
    This will hide the Sticky Layer not only in WWB but also in the browser when loading. So it is initially not visible !
  • In each page you want that the SL could appear, add the following script in the page HTML/inside body tag:

    Code: Select all

    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (event) => { myCookieRead(); });
    </script>
    This script adds an event when the particular page is ready and fires the myCookieRead() function in case of.
  • Inside SiteHTML/inside body tag:

    Code: Select all

    <script src="scripts/js.cookie.js"></script>
    <script type="text/javascript">
      function myCookieRead() {
        var cookie = Cookies.get('cookie_accepted');
        if (cookie != "true") {
          document.getElementById('master_frameCookieLayer').style.visibility='visible';
          document.getElementById('master_frameCookieLayer').style.display = "block";
        }
      }
    
      function myCookieSet() {
        Cookies.set('cookie_accepted', 'true', { expires: 365 });
      }
    </script>
    Function myCookieRead() checks if the cookie has been set and if not makes the SL visible again.
    Function myCookieSet() sets the cookie for further use. Called if the button has been pressed (accepted)
Publish your site, the SL will appear on each page from bottom up.
If you press the "accept" button, the SL will go away and a cookie is set.
On each page your SL has been added, the SL will not show up.
When you delete the cookie from your browser and reload the page, the SL will reappear.

Note: Cookie(s) are stored automatically under the domain name of your site. A site can have more cookies but all of them are collected under the domain name. No extra management is needed.

Adopt all namings, formattings and exiration date ect. according your need.

You can use this method not only for a cookie bar but also for other things :D
Last edited by martin.mattel on Tue Jul 30, 2019 7:35 am, edited 4 times in total.
alan_sh
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Re: Creating a Cookie Bar which only is visible if a cookie has been not been set

Post by alan_sh »

Very useful - thanks.

I assume the name of the cookie is 'cookie accepted'. Personally, I would try and give it a name more personal to the web site, just in case someone else sees the same code and embeds it in their site.

Cheers

Alan
martin.mattel
 
 
Posts: 83
Joined: Thu Oct 04, 2018 3:04 pm

Re: Creating a Cookie Bar which only is visible if a cookie has been not been set

Post by martin.mattel »

@Alan, that is not necessary.
Cookie(s) are stored automatically under the domain name of your site. Take a look at the naming of the cookies in your browser. A site can have more cookies but all of them are collected under the domain name. No extra management is needed. This makes it easy to have a dev site working independent of your life site. But for better clarity, I will add a note about this in the original post.
Post Reply