When using the Didomi elements, you have the option to choose between an inline configuration or an object configuration through the didomiConfig
object.
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 |
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 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}}]}}]};
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 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.
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