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.
1
window.didomiConfig = {
2
...
3
components: {
4
layout: {...},
5
activeComponents: [
6
{
7
id: "ID_OF_THE_COMPONENT",
8
type: "save",
9
options: {
10
...,
11
propKey: "PROP_VALUE" // Remember to use camelCase for the key
12
}
13
}
14
]
15
}
16
};
17
Copied!

Inline configuration

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

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
Confirmation text once the consent has been saved
display
String
CSS display property. Example: 'flex', 'inline' ...
guidelineText
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
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.
1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "section-save",
7
type: "save",
8
options: {
9
...
10
metadata: {
11
brand: "didomi",
12
value: "test"
13
}
14
}
15
}
16
]
17
}
18
Copied!

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

1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "section-save",
7
type: "save",
8
options: {
9
backgroundColor: "#F07D5A",
10
color: "#FFFFFF",
11
borderRadius: "2px",
12
saveButton: {
13
style: {
14
default: {
15
padding: "15px 30px"
16
}
17
},
18
text: {
19
content: "Save your preferences"
20
}
21
},
22
guidelineText: {
23
content:
24
"You have <b>{numberOfPendingConsent} change(s)</b> on hold, would you like to save?"
25
},
26
confirmationText: {
27
content: "Your choices were saved successfully"
28
}
29
}
30
}
31
]
32
}
33
};
Copied!
Last modified 9mo ago