volto-gdpr-privacy

Volto GDPR Privacy addon to manage user consent. Display banner to user if gdprPrivacyConfiguration has changed or if 180 days have passed since last choice. It also insert in page a button to enable user to re-open the banner to change his preferences.

For now, gdprPrivacyConfiguration is definible from config. Next implementations step, is to make it configurable from Volto control panel.

To be used with mrs-developer, see Volto docs for further usage informations. Otherwise, install it with:

yarn add volto-gdpr-privacy -W

Usage

Wherever you want to add the component, import and use it like this:

import { GdprPrivacyManager } from '@collective/volto-gdpr-privacy';

const YourAppComponent = () => <GdprPrivacyManager />;

A suggested way is to use appExtras from settings object:

export const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: '',
      component: GdprPrivacyManager,
    },
  ],
};

Configuration

In your config file, provide a configuration to define:

• component to inject in page when user accept that type of cookie
• default title and description suggested in control panel

config.settings['volto-gdpr-privacy'] = {
  defaultPanelConfig: defaultPanelConfig, //Default control-panel configuration.
  settings: {
    /******
     * Example: dinamically include components based on user choices
     * ******/
    FACEBOOKPIXEL: {
      component: () => {
        return <>Facebook pixel</>;
      },
    },
    // GTAGMANAGER:{....},
    // MATOMO:{....},
    //...your config keys...
  },
};

Cookie expires

It's possibile to define a cookie expire time. By default it's 6 month, but you could change your expiration days in the config:

config.settings['volto-gdpr-privacy']?.cookieExpires = 1; //setting cookie expiration after 1 day

Panel configuration

Until control panel is not available, a default control-panel configuration is used. You could extend defaultPanelConfig.js configuration, or create your configuration and pass it in the config file:

config.settings['volto-gdpr-privacy] = {
  defaultPanelConfig: defaultPanelConfig, //Default control-panel configuration.
  //...
  },

Configurable focus trap (from v.2.1.0)

Added a new configurable parameter called focusTrapEnabled, which defaults to false. This enables a focus trap provided by react-focus-lockon cookie banner: user cannot tab their way out and has to perform an action via banner buttons to be able to navigate the site using keyboard. Custom panel configuration can be used to toggle this feature on or off, refer to previous section examples.

Styling

If you want to change or adapt styles, you should start adapting cookie-banner.less.

Translations

This product has been translated into:

• Italian
• English
• French
• Spanish

Please, contribute to this project adding translations for your language.

Versions

If you want to use it with a version of Volto <= 15.0.0-alpha.3, use volto-gdpr-privacy 1.3.0 version. If you want to use it with a version of Volto < 15.7.0, use volto-gdpr-privacy 1.3.3 version. If you want to use it with a version of Volto < 16, use volto-gdpr-privacy 1.3.11 version.