Add this code before the end of head tag :
<script type="text/javascript" src="https://cookizi.swpl.fr/cookizi.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
window.cookizi.run({
version: "v1.0.0",
lang: 'en',
name: 'Alpi',
cookies: ['google', 'pll_language'], // See the list of available cookies & groups
privacyPolicyUrl: '/privacy.html',
excludedPaths: [],
color: '#cb433a',
textColor: 'white',
borderRadius: 25,
logo: {
url: 'https://www.alpi.fr/sites/default/files/Logo-ALPI.jpg',
width: 210,
height: 45,
},
onBannerClose: function() {},
onSaveError: function(e) {},
});
});
</script>
Add this to header meta
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://*; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cookizi.swpl.fr; img-src 'self' 'unsafe-inline' data: https://*;"/>
Parameters :
version = Version of the cookizi settings in use
lang = The language code (e.g. fr or en)
doNotShow = Whether you want the banner to be hidden by default
name = Name of company
cookies = array of cookie/group names
excludedPaths = array of paths excluded the cookie banner(optional)
privacyPolicyUrl = url to privacy page
themeColor = The color (hex code) of the button and title (optional)
textColor = The color (hex code) of the text inside the buttons
borderRadius = number of pixel default : 0 (optional)
logo = information about logo (optional)
Change each external js script like this (example for a GTM script):
<script>
to
<script type="text/plain" data-cookizi="analytics">
Link open the settings :
add a class "cookizi-setting" to a "a" tag like this :
<a href="#" class="cookizi-setting" style="color: #ffffff;">Préférences Cookies</a>
There is actually only one event (firstAnswer), it can be used to launch an animation after the user accepted or refused cookies.