Card

Introduction

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

Display a single card with a list of checkboxes.

Object configuration

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

Inline configuration

<didomi-card 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 card.

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 .

window.didomiConfig = {
...,
entities: [
{
"id": "email",
"name": "Emails"
},
{
"id": "print",
"name": {
"fr": "Courrier",
"en": "Mail"
}
},
{
"id": "purpose-id",
"name": "...",
"description": "..."
},
{
"id": "preference-id",
"name": "Preference 1",
"description": "Description..."
}
],
containers: [
{
"purposes": [
{
"id": "purpose-id",
"preferences": [
{
"id": "preference-id",
"channels": [
{
"id": "email"
},
{
"id": "print"
}
]
}
]
}
]
}
],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "card",
options: {
...,
purposeId: "purpose-id",
preferenceId: "preference-id"
}
}
]
}
};
<didomi-card 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 card. See this section for more information

color

String

Color of the checkboxes

contentContainer

DidomiFlex

Container of the content of the card (except title)

description

DidomiText

Description of the card.

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

DidomiBlock

Container of the title of the card

headerText

DidomiText

Title of the card

hideImageOnMobile

Boolean

Is the image hidden on mobile ?

image

DidomiImage

Image displayed at the right of the card

items

DidomiCheckboxes

Sent as an option object to didomi-checkboxes

name

DidomiText

Name of the card

preferenceId

String

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

purposeId

String

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

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

DidomiFlex

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.

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

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "section-card-1",
type: "card",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
color: "#F07D5A"
}
},
{
id: "section-card-2",
type: "card",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
color: "#003790",
hasBorder: true,
name: {
content: "Your subscriptions"
},
description: {
content: "We will be able to contact you on the following channels to allow you to benefit from commercial offers that may interest you."
},
headerText: {
content: "Didomi"
},
exclude: ["channel-id-text"],
image: {
src: "https://www.didomi.io/static/assets/logo@3x.png"
}
}
}
]
}
};
<didomi-card id="section-card-1" />
<didomi-card id="section-card-2" />

Inline configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
};
<didomi-card
purpose-id="purpose-id"
preference-id="preference-id"
color="#F07D5A"
/>
<didomi-card
purpose-id="purpose-id"
preference-id="preference-id"
color="#003790"
hasBorder="true"
name='{"content":"Your subscriptions"}'
description='{"content":"We will be able to contact you on the following channels to allow you to benefit from commercial offers that may interest you."}'
header-text='{"content":"Didomi"}'
exclude='["channel-id-text"]'
image='{"src":"https://www.didomi.io/static/assets/logo@3x.png"}'
/>