Seeking help in adding a JavaScript cookie consent into Bootstrap Studio template

Bootstrap Studio Help
1

Hey everyone!
I’m working on a project in Bootstrap Studio based on the Bold & Dark Template and I’m trying to add a cookie consent feature to it. I’ve been found a nice template here GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin written in vanilla js but I’m having some trouble with it. If anyone has experience with this and could help me out, I would appreciate it! Please let me know if you have any tips or advice on how to integrate it into Bootstrap Studio. Thanks in advance!

2

What kind of troubles are you having?

3

Thanks for asking, reviewed the steps it is working okay now, added a custom code in BSS and pasting in the code from github and it works when using CDN links, I also used the CCS & JS files in the downloaded folder src, it works but i dont know if this is the right way to do it. Thank you @R.Omer

image

4

You use one of the two:
If you use the CDN links you don’t import the files from the src folder
If you import the files from the src folder you don’t use the CDN links

Here is an example that set the cookies only if the user accept the cookies in the cookie consent
BTW no need of custom code

5

Thanks, I deleted the custom code and dropped the two CSS & JS files in the design tab and the cookie disappeared, would you be happy to share that BSS file? i can then learn from it, @kuligaposten Thank you so much!

7

@karatrick
You can download file here.

1 Like
8

I’ve just made my Cookie Consent Component public, so you can find it in the online components by searching for CookieConsentComponent

Once it is installed just drag the component onto the body of any page in your project, this will add an empty div, this can then be removed keeping the required css/js

Things to note, For development you can clear the cookie by clicking anywhere in the browser window (not in a text box) and type ‘clr’ (lowercase) this will clear the cookie (only the cookie consent cookie) and reload the page.

First two lines of the cookieconsent.js file to set your privacy and contact urls.

You will need to edit the cookie table (line 96) to suit your requirements.

This also includes the cookieconsent.css file to make styling easier, and bring everything into bss.

Update:

Don’t forget to add any analytics to the OnAccept function (line 48)

 onAccept: function () {
      if (cc.allowedCategory("analytics")) {
        cc.loadScript(
          "https://www.googletagmanager.com/gtag/js?id=<your id>",
          function () {
           
            window.dataLayer = window.dataLayer || [];
            function gtag() {
              dataLayer.push(arguments);
            }
            gtag("js", new Date());

            gtag("config", "<your id>");
          }
        );
      }
    },

This will allow tracking only if analytics as been agreed

4 Likes
9

Amazing!!! Thank you very much @richards I just downloaded it, and it works! Thanks for the clear instructions.

1 Like
10

Glad it worked for you.

You can also use https://www.cookieserve.com/ to check what cookies your site is using to add to the table. The free version only scans your homepage, you need to sign up (14 day free trial) for it to scan the complete site… don’t forget to cancel :slight_smile:

1 Like
11

Nice. Thanks @richards richards. I think yours is the first Cookie Consent component to appear in the online components library.

(PS - nice new avatar.)

2 Likes
12

Thanks @printninja, it is the logo for a new project that I’m planning to launch soon, world domination beckons, when I get time :joy: