Skip to main content

Controlling the language of the privacy banner based on the content of the website

Updated

Please note

In order for this walk-through to work, you need to have the relevant languages configured in your Usercentrics Admin Interface.

Usercentrics follows a certain hierarchy to determine which language value should be used to display your CMP. The hierarchy is as follows:

  • Local Storage
    The user’s language preference was transferred from another website that is connected to the current website via Usercentrics' Cross-Domain-Consent-Sharing iFrame.
  • Local Storage
    The user’s language preference was already stored in the local storage of the current website from a previous visit.
  • The lang-attribute on the <html> tag
    For example <html lang=”XX”>.
  • Browser setting
    The visitor’s preferred language as set in their browser.
  • Default Language
    If the user’s preferred browser language isn't added to the Admin Interface the default language will be used.

If a visitor chooses a different language, this selection will be written into the local storage of the website. Any Usercentrics element will be displayed in that language to the user during future visits.

Setting the language using a script attribute

You can force the banner being displayed in a specific language using the language script attribute.
Below is a snippet that shows you how to do this. Please replace "{{language_code}}" with the actual language code* of your desired language:

<script
  type="application/javascript"
  src="https://app.usercentrics.eu/latest/main.js"
  data-language="{{language_code}}"
  id="XXXXXXXX"
></script>

Setting the language using a meta tag

If you have already included an appropriate meta tag on your website, you can also initialize the Usercentrics CMP with it. To do this, insert the following code into your web page and replace "{{language_code}}" with the actual language code* of your desired language:

<meta http-equiv="language" content="{{language_code}}">
<script
  type="application/javascript"
  src="https://app.usercentrics.eu/latest/main.js"
  language="automatic"
  id="XXXXXXXX"
></script>

Updating the language via frontend API

If a user switches to a page in a different language, you can call the following method to update the language: UC_UI.updateLanguage().

For example, if you want to switch to German, you would use UC_UI.updateLanguage("de");.
If you run in race conditions (e.g. the main script is not loaded yet), you can put this wrapper around the function:

window.addEventListener("UC_UI_INITIALIZED", function() {
  UC_UI.updateLanguage("de")
})

*Use the ISO 639-1 language codes: https://en.wikipedia.org/wiki/ISO_639-1.