@kevinbaubet/cookienotice v4.0.5

Documentation CookieNotice

• Dependency: jQuery, PHP (to generate json config, but you can use an other way to build json configuration data)

Featuring

First step: a notice is displayed to inform the user of cookies for a listing of services. The choice is mandatory to continue the navigation.

Second step: a choice is made if the user:

• clicks on the notice button "I accept", which will accept all cookies
• clicks on the notice button "I deny", which will deny all cookies
• clicks on the notice button "I customize", to customize the services one by one
• clicks on the service button "Allow" after deny all services, which will accept only the wanted service

Third step: the deposit of one cookie to save user consent:

• for a maximum duration of 13 months
• there is a possibility of changing to return to customized services

Initialisation

<?php require_once '../src/CookieNotice/Config.php'; // To configure ?>

<div id="notice-cookie" data-config="<?php echo htmlspecialchars(\CookieNotice\Config::get()); ?>"></div>

$('#notice-cookie').cookieNotice([options]);

<a href="#" class="cookienotice-customize">Customize the cookies</a>

Service handler

You could allow each service during the navigation. An overlay "service handler" will be added to the container for allowing the service.

Initialisation

<a data-cookienotice data-cookienotice-service="youtube" href="#">
    My video service contents
</a>

PHP side

Configuration (mandatory)

The configuration of CookieNotice is in this file CookieNotice/Config.php in method Config::set(). You can translate texts in this file.

notice: Notice configuration

• description: Notice contents
• summary: Summary of notice contents showed in mobile
• agree: Button label to customize services
• disagree: Button label to accept all services
• customize: Button label to deny all services

(optional) modal: Modal configuration to customize services

• label: Modal title
• labelTag: (optional) Tag used for modal title. If hN, the subtitles will be increase automatically
• description: (optional) Modal description
• close: Button label to close modal

groups: Groups list of services

• group_id: Default: none. For example: video
  • label: Group title
  • description: (optional) Group description

services: Services list associated to groups

• all: for all services

  • label: Service title
  • customize: Button label to customize service
  • agree: Button label to accept service
  • disagree: Button label to deny service
  • disabled: Text displayed if the service is disabled
  • allow: Button label to allow service under disabled text
  • position: Position of the line "all services": before, after or both

• service_id: for example: youtube or video

  • label: Service title
  • description: (optional) Service description
  • url: (optional) External Url to cookies privacy-policy
  • group: Associated group id

Methods

• namespace: CookieNotice
• class: Service

Test allowed services

I recommend to test in JS side to exempt cache issues

if (\CookieNotice\Service::isAllowed('facebook'))) {
    // OK
}

// or

$state = \CookieNotice\Service::getState('facebook');
if ($state === true) {
    // OK
}

// Saved consent?
if (\CookieNotice\Service::hasConsent()) {
    // OK
}

JS side

Options

Methods

Events

changestate.cookienotice

On change state To register on CookieNotice container

$('#notice-cookie').cookieNotice();

$('#notice-cookie').on('changestate.cookienotice', function (event, data) {
    console.log(data);
});

agree.cookienotice

On agree service in service handler To register on service handler

$('#notice-cookie').cookieNotice();

$('[data-cookienotice-service="youtube"]').on('agree.cookienotice', function (event, data) {
    console.log(data);
});

Test allowed services

let cookieNotice = $('#notice-cookie').cookieNotice();

if (cookieNotice.isAllowed('facebook')) {
    // OK
}

// or

if ($.CookieNotice.services['facebook'] === true) {
    // OK
}

// or

var state = cookieNotice.getState('facebook');
if (state === true) {
    // OK
}

// Savec consent?
if (cookieNotice.hasConsent()) {
    // OK
}