Customize the preferences popup

The "Preferences" pop-in allows the user to manage his or her preferences in terms of consent given by purpose and by vendor. By default, it is shown when the user clicks on "Learn more" in the notice (banner or popin) and we recommend adding a link in your app to open it.

You can customize the texts from that screen.

Purposes screen

Purposes

You can control how purposes should be displayed, such as preferred order, icons, etc.

This can be done by adding an array of purposes in the preferences.categories property in the didomi_config.json file. The order in which items are added to this array will be the same order in which purposes will be displayed in based on their purposeId.

Purposes that are required by some vendors and that are not included in the list will be appended to the end of the list in alphabetical order to make sure that all required purposes are displayed and that consent is correctly collected.

didomi_config.json
{
"preferences": {
"categories": [{
"type": "purpose",
"purposeId": "cookies",
"icon": "PurposeIcon1"
}, {
"type": "purpose",
"purposeId": "advertising_personalization",
"icon": "PurposeIcon2"
}, {
"type": "purpose",
"purposeId": "ad_delivery",
"icon": "PurposeIcon3"
}]
}
}

Configuration Key

Type

Description

preferences.categories[index].type

String

Type of category (currently the only option supported is purpose) to be displayed.

preferences.categories[index].purposeId

String

Purpose ID to be displayed in that position. See Vendors and purposes for a list of available purposes.

preferences.categories[index].icon

String

Reference to an icon image loaded from the app.

Text

You can change the content of the popup by setting properties on preferences.content.

Configuration Key

Description

preferences.content.text

Main content of the popup

preferences.content.title

Title of the popup (Welcome to ...)

preferences.content.disagreeToAll

'Disagree to all' button

preferences.content.agreeToAll

'Agree to all' button

preferences.content.save

'Save' button

didomi_config.json
{
"preferences": {
"content": {
"text": {
"en": "We and our partners place cookies, access and use non-sensible information from your device to improve our products and personalize ads and other contents throughout this website. [...]",
"fr": "Nos partenaires et nous déposons des cookies et utilisons des informations non sensibles de votre appareil pour améliorer nos produits et afficher des publicités et contenus personnalisés. Vous pouvez accepter ou refuser ces différentes opérations. [...]"
},
"title": {
"en": "Welcome to our website",
"fr": "Bienvenue sur notre site"
},
"disagreeToAll": {
"en": "Disagree to all",
"fr": "Refuser tout"
},
"agreeToAll": {
"en": "Agree to all",
"fr": "Accepter tout"
},
"save": {
"en": "Save",
"fr": "Sauvegarder"
}
}
}
}

Vendors screen

Text

You can change the content of the popup by setting properties on preferences.content.

Configuration Key

Description

preferences.content.textVendors

Main content of the popup

Display when consent is missing

If you want to bypass the notice and display the Preferences popup directly when consent is missing, you can set the property preferences.showWhenConsentIsMissing to true. When that is configured, you also need to disable the regular notice to ensure that it will not be displayed by setting notice.enable to false.

didomi_config.json
{
"notice": {
"enable": false
},
"preferences": {
"showWhenConsentIsMissing": true
}
}

Prevent the popup from being closed when consent is missing

By default, the Preferences popup can be closed at any time, even if the user has not made a choice for some purposes. You can choose to hide the "X" icon and disallow closing the popup until the user has expressed a choice for every purpose by setting canCloseWhenConsentIsMissing to false.

didomi_config.json
{
"preferences": {
"canCloseWhenConsentIsMissing": false
}
}

Allow the Agree to all and Disagree to all buttons to be disabled until the user scrolls to the bottom of the screen

By adding the disableButtonsUntilScroll flag into the preferences section of the config file and setting it to true, the Agree to all and Disagree to all buttons of the Purposes view will be blocked/disabled until the user scrolls to the bottom of the screen in order to see all the purposes.

Configuration key

Type

Description

preferences.disableButtonsUntilScroll

Boolean

If true, Agree to all and disagree to all buttons will be disabled until the user scrolls to the bottom. If false or not present, the buttons will not be blocked.

didomi_config.json
{
"preferences": {
"disableButtonsUntilScroll": true
}
}