gdpr-cookie/example.html

A jQuery plugin to manage cookie settings in compliance with EU law

<meta charset=UTF-8>
<title>GDPR 🍪</title>
    
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Quicksand:400,500" rel=stylesheet>
<link href=example.css rel=stylesheet>
<link href=gdpr-cookie.css rel=stylesheet>

<main>
    <h1>GDPR 🍪 jQuery plugin</h1>
    <p>When you load this page you will see an example of the cookie message popup in the bottom right corner.</p>
    <p>If you don't see it, clear your cookies or delete the cookie called <code>cookieControlPrefs</code>.</p>

    <h2>Checkboxes</h2>
    <p>With the recent EU regulations, visitors must now explicitly opt-in to marketing, preferences, etc. You can customize which checkboxes are shown. The "Essential" checkbox can also be removed, e.g. when your site doesn't have any essential cookies but only marketing, etc.</p>
    
    <h2>Re-show</h2>
    <p>Visitors must also be able to <a href="javascript:$.gdprcookie.display()">change their mind</a> and modify their cookie settings to allow more (or fewer) cookie types.</p>
</main>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js></script>
<script src=gdpr-cookie.js></script>
<script>
    $.gdprcookie.init({
        title: "🍪 Accept cookies & privacy policy?",
        message: "There are no cookies used on this site, but if there were this message could be customized to provide more details. Click the <strong>accept</strong> button below to see the optional callback in action… <a href=#privacy>Example privacy link</a>",
        submessage: "Please uncheck the cookies you don't like.",
        delay: 600,
        expires: 1,
        acceptBtnLabel: "Accept cookies",
    });
    
    $(document.body)
        .on("gdpr:show", function() {
            console.log("Cookie dialog is shown");
        })
        .on("gdpr:accept", function() {
            var preferences = $.gdprcookie.preference();
            console.log("Preferences saved:", preferences);
        })
        .on("gdpr:advanced", function() {
            console.log("Advanced button was pressed");
        });

    if ($.gdprcookie.preference("marketing") === true) {
        console.log("This should run because marketing is accepted.");
    }
</script>