Save

Introduction

Name: didomi-save Component type: save Extends: DidomiBlock

Save all the pending consents present on the page by sending a POST request to the server.

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "save",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-save id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-save prop-key="PROP_VALUE" .../>

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

backgroundColor

String

Background color of the button, color of the texts other than the save button

borderRadius

String

Border radius of the button

color

String

Color of the text inside the button

confirmationText

DidomiText

Confirmation text once the consent has been saved

guidelineText

DidomiText

Information text when there is at least one pending consent

metadata

Object

Metadata passed to the HTTP request. See this section for more information

saveButton

DidomiButton

Save button

For inline configuration, make sure to use kebab-case syntax. For example borderRadius will become border-radius.

Metadata

If you want to send additional information to the POST HTTP request, you can populate this attribute with data. It will be sent beside the consent object in the body request as a metadata object.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-save",
type: "save",
options: {
...
metadata: {
brand: "didomi",
value: "test"
}
}
}
]
}
};
// OR //
<didomi-save
metadata='{ "brand": "didomi", "value": "test" }'
/>

Events

Name

Description

click-save

Trigger when the user clicks on the save button

const save = document.querySelector('#didomi-save');
save.addEventListener('click-save', (e) => {
console.log('the save button has been clicked', e)
});

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-save",
type: "save",
options: {
backgroundColor: "#F07D5A",
color: "#FFFFFF",
borderRadius: "2px",
saveButton: {
style: {
default: {
padding: "15px 30px"
}
},
text: {
content: "Save your preferences"
}
},
guidelineText: {
content:
"You have <b>{numberOfPendingConsent} change(s)</b> on hold, would you like to save?"
},
confirmationText: {
content: "Your choices were saved successfully"
}
}
}
]
}
};
<didomi-save id="section-save" />

Inline configuration

<didomi-save
background-color="#F07D5A"
color="#FFFFFF"
border-radius="2px"
save-button='{"style": {"default": {"padding": "15px 30px"}}, "text":{"content":"Save your preferences"}}'
guideline-text='{"content":"You have <b>{numberOfPendingConsent} change(s)</b> on hold, would you like to save?"}'
confirmation-text='{"content":"Your choices were saved successfully"}'
/>