Customize the notice

The notice is the first banner or pop-in that gets displayed on your website to ask the user to give consent. It is a short version of the full Preferences pop-in that has all the details on the purposes and vendors that you are collecting consent for.

The notice is highly customizable to match the look and feel of your website: it can be displayed as a banner, a popup, a floating panel, etc. and you can change all the colors and content.

This section presents the main customization options that are available. If you need even more, you can use CSS to further customize the visual aspect of the notice.

Country and GDPR

If you are an EU-based company then you must display the notice and collect consent no matter what country the user is from. Make sure that the gdprAppliesGlobally variable is set to true at the beginning of our tag (it's a separate variable than window.didomiConfig):

window.gdprAppliesGlobally=true;

Conversely, if you are not in the EU, you are not required to apply GDPR to non EU-based visitors (although you can if you want to). In that case, you can set the gdprAppliesGlobally variable to false.

Supported languages

Our SDK supports multiple languages out-of-the-box with translations for all our standard messages. See below if your website uses other languages. English is the default language: if a visitor does not use a supported language, the banner and popups will be displayed in English.

You do not need to do anything to use Didomi's languages. However, you can choose to enable only certain languages and set up a different default language. Set the languages.enabled property to your list of supported languages and languages.default property as the default language in case the customer language is not supported:

<script type="text/javascript">
window.didomiConfig = {
languages: {
enabled: ['en', 'es', 'fr'], // List of languages that visitors can use (must be a subset of the languages that we support)
default: 'fr' // Default language to use if the visitor uses a language that is not enabled
}
};
</script>

By default, enabled is the list of supported languages by Didomi and default is en. You can support different languages by changing the English texts and setting English as the only enabled language.

We currently support the following languages:

Language

Code

Bulgarian

bg

Catalan

ca

Croatian

hr

Czech

cs

Danish

da

Dutch

nl

English

en

Finnish

fi

French

fr

German

de

Greek

el

Hungarian

hu

Italian

it

Lithuanian

lt

Polish

pl

Portuguese

pt

Romanian

ro

Russian

ru

Slovak

sk

Slovenian

sl

Spanish

es

Swedish

sv

Turkish

tr

Ukrainian

uk

Theme

The SDK supports theming by providing a color that will be used across the interfaces (consent notice, popups, etc.) to make sure that our UIs match your brand colors.

The color that you provide should be the main color of your website, the one that appears most frequently.

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
theme: {
color: '#3F51B5'
}
};
</script>

Position

The notice can be displayed as a popup, a regular banner (top or bottom), a smaller banner or as a floating panel and can be positioned at different locations on the screen.

The position configuration parameter lets you define the position of the notice. The possible values are:

Values

Description

popup

Display the notice as a full-screen popup. Also set your website logo and name to make sure the popup is personnalized.

panel-top-left panel-top-right panel-bottom-left panel-bottom-right

Display the notice as a small panel in one of the corners of the screen. panel-bottom-right is the default value.

top bottom

Display a banner notice at the top or the bottom of the screen

top-left top-right bottom-left bottom-right

Display a floating panel in a corner of the screen

Examples:

Banner
Corner banner
Popup
Floating panel
<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
position: 'bottom'
}
};
</script>
<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
position: 'panel-bottom-right'
}
};
</script>
<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
position: 'popup'
}
};
</script>
<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
position: 'top-left'
}
};
</script>

Text alignment

You can change the alignment of the text inside the notice. The options are left, right, center and justify. By default, the text is aligned to the left.

Example:

<script type="text/javascript">
window.didomiConfig = {
notice: {
textAlignment: 'left'
}
};
</script>

Logo alignment

You can change the alignment of the logo inside the notice. The options are the one available for the CSS property align-self. So for example to align it to the left, the value would be flex-start and to the right flex-end. By default, the logo is aligned to the center.

Example:

<script type="text/javascript">
window.didomiConfig = {
notice: {
logoAlignment: 'center'
}
};
</script>

Buttons

Order

You can change the order of the buttons inside the notice. By default learnMorePosition is null and the "learn more" button is displayed before the "agree" button on the regular notice and after on the popup notice.

The options are before and after.

Example:

