We’re introducing a new snippet with language autodetection to simplify embedding on your website. This enhanced feature within our Privacy Controls and Cookie Solution automatically detects the user’s language, reducing the need to add separate code snippets for each language. Here’s a complete guide to help you understand and implement this new functionality.
When you enable the multilanguage feature:
<html>
tag of the page.Here’s the basic syntax for the new snippet with language autodetection:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
"en": {
"cookiePolicyId": 12345 // Cookie policy ID for English
},
"it": {
"cookiePolicyId": 23456 // Cookie policy ID for Italian
},
};
_iub.csConfiguration = {
"siteId": 09876, // Your site ID
"cookiePolicyId": 12345, // Cookie policy ID of the main language for fallback
"storage": {
"useSiteId": true,
}
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
csLangConfiguration
object sets the cookie policy IDs for each language.cookiePolicyId
in the csConfiguration
serves as a fallback in case no language is detected.useSiteId
under the storage
object means the user’s consent is valid across different languages of your website.When remote configuration is disabled, the snippet relies entirely on the parameters provided in the _iub.csConfiguration
object. The syntax is similar to the version with remote configuration, but it explicitly specifies all configurations, including banner settings, language options, storage, and consent behaviors within the script.
The new snippet allows you to customize the consent banner for each language using the csLangConfiguration
object. This means you can customize how the banner looks and behaves depending on the user’s language. Let’s explore some common customizations.
Suppose you want the consent banner to have a different color for each language, giving your site a customized and language-specific look. In this example, the banner turns red for users viewing the site in Italian:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
"en": {
"cookiePolicyId": 12345
},
"it": {
"cookiePolicyId": 23456,
"banner": {
"backgroundColor": "#FF0000"
}
},
};
_iub.csConfiguration = {
"siteId": 09876,
"cookiePolicyId": 12345,
"storage": {
"useSiteId": true,
}
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
Some countries, like Denmark, require specific consent options to be visible to users. You can configure these options to appear only when the user’s language matches a particular requirement:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
"da": {
"cookiePolicyId": 7896,
"banner": {
"showPurposesToggles": true
}
},
};
_iub.csConfiguration = {
"siteId": 09876,
"cookiePolicyId": 12345,
"storage": {
"useSiteId": true,
}
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
By default, the new snippet uses site-level storage (useSiteId: true
), meaning that user consent will be recognized across the different languages of your website. This is particularly useful for websites with a global presence, as it avoids the need for users to provide consent each time they switch languages.
However, you can also tweak this behavior within the Configurator under Advance settings:
If you prefer to use the previous method of using individual snippets for each language (as in the legacy setup), you can still do so. This approach might be useful if you want full control over each language’s configuration or if your website structure requires individual snippets. Here’s how you can create individual snippets for each language:
_iub.csConfiguration
object."lang"
parameter for each snippet.cookiePolicyId
in each _iub.csConfiguration
object.iubenda_cs.js
file for each snippet.Here’s how to structure the snippets for both English (en
) and Italian (it
):
English:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 12345, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "en",
"storage": {
"useSiteId": true,
}
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
Italian:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 23456, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "it",
"storage": {
"useSiteId": true,
}
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
In Google Tag Manager (GTM), we’ve added a new section for configuring language-specific settings. This optional feature allows you to manage different configurations directly through GTM. For more details, refer to the guide on How to Set Up iubenda’s GTM Template for Multilingual Sites