Container

Introduction

Name: didomi-container Component type: container

Group other Didomi components. It is mostly used is you are using the object configuration method and you want to only have one HTML Didomi element in your source code.

didomi-container is an exception and currently does not contain a prop style.

Object configuration

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

Inline configuration

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

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

children

Array

Array of objects containing the IDs of the components you want to include in the container

content

String

HTML that can contains Didomi components

Children

This attribute is very useful when you want to group some Didomi components together. You only need to create them on your object configuration and use their IDs in the children attribut.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "container-with-text-and-checkbox",
type: "container",
options: {
children: [
{
id: "section-text"
},
{
id: "checkbox-email"
}
]
}
},
{
id: "checkbox-email",
type: "checkbox",
options: {
purposeId: "purpose-id", // Needs to create a purpose
preferenceId: "preference-id", // Needs to create a preference
channelId: "email", // Needs to create a channel
}
},
{
id: "section-text",
type: "text",
options: {
content: "This text is part of the container"
}
}
]
}
};
<didomi-container id="container-with-text-and-checkbox" />

This feature is only available and useful if you use the object configuration option.

Content

If you only want to display HTML, you can use the content attribute. This can be useful if you want to have all your HTML related to the privacy center in the configuration object and don't want to edit your HTML source code every time you want to update your components.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "container-with-text-and-checkbox",
type: "container",
options: {
content: "<div>Here is a didomi component: <didomi-text content='I am a Didomi Text component'/></div>"
}
}
]
}
};
<didomi-container id="container-with-text-and-checkbox" />

Examples

Here is an example of a didomi-container containing a didomi-text and a didomi-checkbox elements.

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "container-with-text-and-checkbox",
type: "container",
options: {
children: [
{
id: "section-text"
},
{
id: "checkbox-email"
}
]
}
},
{
id: "checkbox-email",
type: "checkbox",
options: {
purposeId: "purpose-id", // Needs to create a purpose
preferenceId: "preference-id", // Needs to create a preference
channelId: "email", // Needs to create a channel
color: "#F07D5A"
}
},
{
id: "section-text",
type: "text",
options: {
content: "This text is part of the container"
}
}
]
}
};
<didomi-container id="container-with-text-and-checkbox" />

Inline configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "checkbox-email",
type: "checkbox",
options: {
purposeId: "purpose-id", // Needs to create a purpose
preferenceId: "preference-id", // Needs to create a preference
channelId: "email", // Needs to create a channel
color: "#F07D5A"
}
},
{
id: "section-text",
type: "text",
options: {
content: "This text is part of the container"
}
}
]
}
};
<didomi-container children='[{"id": "section-text"}, {"id": "checkbox-email"}]' />