<script type="text/javascript">
window.didomiConfig = {
notice: {
learnMorePosition: null
}
};
</script>

Margins

You can set the margins of the "learn more" button on the popup notice.

The options are based on the CSS margin property.

Example:

<script type="text/javascript">
window.didomiConfig = {
notice: {
learnMoreMargin: '20px 0 5px 0'
}
};
</script>

Text

You can change the message of the notice as well as the "Agree & Close" and "Learn More" buttons.

Configuration Key

Description

notice.content.popup

Message in the popup. This is only used if you are using a popup and not for banners or floating panels.

notice.content.notice

Message in the banner. This is only used if you are using a banner or a floating panel. It does not apply to the popup format.

notice.content.dismiss

"Agree & Close" button

notice.content.learnMore

"Learn More" button

notice.content.subTextPopup

Message below the "Learn more" button in the popup. This is only used if you are using a popup and not for banners or floating panels.

Example:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
content: {
notice: {
en: 'This website uses cookies to provide you with tailored commercial offers',
fr: 'Ce site utilise des cookies pour vous fournir des offres commerciales personalisées'
},
dismiss: {
en: 'Agree & Close',
fr: 'Accepter et fermer'
},
learnMore: {
en: 'Learn More',
fr: 'En savoir plus'
}
}
}
};
</script>

Note that you should provide translations for all the languages that your website supports. We provide translations for all our standard messages.

Consent collection on navigation

This option is turned off by default.

Under GDPR and ePrivacy, collecting consent when the user navigates can no longer be considered a valid consent.

Configuration

Our banner supports the option of collecting consent when the user navigates to another page of your website. That means that, when the user clicks on a link to another page, the banner get closed and the user consent is registered. The banner will not be shown again on the following pages.

You can enable or disable that option with the notice.closeOnClick option.

To enable consent on navigation:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
closeOnClick: true
}
};
</script>

To disable consent on navigation:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
closeOnClick: false
}
};
</script>

This option allows you to set a delay that will be applied when consent is collected after the user navigates to another page of your website. That delay will allow your vendors to execute on the first page before the user is redirected to the page he was meant to navigate to. It helps not losing data that would only be available on the first page that the user gets on (for analytics and attribution, for instance).

With this option, the chain of events becomes:

  1. User clicks on a link to navigate to another page of your website

  2. Consent is collected

  3. Vendors' tags are fired on the page

  4. Delay of X milliseconds

  5. User navigates to the other page

If the user has already given consent by another mean, no delay will be applied.

To enable this option, set your delay in milliseconds in the notice.closeOnClickNavigationDelay property:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
closeOnClick: true,
closeOnClickNavigationDelay: 500 // Delay of 500 milliseconds
}
};
</script>

This option is disabled by default and no delay is applied.

Consent collection on backdrop click

Our banner supports the option of collecting consent when the user clicks on the backdrop when the popup notice is open. By default, this option is disabled but you can enable it with the notice.closeOnClickBackdrop option.

This feature only applies to the "popup" notice.

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
closeOnClickBackdrop: true
}
};
</script>

Window for recollecting consent

By default, consent is automatically re-collected and the notice is displayed again in three cases:

  • After 13 months (maximum acceptable cookie lifetime)

  • When the user clears they browser cookies

  • When a new vendor is added in your tag configuration or in the IAB vendors list (if you choose the option all)

The third case (a new vendor is added) can happen pretty often so you have the option to choose a number of days during which the notice will not be displayed even though there are new vendors to collect consent for. By default, the number is zero and the notice will be displayed automatically if a new vendor is added.

<script type="text/javascript">
window.didomiConfig = {
notice: {
daysBeforeShowingAgain: 5 // Number of days. Default is 0
}
};
</script>

If you choose that option and because the notice is not shown again, the user consent status will be partial and some vendors will not have consent information. The function Didomi.isUserConsentStatusPartial() can return true in these cases.

Vendors and purposes

You must configure the vendors for which consent is collected by our consent notice and displayed in the preferences popup.

Read our detailed section to see how they can be configured.

Configuration by user country

If you want to apply a different configuration depending on the country that the user is from, you can add country-specific properties in a configByCountry property where each key is a ISO 3166-1 alpha-2 country code in uppercase (the country code is case-sensitive). This allows you to replace part or all of the configuration for some countries.

