Layout

What is a components layout?

The purpose of a layout is to assemble the active components previously created in the active components section together as a tree to create the HTML structure of the preference center.

Structure‌

A layout contains a list of active components. Each component is represented by an object with an id attribute that matches the ID of the component and an optional children property if you want to nest components:

Property

Type

Description

id

String

id of the selected active component

children

Array

If the component allows to receive children, you can nest a list of components inside another component. Currently, only didomi-block allows nesting.

Where do I add my layout?

Once you know the structure you want for your components, you can add it to your configuration. A layout needs to be added in the layout array of the components object, itself part of a specific container:

window.didomiConfig = {
containers: [
{
id: "CONTAINER_1_ID",
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
...
}
],
layout: [
{
id: "ID_OF_THE_COMPONENT",
}
]
}
]
]
};

Example

In the case where you have :

Three active components:

  • my-text (text)

  • my-button (button)

  • my-block (block)

You want my-text and my-button to be inside my-block and my-block to be at the root of your layout:

The layout would be :

window.didomiConfig = {
...,
components: {
activeComponents: [...],
layout: [
{
id: "my-block",
children: [
{
id: "my-text",
},
{
id: "my-button",
}
]
}
]
}
};

Now let's refresh the page. If you configured everything properly, you should see your preference center being displayed 😃. You can check out our examples page to see some live demos.