save

LayoutComponent ❌ Theme ✅ Options ✅ Content & Translations

Overview

The save component displays the save button and pending changes notification for widgets. It shows users how many changes are pending and provides a button to submit those changes to the Consents API.

Behavior with one-click consent

When a user changes a purpose that has one-click consent enabled, the pending changes counter shows the number of user-initiated changes, not the total number of values affected by consent propagation.

Example: If a user toggles a purpose with one-click consent enabled, and this automatically updates 5 multi-choice preference values through propagation, the {numberOfPendingConsent} variable will show 1 (one purpose changed by the user), not 6 (the purpose plus 5 preferences).

This design choice reflects that the user made only one direct interaction in the widget. All propagated preference changes are tracked internally by the SDK, but they don't increase the pending changes counter.

Editing the save component

To edit a save element, you need to edit the layout-component save and send a PATCH request on /widgets/layout-component/{layout-component-id} and specify the following options in the options property.

Element	Description	Component options
guidelineText	Text element that appears above Save button when changes are detected in the form.	DidomiTextOptions
saveButton	Save button element.	DidomiTextOptions
card	Container of Save button.	DidomiCardOptions

{
    "guidelineText": {
        "content": {
            "en": "You have {numberOfPendingConsent} changes pending, do you want to save?",
            "fr": "Vous avez {numberOfPendingConsent} changements non enregistrés, voulez-vous sauvegarder?"
        }
    },
    "saveButton": {
        "text": {
            "content": {
                "en": "YOUR_LABEL",
                "fr": "VOTRE_LABEL"
            }
        }
    },
    "card": {
        "style": {
           "default": {
              "backgroundColor": "",
              "padding": "",
              "borderRadius": "",
              "borderWidth": "",
              "boxShadow": "",
              "margin": "",
           }
        }    
    }
}