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.

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

Inline configuration

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

Props Options

Name

Type

Description

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

display

String

CSS display property. Example: 'flex', 'inline' ...

guidelineText

DidomiText

Information text when there is at least one pending consent

isShown

Boolean

display/hide the element (default true)

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"
}
}
}
]
}

Examples

If you want to see the image, please click on the Open preview in new window button to see the example on full screen.

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"
}
}
}
]
}
};