When using the Didomi elements, you have the option to choose between an inline configuration or an object configuration through the didomiConfig object.

Object configuration (recommended)

A component object needs to be added in the components.activeComponents array of the didomiConfig object and contains 3 attributes to be configured properly:

Pros

• Centralized configuration

• Only one object for your entities and components

• Separated from the HTML (Can be hosted on a different page)

• Can be imported in the Didomi Console, once available

Cons

• More verbose (Creation of IDs, logic separated from the component)

Example

window.didomiConfig = {
  containers: [
    {
      id: "CONTAINER_ID",
      entities: {...},
      components: {
        activeComponents: [
          {
            id: "ID_OF_THE_COMPONENT",
            type: "TYPE_OF_THE_COMPONENT",
            options: {
              ... // List of props as key: value
            }
          }
        ]
      }
    }
  ]
};
​

Inline Configuration

If you have easy access to your HTML and prefer to keep your configuration on each component, if is also possible with the inline configuration.

Pros‌

• Logic directly in the component

Cons

• Need the modify the HTML on each changes

• Can become quickly messy if you have a lot of components

• Still needs to be connected to a container

Example

<didomi-text container-id="CONTAINER_ID" content="Here is my first Didomi Component" style='{"default": {"color": "#359cbf"}}' />

Theming and Styling

Theming and styling is a big part of front-end development and we want to provide as much flexibility as possible to allow you to integrate properly our components to your website. The strength of the Didomi Elements is that everything is configurable through a simple JavaScript object.

Every elements have a style attribute. This attribute is an object of objects. As we understand that responsive design is something mandatory for modern development, we currently support default , mobile and tablet. Default being the default style of the component and mobile and tablet, the style when the mobile or tablet breakpoint is reached. To see how to set a breakpoint, please refer to this section. mobile and tablet are using the default values and override it with their own attributes (same behavior as the CSS media queries). You can use all the available CSS properties.

Make sure to use camelCase syntax. For example font-size will become fontSize.

window.didomiConfig = {
  containers: [
    {
      id: "CONTAINER_1_ID",
      components: {
        activeComponents: [
          {
            id: "ID_OF_THE_COMPONENT",
            type: "TYPE_OF_THE_COMPONENT",
            options: {
              style: {
                default: {
                  color: "red",
                  backgroundColor: "blue"
                },
                mobile: {
                  backgroundColor: "orange"
                }
              }
            }
          }
        ]
      }
    }
  ]
};
​

To know more about the style object and how it works, please read the breakpoints section.

List of components

• ​Card: Card linked to an entity with a list of checkboxes

• ​Checkbox: Functional checkbox linked to an entity

• ​Checkboxes: List of checkboxes linked to an entity

• ​Save: Button with a side text saving the pending consents on the page

• ​Text: Translated text

More components‌

• ​Block: div which can be styled

• ​Button: button with can be styled

• ​Image: image which can be styled