Consent JS

import Consent from "@natachah/vanilla-frontend/js/_consent"

Syntax

The consent component help you to manage the Cookies for the RGPD law.

This component required a <dialog>, and the component will open it if the cookies are not already saved.

html

<dialog id="demoCookies" aria-labelledby="cookiesTitle">
    <div>
        <h1 id="cookiesTitle">Cookies Consent</h1>
        <p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience !</p>
        <button data-dialog-close>Ok</button>
    </div>
</dialog>

js

import Consent from "@natachah/vanilla-frontend/js/_consent"
if (document.getElementById('demoCookies')) {
    const cookieConsent = new Consent('my_custom_cookie_name')
}

Options

You can save some options as preference (aka. custom values) by adding a <form> inside the <dialog>.

Make sure to have a <button> to ONLY save the necessary, and one to submit the form.

<dialog id="demoCookiesPreferences" aria-labelledby="cookiesTitle">
    <div id="cookiesTitle">
        <h1>Cookies Consent</h1>
        <p><b>Accept:</b> will save the checkboxes</p>
        <p><b>Decline:</b> will ONLY save the necessary</p>
        <form method="dialog">
            <fieldset>
                <input type="checkbox" id="cookieNecessary" name="cookies_consent[]" value="necessary" disabled checked>
                <label for="cookieNecessary">Strictly necessary</label>
                <input type="checkbox" id="cookieAnalytic" name="cookies_consent[]" value="analytic">
                <label for="cookieAnalytic">Analytic</label>
                <input type="checkbox" id="cookieMarketing" name="cookies_consent[]" value="marketing">
                <label for="cookieMarketing">Marketing</label>
            </fieldset>
            <button type="submit">Accept</button>
            <button data-dialog-close>Decline</button>
        </form>
    </div>
</dialog>

Javascript

To enable this component you need to import the javascript file and create a new Consent object.

You can customize the name of the cookie and the ID of the <dialog> when initiate the component.

import Consent from "@natachah/vanilla-frontend/js/_consent"
const cookieConsent = new Consent('my_custom_cookie_name', 'my_custom_dialog_id')

WARNING

This component is an extension of the Cookie component, who come with it's own methods and events.