Checkbox

Introduction

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

Inline configuration

1
<didomi-checkbox 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 checkbox.
A checkbox is linked to an entity and its parents, if any. The current entity will be displayed in the checkbox (name, status). If you want to display a preference, your current entity is the preference. You will have to populate the purposeId and the preferenceId .
1
window.didomiConfig = {
2
...
3
entities: {
4
layout: {
5
purposes: [
6
{
7
id: "purpose-id",
8
preferences: [
9
{
10
id: "preference-id",
11
channels: [] // Don't forget this property, even if you have no channels linked to it
12
}
13
]
14
}
15
]
16
},
17
activeEntities: [
18
{
19
id: "purpose-id",
20
name: "...",
21
description: "..."
22
},
23
{
24
id: "preference-id",
25
name: "Preference 1"
26
}
27
]
28
},
29
components: {
30
layout: {...},
31
activeComponents: [
32
{
33
id: "ID_OF_THE_COMPONENT",
34
type: "checkbox",
35
options: {
36
...,
37
purposeId: "purpose-id",
38
preferenceId: "preference-id"
39
}
40
}
41
]
42
}
43
};
Copied!

Props Options

Name
Type
Description
activeIcon
Icon of the checkbox when it is checked
activeLabel
DidomiElement
Label of the checkbox when it is checked
activeText
Override the name of the entity linked to the checkbox when it is checked
channelId
String
ID of the channel linked to the checkbox.
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 attribute called enabled, you would add brands.didomi.enabled
fontSize
String
Font size of the text
hasBorder
Boolean
Does the checkbox have a border
icon
Allow to add an icon inside the checkbox
indicator
Container of the indicator
isShown
Boolean
display/hide the element (default true)
label
DidomiElement
Label of the checkbox
metadata
Object
Metadata passed to the HTTP request. See this section for more information
padding
String
padding of the 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.
text
Override the name of the entity linked to the checkbox
textColor
String
Color of the text
For inline configuration, make sure to use kebab-case syntax. For example purposeId will become purpose-id.

Metadata

If you enabled save-on-click and you want to send additional information to the POST HTTP request, you can populate this attribute with data. It will be sent beside the consent object in the body request as a metadata object.
1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "checkbox-email",
7
type: "checkbox",
8
options: {
9
...
10
metadata: {
11
brand: "didomi",
12
value: "test"
13
}
14
}
15
}
16
]
17
}
18
};
Copied!

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: "checkbox-email",
9
type: "checkbox",
10
options: {
11
purposeId: "purpose-id",
12
preferenceId: "preference-id",
13
channelId: "channel-id-email",
14
color: "#F07D5A"
15
}
16
},
17
{
18
id: "checkbox-print",
19
type: "checkbox",
20
options: {
21
purposeId: "purpose-id",
22
preferenceId: "preference-id",
23
channelId: "channel-id-print",
24
color: "#003790",
25
padding: "10px",
26
hasBorder: true
27
}
28
},
29
{
30
id: "checkbox-text",
31
type: "checkbox",
32
options: {
33
purposeId: "purpose-id",
34
preferenceId: "preference-id",
35
channelId: "channel-id-text",
36
color: "#F07D5A",
37
fontSize: "20px"
38
}
39
},
40
{
41
id: "checkbox-call",
42
type: "checkbox",
43
options: {
44
purposeId: "purpose-id",
45
preferenceId: "preference-id",
46
channelId: "channel-id-call",
47
color: "#F07D5A",
48
textColor: "#003790"
49
}
50
}
51
]
52
}
53
};
54
Copied!
Last modified 9mo ago