Card

Introduction

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

Inline configuration

1
<didomi-card 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.
A card is linked to an entity and its parents, if any. The current entity will be displayed in the card (name, description) and its children as checkboxes. If you want to display a preference in the card information, and its channels as checkboxes, 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": [
12
{
13
"id": "email"
14
},
15
{
16
"id": "print"
17
}
18
]
19
}
20
]
21
}
22
]
23
},
24
activeEntities: [
25
{
26
"id": "email",
27
"name": "Emails"
28
},
29
{
30
"id": "print",
31
"name": {
32
"fr": "Courrier",
33
"en": "Mail"
34
}
35
},
36
{
37
"id": "purpose-id",
38
"name": "...",
39
"description": "..."
40
},
41
{
42
"id": "preference-id",
43
"name": "Preference 1",
44
"description": "Description..."
45
}
46
]
47
},
48
components: {
49
layout: {...},
50
activeComponents: [
51
{
52
id: "ID_OF_THE_COMPONENT",
53
type: "card",
54
options: {
55
...,
56
purposeId: "purpose-id",
57
preferenceId: "preference-id"
58
}
59
}
60
]
61
}
62
};
63
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 . In that case, you will have to manually add the name and description of the card as no parents are available.

Props Options

Name
Type
Description
channelId
String
ID of the channel linked to the card.
childrenType
String
Type of the children you want to display (purposes, preferences, channels)
color
String
Color of the checkboxes
contentContainer
Container of the content of the card (except title)
description
Description of the card.
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 entity, you can set a different path as a string. (the entities will be the ones linked to the checkboxes (children of the current entity). If a preference is linked to the card, the enabled-path will be used for its channels) 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 checkboxes IDs you want to exclude from the list
hasBorder
Boolean
Does the card have a border
headerContainer
Container of the title of the card
headerText
Title of the card
hideImageOnMobile
Boolean
Is the image hidden on mobile ?
image
Image displayed at the right of the card
isShown
Boolean
display/hide the element (default true)
items
Sent as an option object to didomi-checkboxes
name
Name of the card
ownConsent
Object
If enabled, it will display 2 radio buttons instead of checkboxes
preferenceId
String
ID of the preference linked to the card.
purposeId
String
ID of the purpose linked to the card.
saveOnClick
Boolean
Should the consent be saved on each click on the checkboxes 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.
topContentContainer
Container of the top content of the card (except title)
For inline configuration, make sure to use kebab-case syntax. For example purposeId will become purpose-id.

Display the consent of the selected entity

If, instead of displaying the list of children as checkboxes, you want to display the consent of the selected entity, you can use the property ownConsent. It is an object with 2 properties: enabled and texts. Please see the example below:
1
ownConsent: {
2
enabled: true,
3
texts: {
4
enable: {
5
content: {
6
en: 'Yes'
7
}
8
},
9
disable: {
10
content: {
11
en: 'No'
12
}
13
}
14
}
15
}
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: "section-card-1",
9
type: "card",
10
options: {
11
purposeId: "purpose-id",
12
preferenceId: "preference-id",
13
color: "#F07D5A"
14
}
15
},
16
{
17
id: "section-card-2",
18
type: "card",
19
options: {
20
purposeId: "purpose-id",
21
preferenceId: "preference-id",
22
color: "#003790",
23
hasBorder: true,
24
name: {
25
content: {
26
en: "Your subscriptions"
27
}
28
},
29
description: {
30
content: {
31
en: "We will be able to contact you on the following channels to allow you to benefit from commercial offers that may interest you."
32
}
33
},
34
headerText: {
35
content: {
36
en: "Didomi"
37
}
38
},
39
exclude: ["channel-id-text"],
40
image: {
41
src: "https://www.didomi.io/static/assets/[email protected]"
42
}
43
}
44
}
45
]
46
}
47
};
Copied!
Last modified 9mo ago