Checkboxes

Introduction

Name: didomi-checkboxes Component type: checkboxes Extends: DidomiBlock

Display a group of checkboxes.

Object configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "checkboxes",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-checkboxes id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-checkboxes prop-key="PROP_VALUE" .../>

Setup

For this component to work properly, you will need to have entities (purposes, preferences and channels) as well as containers available to link to the checkboxes group.

A checkboxes group is linked to an entity and its parents, if any. The children of the current entity will be displayed in the checkboxes (name, status). If you want to display channels, your current entity is the preference (parent of the channels you want to display). You will have to populate the purposeId and the preferenceId.

window.didomiConfig = {
...,
entities: [
{
id: "purpose-id",
name: "...",
description: "..."
},
{
id: "preference-id",
name: "Preference 1"
},
{
id: "email",
name: "Email"
},
{
id: "sms",
name: "SMS"
}
],
containers: [
{
purposes: [
{
id: "purpose-id",
preferences: [
{
id: "preference-id",
channels: [
{
id: "email",
},
{
id: "sms",
}
]
}
]
}
]
}
],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "checkboxes",
options: {
...,
purposeId: "purpose-id",
preferenceId: "preference-id"
}
}
]
}
};
<didomi-checkboxes id='ID_OF_THE_COMPONENT' />

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

channelId

String

ID of the channel linked to the checkbox. See this section for more information

color

String

Color of the checkbox

enabledPath

String

If you want to save the consent status in a different path in the metadata object of the current entity, you can set a different path as a string. For example if you want to save the consent in a brands object located in the entity metadata, for the brand didomi, in an attribut called enabled, you would add brands.didomi.enabled

exclude

Array

List of entities IDs you want to exclude from the list

items

DidomiCheckbox

Sent as an option object to the didomi-checkbox

preferenceId

String

ID of the preference linked to the checkbox. See this section for more information

purposeId

String

ID of the purpose linked to the checkbox. See this section for more information

saveOnClick

Boolean

Should the consent be saved on click or set as pending consent. This attribute gives you the choice to either save the consent immediately or wait and save all the pending consents together with a didomi-save component for example. Default value: false.

For inline configuration, make sure to use kebab-case syntax. For example purposeId will become purpose-id.

Events

Name

Description

click-checkbox

Trigger when the user clicks on the checkbox

const checkboxes = document.querySelector('#didomi-checkboxes');
checkboxes.addEventListener('click-checkbox', (e) => {
console.log('the checkbox has been clicked', e.detail)
});

Examples

Object configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "checkboxes-preferences",
type: "checkboxes",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
color: "#003790",
items: {
activeLabel: {
style: {
default: {
background: "rgba(0,0,0,0.1)"
}
}
}
}
}
}
]
}
};
<didomi-checkboxes id="checkboxes-preferences" />

Inline configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
};
<didomi-checkboxes
purpose-id="purpose-id"
preference-id="preference-id"
color="#003790"
items='{"activeLabel": {"style": {"default": {"background": "rgba(0,0,0,0.1)"}}}}'
/>