Cookiebot

Dit is de standaard cookiebot implementatie voor Lumo websites.

Aan de slag

Gebruik deze code voor het instellen van de cookiebot.

Installatie

HTML definition of consent banner

<dialog class="cookieContainer" id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable x-on:keydown.escape="$event.preventDefault()">
    <div class="cookieBanner">

        <div id="intro" class="cookie-intro">
            <span class="title">[#TITLE#]</span>
            <div class="content">[#TEXT#]</div>
            <div class="buttons">
                <button type="button" class="button primary" onclick="showMore()">
                    <span class="text">[#DETAILS#]</span>
                </button>
                <button type="button" class="button primary" id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll">
                    <span class="text">[#ACCEPT#]</span>
                </button>
            </div>
        </div>

        <div id="outro" class="cookie-outro">

            <span class="title">[#TITLE#]</span>

            <ul class="cookieChoose">
                <li class="cookieItem">
                    <div class="cookieBlockHeader">
                        <span class="subTitle">[#COOKIETYPE_PREFERENCE_RAW#]</span>
                        <label>
                            <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonPreferences" value="1" name="level">
                            <span class="indicator"></span>
                        </label>
                    </div>
                    <div class="cookieBlockContent">[#COOKIETYPEINTRO_PREFERENCE#]</div>
                </li>
                <li class="cookieItem">
                    <div class="cookieBlockHeader">
                        <span class="subTitle">[#COOKIETYPE_STATISTICS_RAW#]</span>

                        <label>
                            <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonStatistics" value="2" name="level">
                            <span class="indicator"></span>
                        </label>
                    </div>
                    <div class="cookieBlockContent">[#COOKIETYPEINTRO_STATISTICS#]</div>
                </li>
                <li class="cookieItem">
                    <div class="cookieBlockHeader">
                        <span class="subTitle">[#COOKIETYPE_ADVERTISING_RAW#]</span>

                        <label>
                            <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonMarketing" value="3" name="level">
                            <span class="indicator"></span>
                        </label>
                    </div>
                    <div class="cookieBlockContent">[#COOKIETYPEINTRO_ADVERTISING#]</div>
                </li>
            </ul>

            <div class="buttons">
                <a href="/cookies/" class="button primary">
                    <span class="text">[#CUSTOMIZE#]</span>
                </a>

                <button type="button" class="button primary" id="CybotCookiebotDialogBodyButtonAccept" onclick="Cookiebot.dialog.submitConsent()">
                    <span class="text">[#LEVELOPTIN_ALLOW_SELECTION#]</span>
                </button>
            </div>
        </div>
    </div>
</dialog>

Cascading Style Sheets (CSS)

.cookieContainer {
    background-color: var(--color-light);
    color: var(--color-dark);
    position: relative;
    width: 60vw;
    max-width: 100%;
    border-radius: var(--border-radius);
    padding: calc(var(--padding) * 2);
    font-size: var(--xs-fontsize);
}

.cookieContainer::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.cookieContainer .title {
    font-size: var(--m-fontsize);
}

.cookieContainer .title, .cookieContainer .subTitle {
    color: var(--color-dark);
}

.cookie-intro, .cookie-outro {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.cookieChoose {
    padding-left: 0;
    margin-bottom: 0;
}

.cookieItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-dark);
}

.cookieItem:first-child {
    padding-top: 0;
}

.cookieItem:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cookieBlockContent {
    font-size: 12px;
    margin-right: 5em;
}

.cookie-outro {
    display: none;
}

.cookieBlockHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cookieContainer .content {
    color: var(--color-dark);
}

.cookieContainer .buttons {
    display: flex;
    gap: calc(var(--gutter) / 2);
}

.cookieContainer .button.primary {
    background-color: var(--color-dark);
    color: var(--color-light);
}

.cookieContainer .button.primary .text {
    text-align: center;
}

.cookieContainer .button.primary::after {
    display: none;
}

.cookieContainer .button.primary:hover {
    background-color: var(--font-color);
}

.cookieContainer .indicator {
    display: inline-block;
    width: 3.3em;
    height: 1.8em;
    border-radius: 1em;
    background: #ccc;
    margin-right: 0.5em;
    position: relative;
    vertical-align: middle;
    transition: background 0.3s;
    cursor: pointer;
}
.cookieContainer .indicator::after {
    content: "";
    position: absolute;
    left: 0.225em;
    top: 0.225em;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    background: var(--color-light);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: left 0.3s, background 0.3s;
}

.cookieContainer input[type="checkbox"] {
    display: none;
}

.cookieContainer input[type="checkbox"]:checked + .indicator {
    background: var(--color-dark);
}

.cookieContainer input[type="checkbox"]:checked + .indicator::after {
    left: 1.7em;
}

@media (max-width: 600px) {
    .cookieContainer {
        width: calc(100vw - calc(var(--spacer) * 2));
    }
    .cookieContainer .buttons {
        flex-wrap: wrap;
    }
    .cookieContainer .buttons .button {
        width: 100%;
    }
}

Javascript functions

function showCookieBanner() {
	var cookiebanner = document.getElementById("cookiebanner");
	cookiebanner.showModal();
}
function showMore() {
	var cookieIntro = document.getElementById("intro");
	var cookieOutro = document.getElementById("outro");
	cookieIntro.style.display = "none";
	cookieOutro.style.display = "flex";
}
function hideCookieBanner() {
    var cookiebanner = document.getElementById("cookiebanner");
    cookiebanner.close();
    cookiebanner.style.display = "none";
}