Components

What is a Component?

A component is a configurable HTML element that can be used to collect consents from your users on your own websites.

A component is a configurable HTML element that will be displayed and act differently according to the configuration we provide. In the case of Didomi, it will help you create a custom preference center with only configuration and a huge gain of time. Each component have different purposes. Some will display text and handle translations as others will display a card of consent, allow you to display a button to save the consent or a checkbox without having to care about the HTTP request. Those elements are independent to each other and can be placed anywhere on your website and mix with other elements.

Installation

Here comes the magic. For the components to work, you will only need to include the Didomi SDK into your page.

If you already have a consent notice on your website, you will have nothing else to do. Let's try it out with a simple example:

Include the SDK (only if you don't already have the SDK script in your page)

Only if you don't have it already, place the following tag at the top of the section of your HTML pages, before any other script tag

<script async src="https://sdk.privacy-center.org/loader.js"></script>

Add your Didomi component

Anywhere in the body of your page, include this didomi-text component

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

If you followed the steps correctly, you should see a blue text saying 'Here is my first Didomi Component' in the location where you included the HTML tag.

Theming and Style

Theming and style 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 Components is that everything is configurable through a simple JavaScript object.

Every components 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 and mobile. Default being the default style of the component and mobile the style when the mobile breakpoint is reached. To see how to set a mobile breakpoint, please refer to this section. Mobile is using the default values and overriding it with its 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 = {
...
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "TYPE_OF_THE_COMPONENT",
options: {
style: {
default: {
color: "red",
backgroundColor: "blue"
},
mobile: {
backgroundColor: "orange"
}
}
}
}
]
}
};

Add breakpoints for responsive design

We allow you to add breakpoints for responsive design when using the style attribute of the components.

We currently support mobile breakpoint.

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
breakpoints: {
mobile: 767
},
activeComponents: [...]
}
};

Object VS Inline configuration

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

Object configuration

If you want to build a full preference center or a complex page with several consents, we recommend using this method as all your configuration will be centralized into the didomiConfig object. This object will contains all the information needed for Didomi to work properly, from the notice if you have one to your entities, containers or components.

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

Name

Description

id

ID of the component to link the object with the HTML component. It cannot contain spaces and need to be unique.

type

You can find the type of the component in their respective documentation page but it is usually the name of the component without the didomi-. For example didomi-checkbox will have a type checkbox.

options

Configuration of the component, you can find all the props available for each component in their respective documentation page.

Pros

  • Centralized configuration

  • Only one object for your entities, containers and components

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

  • Support of JavaScript for dynamic values

Cons

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

Example

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "TYPE_OF_THE_COMPONENT",
options: {
... // List of props as key: value
}
}
]
}
};
// HTML page
...
<didomi-checkbox id='ID_OF_THE_COMPONENT' />
...

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

  • Allow you to keep your configuration at component's level if you are using libraries like React.

  • Can be useful of you are using the same object from the didomiConfig on several components in your HTML and want to override one with a different value. (For example the same text, created in the didomiConfig object and linked to 3 different didomi-text but one of them needs a different font size)

Cons

  • Need the modify the HTML on each changes

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

Example

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

Remember that you can also use both together. In that case, if the same value is set on both configurations, the inline value will override the object value.

List of components

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

  • Checkbox: A functional checkbox linked to an entity

  • Checkboxes: A list of checkboxes linked to an entity

  • Container: A list of components

  • Save: A button with a side text saving the pending consents on the page

  • Text: A translated text

More components

  • BaseCheckbox: A label containing an input of type checkbox

  • Block: A div which can be styled

  • Button: A button with can be styled

  • Image: An image which can be styled

Live Examples

Support

Didomi components are supported by all modern browsers like Chrome, Safari, Firefox, Edge as well as IE11.