Examples

You can combine those elements as much as you want. Here are a few examples on the possibilities offered by the Didomi Components.

Create a box with responsive design

To see the correct style, you need to load the window with the determined width already. Resizing the window after will not dynamically trigger the breakpoints.

Here is a basic example of responsive design. We allow you to have different styles depending on the window width. See this section for more information.

window.didomiConfig = {
...
components: {
breakpoints: {
mobile: 767
},
activeComponents: [
// Container Component
{
id: "container",
type: "block",
options: {
display: "flex",
style: {
default: {
flexDirection: "column",
padding: "10px",
boxShadow: "0 0 10px 0 rgba(49, 113, 64, 0.2)",
alignItems: "center",
}
}
}
},
// Top content Component
{
id: "top",
type: "block",
options: {
display: "flex",
style: {
default: {
justifyContent: "flex-start",
flexDirection: "column",
alignItems: "center",
paddingBottom: "10px",
},
}
}
},
// Image Component
{
id: "logo",
type: "image",
options: {
src: "https://www.didomi.io/static/assets/logo.svg",
style: {
mobile: {
display: 'none'
}
}
}
},
// Title Component
{
id: "title",
type: "text",
options: {
content: "My title",
style: {
default: {
fontSize: "20px",
fontWeight: "800"
}
}
}
},
// Description Component
{
id: "description",
type: "text",
options: {
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
},
// Save button Component
{
id: "save",
type: "button",
options: {
text: {
content: "My Button",
},
style: {
default: {
backgroundColor: "#F07D5A",
color: "#FFFFFF",
padding: "15px 30px",
marginTop: "10px",
},
mobile: {
width: "100%"
}
}
}
}
]
}
};
// HTML
<didomi-block id="container">
<didomi-block id="top">
<didomi-image id="logo"></didomi-image>
<didomi-text id="title"></didomi-text>
</didomi-block>
<didomi-text id="description"></didomi-text>
<didomi-button id="save"></didomi-button>
</didomi-block>

Create a custom card with checkboxes and a save button

Here is a complex example of a custom card. This card will contain a logo, 2 checkboxes and a save button which will display dynamic text depending on the pending consents and send a request to save them on click.

The configuration object and HTML are pretty simple and are used to structure and style the components.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "container",
type: "block",
options: {
style: {
default: {
textAlign: "center",
border: "1px solid #eeeeee",
borderRadius: "2px 2px 0 0",
padding: "10px",
boxShadow: "0 0 10px 0 rgba(49, 113, 64, 0.2)"
}
}
}
},
// Image Component
{
id: "logo",
type: "image",
options: {
src: "https://www.didomi.io/static/assets/logo.svg"
}
},
// Content Component (contains the list of channels)
{
id: "content",
type: "block",
options: {
display: "flex",
style: {
default: {
justifyContent: "space-around",
padding: "10px 0"
}
}
}
},
// Save button Component
{
id: "save",
type: "button",
options: {
text: {
content: "No changes detected"
},
style: {
default: {
backgroundColor: "#F07D5A",
color: "#FFFFFF",
padding: "15px 30px",
width: "100%"
}
}
}
},
// First Channel
{
id: "sms-checkbox",
type: "checkbox",
options: {
purposeId: "purpose-1",
preferenceId: "preference-1",
channelId: "channel-1",
text: {
content: "SMS"
}
}
},
// Second Channel
{
id: "text-checkbox",
type: "checkbox",
options: {
purposeId: "purpose-1",
preferenceId: "preference-1",
channelId: "channel-2",
text: {
content: "Text"
}
}
}
]
}
};
// HTML
<didomi-block id="container">
<didomi-image id="logo"></didomi-image>
<didomi-block id="content">
<didomi-checkbox id="sms-checkbox"></didomi-checkbox>
<didomi-checkbox id="text-checkbox"></didomi-checkbox>
</didomi-block>
<didomi-button id="save"></didomi-button>
</didomi-block>

Now that we have the style and structure, we need to add some logic.

This first block takes care of updating the state of the button, listen to the click event and save the pending consents.

// Get the save button and disable it as no changes are made on load
const saveButton = document.querySelector("#save");
saveButton.setAttribute("is-disabled", true);
// Listens the click event and save the pending consents
saveButton.addEventListener("click-btn", e => {
saveButton.setAttribute("is-disabled", true);
window.Didomi.savePendingConsents().then(function(e) {
saveButton.setAttribute(
"text",
JSON.stringify({ content: "No changes detected" })
);
});
});

This second block listen to the 'consent.pendingchanged' event and takes care of updating the text as well as enabling/disabling the button depending on the number of pending consents.

// Listen to the 'consent.pendingchanged' event and edit the text of the save button
// to display the number of pending consents
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
event: "consent.pendingchanged",
listener: () => {
const pendingConsents = window.Didomi.getPendingConsents();
const numberOfPendingConsent = pendingConsents.length;
let saveText = {};
if (numberOfPendingConsent !== 0) {
saveText = {
content: "Save the {numberOfPendingConsent} pending consent(s)",
macros: [
{
key: "numberOfPendingConsent",
value: numberOfPendingConsent
}
]
};
// There are pending consents, remove the disabled state
saveButton.removeAttribute("is-disabled");
} else {
saveText = {
content: "No changes detected"
};
// There are no pending consents, add the disabled state
saveButton.setAttribute("is-disabled", true);
}
// Set the save button text with new attributes
saveButton.setAttribute("text", JSON.stringify(saveText));
}
});