Comment on page
Look and feel
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 |
Arabic | ar |
Azerbaijani | az |
Bengali | bn |
Bulgarian | bg |
Catalan | ca |
Croatian | hr |
Czech | cs |
Danish | da |
Dutch | nl |
English | en |
Estonian | et |
Finnish | fi |
Filipino / Tagalog | fil |
French | fr |
German | de |
Greek | el |
Hebrew | he |
Hindi | hi |
Hungarian | hu |
Indonesian | id |
Italian | it |
Japanese | ja |
Korean | ko |
Latvian | lv |
Lithuanian | lt |
Macedonian | mk |
Malaysian | ms |
Norwegian | no |
Polish | pl |
Portuguese | pt |
Portuguese (Brazil) | pt-BR |
Romanian | ro |
Russian | ru |
Serbian | sr |
Simplified Chinese | zh-CN |
Slovak | sk |
Slovenian | sl |
Spanish | es |
Swahili | sw |
Swedish | sv |
Thai | th |
Traditional Chinese | zh-TW |
Turkish | tr |
Ukrainian | uk |
Vietnamese | vi |
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>
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>
By default, our notices display
Agree and close
and Learn More
buttons. These allow users to give consent or get more information on the purposes and vendors that your website works with.We also support displaying
Agree and close
and Disagree and close
buttons directly in the notice:
To display those buttons, set the
notice.denyOptions.button
of your notice to primary
window.didomiConfig = {
notice: {
denyOptions: {
button: 'primary',
}
}
};
This is supported for both banners (
bottom
or top
positions) or pop-ins (popup
position).In the example above the
Disagree and close
button is a primary button. To make it a secondary button, you can set the notice.denyOptions.button
configuration option secondary
:window.didomiConfig = {
notice: {
denyOptions: {
button: 'secondary',
}
}
};
To hide the
Disagree and close
button in the notice you can set notice.denyOptions.button
to none
.Please note that the
denyAsPrimary
parameter is deprecated and should not be used for the styling of the "Disagree and close" button.A "Continue without agreeing" link can be displayed instead of the "Disagree and close" button in the
optin
notice type:
To show the "Continue without agreeing" link, set the
notice.denyOptions.link
value to true
:window.didomiConfig = {
notice: {
denyOptions: {
button: 'secondary',
link: true,
}
}
};
The "Continue without agreeing" link behaves the same way as the "Disagree and close" button.
Please note that if
notice.denyOptions.link
is true
then notice.denyOptions.button
options will be ignored and only a link will be shown in the notice.Please note that the
denyAsLink
parameter is deprecated and should not be used for the "Continue without agreeing" link configuration. To comply with Italian regulation, you should add a cross button to the notice. To make the cross button appear in the notice set the
notice.denyOptions.cross
parameter value to true
:window.didomiConfig = {
notice: {
denyOptions: {
cross: true,
link: true,
}
}
};

Italian Regulation example
Please note that you can have both the “Disagree and close button” and the cross button in the same notice, for example:
window.didomiConfig = {
notice: {
denyOptions: {
button: 'primary',
link: true,
}
}
};

Italian Regulation Example
After clicking on the "Disagree and close" button or "Continue without agreeing" link in the optin notice, all purposes' and vendors' consents are disabled, and all purposes' and vendors' legitimate interests are enabled by default.
To disable legitimate interests as well after clicking on the "Disagree and close" button or "Continue without agreeing" link,
notice.denyAppliesToLI
should be set to true
in the Didomi configuration object:window.didomiConfig = {
notice: {
type: 'optin',
denyAppliesToLI: true
}
};
For notices with position
popup
, you can show a Close icon to allow users to ignore the notice until the next page:
To show the Close icon, set the
notice.canCloseAndIgnore
value to true
:window.didomiConfig = {
notice: {
canCloseAndIgnore: true,
position: 'popup',
type: 'optin'
}
};
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>
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>
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>
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>
You can change some of the texts of the consent notice:
Configuration Key | Description |
notice.content.dismiss | "Agree & Close" button |
notice.content.deny | "Decline" 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: {
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.
If you want to move the vendor link to your custom text
notice.content.notice
instead of having a separate link, you can use the function Didomi.preferences.show('vendors')
to open the preference popup. The original link will be automatically replaced.<a href="javascript:Didomi.preferences.show('vendors')">View partners</a>
Last modified 1yr ago