As soon as you are collecting or processing personally identifiable information (short PII) you are obliged to allow your visitors to decide what information are collected. This cookie consent banner bundle helps you to help your users.

Symfony bundle to integrate a cookie consent dialog to your website and to handle cookies according to AVG/GDPR.

In a Symfony application run this command to install and integrate Cookie Consent bundle in your application:

composer require huppys/cookie-consent-bundle

When not using Symfony Flex, enable the bundle manually:

In AppKernel.php add the following line to the registerBundles() method:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new huppys\CookieConsentBundle\CookieConsentBundle(),
        // ...
    );
}

or in config/bundles.php add the following line to the array:

<?php

return [
    // ...
    huppys\CookieConsentBundle\CookieConsentBundle::class => ['all' => true],
    // ...
];

When not using Symfony Flex, enable the bundles routing manually by adding the following lines to your config/routing.yml:

cookie_consent:
  resource: "@CookieConsentBundle/config/routing.yaml"

By default, the most secure options are enabled. You can change the config in config/packages/cookie_consent.yaml:

cookie_consent:
  cookie_settings:
    name_prefix: '' # string, any string you like to prefix the cookie names with
    cookies:
      consent_cookie:
        expires: 'P180D' # available values: PHP formatted date string, 'P180D' (180 days), 'P1Y' (1 year) etc.
        domain: null # optional: string or null, domain name, e.g. 'example.com'; null means 'use the current domain'
        secure: true # boolean, true by deafult, enable or disable transport only over https
        http_only: true # boolean, refer to mdn docs for more info
        same_site: 'lax' # available values: 'strict', 'lax', 'none'; if value is 'none' the 'secure' flag will be set to true by default
      consent_key_cookie:
        expires: 'P180D'
        domain: null
        secure: true
        http_only: true
        same_site: 'lax'
      consent_categories_cookie:
        expires: 'P180D'
        domain: null
        secure: true
        http_only: true
        same_site: 'lax'
  consent_categories: # Below are the default supported categories
    - 'analytics'
    - 'tracking'
    - 'marketing'
    - 'social_media'
  persist_consent: true # boolean; logs user actions to database
  position: 'dialog' # available values: 'bottom', 'dialog'
  form_action: $routeName # When set, xhr-Requests will only be sent to this route. Take care of having the route available.
  csrf_protection: true # boolean; enable or disable csrf protection for the form

Load the cookie consent in Twig via render_esi ( to prevent caching ) at any place you like:

{{ render_esi(path('cookie_consent.show')) }}
{{ render_esi(path('cookie_consent.show_if_cookie_consent_not_set')) }}

If you want to load the cookie consent with a specific locale you can pass the locale as a parameter:

{{ render_esi(path('cookie_consent.show', { 'locale' : 'en' })) }}
{{ render_esi(path('cookie_consent.show_if_cookie_consent_not_set', { 'locale' : app.request.locale })) }}

You have to install assets like javascript for asynchronous form submission and default styles. To install these assets run:

bin/console assets:install

When a user submits the form the preferences are saved as cookies. The cookies have a lifetime of 180 days. The following cookies are saved:

• consent: date of submit
• consent-key: Generated key as identifier to the submitted Cookie Consent of the user
• consent-category-[CATEGORY]: selected value of user (true or false)

In case the user rejects to usage of cookies, only the cookie named consent is saved with the current date as value.

AVG/GDPR requires all given cookie preferences of users to be explainable by the webmasters. For this we log all cookie preferences to the database. IP addresses are anonymized. You can disable logging the given consent by setting persist_consent to false.

The following TwigExtension functions are available:

cookieconsent_isCategoryAllowedByUser Check if user has given its permission for certain cookie categories.

{% if cookieconsent_isCategoryAllowedByUser('analytics') == true %}
    ...
{% endif %}

cookieconsent_isCookieConsentOptionSetByUser Check if user has saved any cookie preferences. This will default to true even when the user chose to reject all cookies.

{% if cookieconsent_isCookieConsentOptionSetByUser() == true %}
    ...
{% endif %}

You can add or remove any category by changing the configuration option consent_categories and making sure there are translations available for these categories.

All texts can be altered via Symfony translations by overwriting the CookieConsentBundle translation files. Take a look at translations into any of the yaml files to get an idea of the structure.

Most of the blocks in this consent layer a customizable. The blocks are:

• header
  • title
  • intro
  • read_more
• pre_form
• consent_form ???
  • consent_form_start
  • required_cookies_category
  • consent_form_rest
• post_form
• scripts

Create a file : templates/bundles/CookieConsentBundle/cookie_consent.html.twig and insert the following code:

# app/templates/bundles/CookieConsentBundle/cookie_consent.html.twig
{% extends '@!CookieConsent/cookie_consent.html.twig' %} {# this extends the base layout#}

{% block title %}
    Your custom title
{% endblock %}

{% block required_cookies_category %}
    {# let's hide this block #}
{% endblock required_cookies_category %}

A cookie consent form should be themeable and so is this.

To use a different form theme from symfony/form bundle, stick to the Symfony documentation about rendering forms. Remember to load the scripts and styles that belong to the theme.

This bundle comes with a default theme. To use this particular theme, please add the following line to your config/packages/twig.yaml:

twig:
  form_themes:
    - '@CookieConsent/form/cookie_consent_form_theme.html.twig'

To use your very own theme, create a twig file under your templates folder and reference this twig file within your config/packages/twig.yaml under twig->form_themes like this:

twig:
  default_path: '%kernel.project_dir%/templates' # set template base path like this if it fits your project
  form_themes:
    - 'cookie_consent/consent_form_theme.html.twig'

This should include overwrites for block like choice_row and submit_row:

{% block choice_row %}
    <div class="lala">
        {% for child in form %}
            {% if not child.rendered %}
                {{- form_widget(child) -}}
                {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
            {% endif %}
        {% endfor %}
    </div>
    <div>
        {{- form_help(form) -}}
    </div>
{% endblock %}

{% block submit_row %}
    {{ block('button_widget') }}
{% endblock %}

As Twig allows the loading of multiple themes, ensure that yours is the last one to overwrite blocks with the same name.

CookieConsentBundle comes with a default styling. A sass file is available in assets/css/cookie_consent.scss and a build css file is available in public/css/cookie_consent.css. Colors can easily be adjusted by setting the variables available in the sass file.

To apply the default styling to your website, include the following line in your twig template:

{% include "@CookieConsent/cookie_consent_styling.html.twig" %}

When a form button is clicked, the event of cookie-consent-form-submit-successful is dispatched. Use the following code to listen to the event.

document.addEventListener('cookie-consent-form-submit-successful', function (e) {
    // ... your functionality
    // ... e.detail is available to see which button is clicked.
}, false);

If your backend returns a response with HTTP status code 500 after submitting the form, make sure you have the route available for the configuration option form_action.