Comment créer une bannière de cookies pour un site web
Dans cet article, je vais vous montrer comment créer une bannière de cookies simple pour votre site web en utilisant HTML, CSS, et JavaScript.
Cette bannière informe vos utilisateurs que votre site utilise des cookies et leur permet d’accepter cette utilisation.
Je vais également vous expliquer ce que chaque partie du code fait pour que vous puissiez comprendre et personnaliser votre propre bannière.
Le code source
Je vais vous présenter le code complet et puis nous allons le décomposer partie par partie.
HTML
Le code HTML crée la structure de base de la bannière.
<!-- HTML -->
<div class="cookie-banner" id="cookiePopup">
<div>
<p>
Ce site utilise des cookies pour améliorer votre expérience. En continuant à naviguer sur ce site, vous acceptez l'utilisation de ces cookies. <a href="https://www.newinformatique24.com/confidentialite">En savoir plus</a>
</p>
<button id="acceptCookie" class="cookie-banner__accept-btn">Accepter</button>
</div>
</div>Le `<div>` principal avec la classe `cookie-banner` contient le texte informant l’utilisateur de l’utilisation des cookies et un bouton pour accepter ces cookies.
<div class="cookie-banner" id="cookiePopup">: Ce conteneur englobe la bannière de cookies.- <p> : Contient le texte qui informe l’utilisateur sur les cookies.
- <a> : Lien vers une page qui donne plus d’informations sur la politique de confidentialité.
- <button id= »acceptCookie » class= »cookie-banner__accept-btn »>Accepter</button> : Bouton que l’utilisateur clique pour accepter les cookies.
CSS
Le CSS est utilisé pour styliser la bannière et la rendre responsive (adaptée aux différentes tailles d’écran).
<!-- CSS -->
<style>
.cookie-banner {
transition: 0.5s;
position: fixed;
display: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center;
z-index: 9;
backdrop-filter: blur(4px);
}
.cookie-banner div{
position: fixed;
bottom: 0;
left: 0;
margin: 15px;
background-color: rgba(255,255,255,0.9);
padding: 15px;
font-size: 13px;
z-index: 10;
border-radius: 5px;
width: 300px;
}
.cookie-banner a{
text-decoration: underline;
font-size: 13px;
color: #333;
}
.cookie-banner__accept-btn {
display: block;
margin: 10px auto;
background-color: #0080ff;
color: white;
font-size: 12px;
padding: 12px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.cookie-banner__accept-btn:hover {
background-color: #45a049;
}
@media (max-width: 920px){
.cookie-banner div{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: auto;
}
}
</style>- .cookie-banner : Cette classe stylise le conteneur de la bannière, en le centrant et en ajoutant un effet de flou en arrière-plan.
- .cookie-banner div : Stylise le bloc interne de la bannière, en ajoutant une bordure arrondie, une couleur de fond, et un espace de remplissage.
- .cookie-banner__accept-btn : Stylise le bouton d’acceptation avec des couleurs, des dimensions et un effet de survol.
Javascript
Le JavaScript gère l’affichage de la bannière et la gestion des cookies.
<!-- JS -->
<script type="text/javascript">
setTimeout(() => {
var cookieName= "CookiesStatus";
var cookieValue="Cookies Accepter";
var cookieExpireDays= 30;
let acceptCookie= document.getElementById("acceptCookie");
acceptCookie.onclick= function(){
createCookie(cookieName, cookieValue, cookieExpireDays);
}
let createCookie= function(cookieName, cookieValue, cookieExpireDays){
let currentDate = new Date();
currentDate.setTime(currentDate.getTime() + (cookieExpireDays*24*60*60*1000));
let expires = "expires=" + currentDate.toGMTString();
document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
if(document.cookie){
document.getElementById("cookiePopup").style.display = "none";
}else{
alert("Unable to set cookie. Please allow all cookies site from cookie setting of your browser");
}
}
let getCookie= function(cookieName){
let name = cookieName + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let checkCookie= function(){
let check=getCookie(cookieName);
if(check==""){
document.getElementById("cookiePopup").style.display = "block";
}else{
document.getElementById("cookiePopup").style.display = "none";
}
}
checkCookie();
}, 5000);
</script>- setTimeout() : Attend 5 secondes avant d’afficher la bannière.
- createCookie() : Fonction qui crée un cookie lorsque l’utilisateur clique sur le bouton « Accepter ».
- getCookie() : Fonction qui vérifie si un cookie existe déjà.
- checkCookie() : Fonction qui affiche la bannière si le cookie n’existe pas.
Avec ce code, vous pouvez intégrer une bannière de cookies sur votre site web qui s’affiche aux utilisateurs pour leur permettre d’accepter les cookies.
Ce tutoriel vous a permis de comprendre les bases de la création d’une telle bannière en utilisant HTML, CSS, et JavaScript. N’hésitez pas à personnaliser le texte, les styles et les fonctions JavaScript selon vos besoins pour une meilleure intégration dans votre site.
N’oubliez pas d’informer vos utilisateurs de manière transparente sur la manière dont vous utilisez les cookies et de leur donner la possibilité d’accepter ou de refuser cette utilisation.