Example to force the language based on the user country instead of the user browser configuration, and modify vendors:

<script type="text/javascript">
window.didomiConfig = {
// Visitors from countries other than FR or US will get this configuration
languages: {
enabled: ['fr', 'en'], // Enable both French and English for all users
},
app: {
name: 'My Website',
vendors: {
iab: {
all: true,
exclude: [9],
}
}
},
configByCountry: {
// Visitors from France will get the global configuration + these changes applied to it
FR: {
languages: {
enabled: ['fr'] // Force French for visitors from France
},
app: {
vendors: {
iab: {
all: false,
include: [9],
exclude: [] // It's important to override "exclude" here otherwise it would be kept as [9]
}
}
}
},
// Visitors from the US will get the global configuration + these changes applied to it
US: {
languages: {
enabled: ['en'] // Force English for visitors from the US
}
// Vendors are not specified here so the global vendors will apply (all IAB)
}
}
};
</script>

The properties defined in configByCountry are merged with the rest of the configuration when the user comes from the matching country. The properties from the country configuration override the properties defined globally and are merged recursively so make sure to fully override objects when necessary. Arrays are replaced and not merged or concatenated.

Custom notice

You can use your own custom notice to replace the standard Didomi SDK notices (banner or popup). Do to so, we have 2 options:

Option 1: Change the HTML of the original notice

This option keeps some native behaviors like the position of the notice, the backdrop (for the popup notice) or the logic to decide when to to display the notice. You provide HTML to re-create all the UI elements and structure. This option is interesting if you want to change the UI but keep the behavior of the Didomi standard notice.

Set your HTML in the notice.content.html key:

Plain Javascript
React

Custom HTML

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
content: {
html: {
en: '<div>Custom Notice</div>'
}
}
}
};
</script>

Custom HTML node

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
content: {
html: {
en: element => {
return element.appendChild(document.createTextNode('This is the new notice'))
}
}
}
}
};
</script>

Custom HTML

const didomiConfig = {
app: {
apiKey: '<Your API key>',
notice: {
content: {
html: {
en: '<div>Custom Notice</div>'
}
}
}
}
};
...
<DidomiSDK config={didomiConfig}/>

Custom React component

import { render } from 'react-dom'
class NoticeHTML extends Component {
openPreferences() {
Didomi.preferences.show()
}
render() {
const noticeStyle = {
color: 'red'
}
return (
<div style={noticeStyle}>
<span>Custom Notice HTML. <a onClick={this.openPreferences.bind(this)}>Open Preferences</a></span>
{
this.props.shouldDisplayMoreText &&
<p>More Text</p>
}
</div>
)
}
}
const didomiConfig = {
app: {
apiKey: '<Your API key>',
notice: {
content: {
html: {
en: element => {
render(<NoticeHTML shouldDisplayMoreText={false} />, element)
}
}
}
}
}
}

Other keys in notice.content will be ignored.

Option 2: Disable the original notice and build your own

This option disables completely the original notice and you will have to recreate everything yourself (logic and UI). This choice is perfect if you want to control when to display the notice.

Disable the standard notice

Disable the standard notice in your configuration file:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
},
notice: {
enable: false
}
};
</script>

When the notice is disabled, the SDK will never display its own standard notice so you must implement your own instead or no consent will be collected.

Build your own custom notice

Build your own custom notice (a fragment on Android) with your design and content. A notice usually contains a disclaimer (what personal data you are collecting and for what usage) and the following action buttons:

  • Learn more: opens the Preferences popup (call the Didomi.preferences.show() function of the SDK)

  • Agree & Close: stores the user consent to all vendors and purposes and closes the notice (call the Didomi.setUserAgreeToAll() function of the SDK)

  • Disagree & Close (optional): stores the fact that the user has denied consent to all vendors and purposes and closes the notice (call the Didomi.setUserDisagreeToAll() function of the SDK)

Show your custom notice

You need to show your custom notice when needed. On page load and when the Didomi SDK is ready, check if the notice should be displayed:

Plain Javascript
<script type="text/javascript">
window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function (Didomi) {
if (Didomi.notice.isVisible()) {
// Show your own notice
}
});
</script>