Comment créer une bannière sur son site pour valider les cookies?

Script
1

Dans le contexte actuel de renforcement des règles de confidentialité en ligne, je recherche des informations sur la mise en place d’un module de gestion des cookies pour mon site web. Mon objectif est de me conformer à la réglementation en vigueur et de rassurer mes utilisateurs sur la gestion de leurs données personnelles. Quels sont les meilleurs outils ou pratiques pour cela ? Et comment garantir une expérience utilisateur optimale tout en respectant ces règles ?

2 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Popup</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
   #cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: white;
    color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cookie-consent-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

#accept-cookies {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-left: 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

#accept-cookies:hover {
    background-color: #0056b3;
}

    </style>
</head>
<body>

    <div id="cookie-consent-banner" style="display:none;">
        <p>Nous utilisons des cookies pour améliorer votre expérience. En continuant à visiter ce site, vous acceptez notre utilisation des cookies.</p>
        <button id="accept-cookies">Accepter</button>
    </div>
    
      

<script>
window.onload = function() {
    if (!localStorage.getItem('cookiesAccepted')) {
        document.getElementById('cookie-consent-banner').style.display = 'flex';
    }

    document.getElementById('accept-cookies').onclick = function() {
        localStorage.setItem('cookiesAccepted', 'true');
        document.getElementById('cookie-consent-banner').style.display = 'none';
    };
};

</script>

</body>
</html>

Pour intégrer ce code à votre site :

  1. Placez le code HTML où vous souhaitez que la bannière apparaisse dans le corps de votre page.
  2. Ajoutez les styles CSS dans la section <head> de votre document ou dans un fichier CSS externe lié à votre page.
  3. Incluez le JavaScript juste avant la fermeture de la balise </body> pour vous assurer que tous les éléments de la page sont chargés avant d’exécuter le script.

Cet exemple est un point de départ. Vous pouvez personnaliser le message, le design et le comportement de la bannière pour l’adapter aux besoins spécifiques de votre site et pour respecter les réglementations locales sur la confidentialité et les cookies, comme le RGPD en Europe.

3

  1. CookieYes : C’est un outil de gestion des cookies qui permet de personnaliser les bannières de consentement aux cookies. Il est gratuit jusqu’à 5000 vues de page par mois. (https://www.cookieyes.com/)

  2. Cookiebot: Il s’agit d’un outil qui propose une solution de conformité aux cookies. Il offre une politique de cookies personnalisée et une bannière de consentement. Le prix dépend du nombre de sous-domaines. (https://www.cookiebot.com)

  3. Termly : C’est un outil complet pour la conformité en ligne, y compris la gestion des cookies. Il est gratuit pour un nombre limité de vues de page. (https://termly.io/)

  4. Cookie Consent by Insites : C’est un outil gratuit pour ajouter une bannière de consentement aux cookies à votre site web. Il est personnalisable et facile à utiliser. (https://cookieconsent.insites.com/)

  5. OneTrust : C’est une plateforme de gestion de la vie privée qui comprend une solution de gestion des cookies. Les prix ne sont pas divulgués sur leur site web. (https://onetrust.com/)

  6. Civic Cookie Control : Il s’agit d’un outil de gestion des cookies qui offre une personnalisation complète de la bannière de consentement. Les prix commencent à partir de £45 par an. (Cookie Control from CIVIC | CIVIC UK)

  7. CookiePro : C’est un outil de gestion des cookies qui propose une personnalisation complète de la bannière de consentement. Les prix commencent à $10 par mois. (https://www.cookiepro.com/)

  8. CookieScript : C’est un outil de gestion des cookies facile à utiliser. Il est gratuit pour un site web et les prix commencent à partir de 9€ par mois pour des fonctionnalités supplémentaires. (https://www.cookiescript.com/)

  9. Iubenda : C’est un outil de gestion de la conformité en ligne qui comprend une solution de gestion des cookies. Les prix commencent à partir de 27€ par an. (https://www.iubenda.com/)

  10. TrustArc : C’est une plateforme de gestion de la vie privée qui comprend une solution de gestion des cookies. Les prix ne sont pas divulgués sur leur site web. (https://www.trustarc.com/)