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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
languages:{
4
enabled:['en','es','fr'],// List of languages that visitors can use (must be a subset of the languages that we support)
5
default:'fr'// Default language to use if the visitor uses a language that is not enabled
6
}
7
};
8
</script>
Copied!
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
Bulgarian
bg
Catalan
ca
Croatian
hr
Czech
cs
Danish
da
Dutch
nl
English
en
Estonian
et
Finnish
fi
French
fr
German
de
Greek
el
Hungarian
hu
Italian
it
Japanese
ja
Korean
ko
Latvian
lv
Lithuanian
lt
Malaysian
ms
Polish
pl
Portuguese
pt
Romanian
ro
Russian
ru
Serbian
sr
Simplified Chinese
zh-CN
Slovak
sk
Slovenian
sl
Spanish
es
Swedish
sv
Thai
th
Traditional Chinese
zh-TW
Turkish
tr
Ukrainian
uk
Vietnamese
vi
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.
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
theme:{
7
color:'#3F51B5'
8
}
9
};
10
</script>
Copied!
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.
Display the notice as a small panel in one of the corners of the screen. panel-bottom-right is the default value.
topbottom
Display a banner notice at the top or the bottom of the screen
top-lefttop-rightbottom-leftbottom-right
Display a floating panel in a corner of the screen
Examples:
Banner
Corner banner
Popup
Floating panel
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
notice:{
7
position:'bottom'
8
}
9
};
10
</script>
Copied!
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
notice:{
7
position:'panel-bottom-right'
8
}
9
};
10
</script>
Copied!
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
notice:{
7
position:'popup'
8
}
9
};
10
</script>
Copied!
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
notice:{
7
position:'top-left'
8
}
9
};
10
</script>
Copied!
Type
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 type of your notice to optin:
1
window.didomiConfig ={
2
notice:{
3
position:'bottom',
4
type:'optin'
5
}
6
};
Copied!
This is supported for both banners (bottom or top positions) or pop-ins (popup position).
Style of the "Disagree and close" button
By default, the Disagree and close button is a primary button. To make it a secondary button, you can use the notice.denyAsPrimary configuration option:
1
window.didomiConfig ={
2
notice:{
3
position:'bottom',
4
type:'optin',
5
denyAsPrimary:false
6
}
7
};
Copied!
"Continue without agreeing" link
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.denyAsLink value to true:
1
window.didomiConfig ={
2
notice:{
3
position:'popup',
4
type:'optin',
5
denyAsLink:true
6
}
7
};
Copied!
The "Continue without agreeing" link behaves the same way as the "Disagree and close" button.
Configuring legitimate interest legal basis status
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:
1
window.didomiConfig ={
2
notice:{
3
type:'optin',
4
denyAppliesToLI:true
5
}
6
};
Copied!
Close button
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:
1
window.didomiConfig ={
2
notice:{
3
canCloseAndIgnore:true,
4
position:'popup',
5
type:'optin'
6
}
7
};
Copied!
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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
notice:{
4
textAlignment:'left'
5
}
6
};
7
</script>
Copied!
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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
notice:{
4
logoAlignment:'center'
5
}
6
};
7
</script>
Copied!
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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
notice:{
4
learnMorePosition:null
5
}
6
};
7
</script>
Copied!
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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
notice:{
4
learnMoreMargin:'20px 0 5px 0'
5
}
6
};
7
</script>
Copied!
Texts
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:
1
<script type="text/javascript">
2
window.didomiConfig ={
3
app:{
4
apiKey:'<Your API key>'
5
},
6
notice:{
7
content:{
8
dismiss:{
9
en:'Agree & Close',
10
fr:'Accepter et fermer'
11
},
12
learnMore:{
13
en:'Learn More',
14
fr:'En savoir plus'
15
}
16
}
17
}
18
};
19
</script>
Copied!
Note that you should provide translations for all the languages that your website supports. We provide translations for all our standard messages.
Move the vendors link in your banner to your custom text
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.