Checkboxes

Introduction

Name: didomi-checkboxes Component type: checkboxes Extends: DidomiBlock
Display a group of checkboxes.
1
window.didomiConfig = {
2
...
3
entities: [...],
4
components: {
5
layout: {...},
6
activeComponents: [
7
{
8
id: "ID_OF_THE_COMPONENT",
9
type: "checkboxes",
10
options: {
11
...,
12
propKey: "PROP_VALUE" // Remember to use camelCase for the key
13
}
14
}
15
]
16
}
17
};
18
Copied!

Inline configuration

1
<didomi-checkboxes container-id="CONTAINER_ID" prop-key="PROP_VALUE" .../>
Copied!

Setup

For this component to work properly, you will need to have entities (purposes, preferences and channels) available to link to the checkboxes.
A checkboxes element 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.
1
window.didomiConfig = {
2
...
3
entities: [
4
{
5
id: "purpose-id",
6
name: "...",
7
description: "..."
8
},
9
{
10
id: "preference-id",
11
name: "Preference 1"
12
},
13
{
14
id: "email",
15
name: "Email"
16
},
17
{
18
id: "sms",
19
name: "SMS"
20
}
21
],
22
containers: [
23
{
24
purposes: [
25
{
26
id: "purpose-id",
27
preferences: [
28
{
29
id: "preference-id",
30
channels: [
31
{
32
id: "email",
33
},
34
{
35
id: "sms",
36
}
37
]
38
}
39
]
40
}
41
]
42
}
43
],
44
components: {
45
activeComponents: [
46
{
47
id: "ID_OF_THE_COMPONENT",
48
type: "checkboxes",
49
options: {
50
...,
51
purposeId: "purpose-id",
52
preferenceId: "preference-id"
53
}
54
}
55
]
56
}
57
};
58
Copied!
If you want to display a list of channels created at root level in the tree of the entities, the only attribute necessary is childrenType which will have to be set to channels.

Props Options

Name
Type
Description
childrenType
String
Type of the children you want to display (purposes, preferences, channels)
color
String
Color of the checkbox
display
String
CSS display property. Example: 'flex', 'inline' ...
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
isShown
Boolean
display/hide the element (default true)
items
Sent as an option object to the didomi-checkbox
preferenceId
String
ID of the preference linked to the checkbox.
purposeId
String
ID of the purpose linked to the checkbox.
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.

Examples

If you want to see the image, please click on the Open preview in new window button to see the example on full screen.

Object configuration

1
window.didomiConfig = {
2
...
3
entities: [...],
4
components: {
5
layout: {...},
6
activeComponents: [
7
{
8
id: "checkboxes-preferences",
9
type: "checkboxes",
10
options: {
11
purposeId: "purpose-id",
12
preferenceId: "preference-id",
13
color: "#003790",
14
items: {
15
activeLabel: {
16
style: {
17
default: {
18
background: "rgba(0,0,0,0.1)"
19
}
20
}
21
}
22
}
23
}
24
}
25
]
26
}
27
};
Copied!
Last modified 9mo ago