It's the law in the EU to alert users to what cookies your website stores about them (and I think that includes if your site targets those from the EU too, but I'm by no means an expert) so I found this simple cookie alert banner online and thought I'd share~
It is for Bootstrap 4 and 5 so probably won't work as is without adding Bootstrap to your theme. Note that if you don't use Bootstrap and add Bootstrap to your current theme, things might start looking different lol
Source (under MIT license)
How to install - Bootstrap 5 (link to full tutorial)
Open your header.tpl and paste this in underneath the opening <head> tag:
Find {$header->loadAdditionalStyle()} and paste this underneath to install JQuery:
Now open your template.tpl and scroll to the bottom. Above the closing </body> tag put this:
That installs default Bootstrap 5. If you want Bootstrap 4 there's a tutorial by Kyttias!
How to install - Cookie popup
In your template.tpl paste this after the opening <body> tag:
Then scroll down and put this with the Bootstrap script:
Open your .css file and put this in:
And that's it. Just make sure to change the 'Learn More' link to your cookie policy. When users accept it will remember for about a year, or until they clear their browser cookies.
Read more about the cookie law here
It is for Bootstrap 4 and 5 so probably won't work as is without adding Bootstrap to your theme. Note that if you don't use Bootstrap and add Bootstrap to your current theme, things might start looking different lol
Source (under MIT license)
How to install - Bootstrap 5 (link to full tutorial)
Open your header.tpl and paste this in underneath the opening <head> tag:
HTML:
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">Find {$header->loadAdditionalStyle()} and paste this underneath to install JQuery:
HTML:
{$header->loadScript("//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js")}Now open your template.tpl and scroll to the bottom. Above the closing </body> tag put this:
HTML:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script> <!-- Javascript Bundle -->That installs default Bootstrap 5. If you want Bootstrap 4 there's a tutorial by Kyttias!
How to install - Cookie popup
In your template.tpl paste this after the opening <body> tag:
HTML:
<div class="alert text-center cookiealert" role="alert">
<b>Do you like cookies?</b> 🍪 We use cookies to ensure you get the best experience on our website. <a href="/privacy/" target="_blank">Learn more</a>
<button type="button" class="btn btn-primary btn-sm acceptcookies">
I agree
</button>
</div>Then scroll down and put this with the Bootstrap script:
HTML:
<script src="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.js"></script>Open your .css file and put this in:
CSS:
/*
* Bootstrap Cookie Alert by Wruczek
* https://github.com/Wruczek/Bootstrap-Cookie-Alert
* Released under MIT license
*/
.cookiealert {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0 !important;
padding: 0.75rem 1.25rem;
z-index: 999;
opacity: 0;
visibility: hidden;
border-radius: 0;
transform: translateY(100%);
transition: all 500ms ease-out;
color: #ecf0f1;
background: #212327;
}
.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}
.cookiealert a {
text-decoration: underline
}
.cookiealert .acceptcookies {
margin-left: 10px;
vertical-align: baseline;
}And that's it. Just make sure to change the 'Learn More' link to your cookie policy. When users accept it will remember for about a year, or until they clear their browser cookies.
Read more about the cookie law here
Forum Contains New Posts
Forum Contains No New Posts
