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

| Method | Arguments | Description | |--------------------|------------------------------------------------------------------|---------------------------------------------------------------------------------------| | getState | service string Service identifier, for example: "youtube" | Return true if the service is allowed |
| isAllowed | service string Service identifier, for example: "youtube" | Return the state of service. If there is no choice, the returned state is "undefined" |
| hasConsent | - | Return true if there is a saved consent |

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

| Option | Type | Default value | Description | |------------------------------------------|----------|----------------------------|--------------------------------------------------------------------| | classes | object | See below | Object for below options | |     prefix | string | 'cookienotice' | Prefix class name | |     notice | string | 'notice notice--cookie' | Class for notice | |     noticeOpen | string | 'is-{prefix}-notice-open' | Class for notice when is opened | |     modal | string | 'modal modal--cookie' | Class for modal | |     modalOpen | string | 'is-{prefix}-modal-open' | Class for modal when is opened | |     serviceHandler | string | '{prefix}-service-handler' | Class for service handler wrapper | |     serviceAgreed | string | 'is-agreed' | Class for the service which is agreed | |     serviceDisagreed | string | 'is-disagreed' | Class for the service which is disagreed | |     btnAgree | string | '{prefix}-agree' | Class for agree button | |     btnDisagree | string | '{prefix}-disagree' | Class for disagree button | |     btnCustomize | string | '{prefix}-customize' | Class for customize button | | reload | boolean | false | Enable reloading current url after a change of service state | | summary | int/bool | 767 | Max witdh in pixel to show the summary of notice. False to disable | | cookieDuration | integer | 13*30 | Consent storage duration | | tabindexStart | integer | 0 | Value of tabindex attribute at CookieNotice initialisation | | afterWrapNotice | function | undefined | Callback after the notice added to DOM | | afterWrapModal | function | undefined | Callback after the modal added to DOM | | afterWrapServiceHandler | function | undefined | Callback after the service handler added to DOM | | afterEventsHandler | function | undefined | Callback after register events | | onChangeState | function | undefined | Callback on change service state (all or service) |

Methods

| Method | Arguments | Description | |--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------| | notice | action string Action "show" or "hide" | Show/hide notice | | modal | action string Action "show" or "hide" | Show/hide modal | | agree | service string Service identifier | Agree a service | | disagree | service string Service identifier | Disagree a service | | setState | service string Service identifier, state mixed true, false or "undefined" to define the service state | Set the state of service | | loadStates | - | Load services state from cookie storage | | getState | service string Service identifier | Return the state of service. If there is no choice, the returned state is "undefined" |
| isAllowed | service string Service identifier | Return true if the service is allowed |
| hasConsent | - | Return true if there is a saved consent | | reload | - | Reload current url | | getCookie | name string Cookie name | Get cookie value | | setCookie | name string Cookie name, value string Cookie value, duration int Duration in day, path string="/" Storage path, secure bool=true Secure mode | Set cookie value | | removeCookie | name string Cookie name, path string Storage path | Remove a cookie | | destroy | - | Remove CookieNotice from DOM |

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
}