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.
💡 Key Changes in the New Snippet
Unified Snippet: Now, you only need to embed one snippet instead of creating a separate one for every language.
Automatic Language Detection: The snippet automatically chooses the right language based on:
- The language set in the <html> tag of the page
- The user’s browser language, if the page doesn’t set a language
If none match the configured languages, it uses the first language listed in your _iub.csLangConfiguration object
Embedding the New Snippet
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>
How It Works
- Language-Specific Configuration: The
csLangConfiguration
object sets the cookie policy IDs for each language. - Fallback Mechanism: The
cookiePolicyId
in thecsConfiguration
serves as a fallback in case no language is detected. - Storage: Using
useSiteId
under thestorage
object means the user’s consent is valid across different languages of your website.
🌐 Understanding the Fallback Language Mechanism
If the iubenda snippet can’t find a match between the user’s language and the ones you’ve defined in your _iub.csLangConfiguration object (for example, if the user’s browser is set to Chinese but you haven’t configured Chinese), it will automatically fall back to a default language configured in your _iub.csLangConfiguration object.
👉 Here’s how the fallback works:
The system will use the first language listed in your _iub.csLangConfiguration object. So if you want a specific language, like English (en-GB), to be shown whenever there’s no match, just make sure English (en-GB) is the first entry.
Example:
If you want English (en-GB) to show by default:
_iub.csLangConfiguration = {
"en-GB": {
"cookiePolicyId":00000001 // Cookie policy ID for English UK
},
"fr": {
"cookiePolicyId":00000002 // Cookie policy ID for French
},
"it": {
"cookiePolicyId":00000003 // Cookie policy ID for Italian
}
// ... other languages
};
That way, you decide what users see when their language isn’t available.
Using the Snippet Without Remote Configuration
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.
Tweaks and Customization
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.
Example 1: Changing the Banner Appearance by Language
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>
Example 2: Language-Specific Consent Toggles
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>
Note
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:

How to Recreate the Snippet per Language (Legacy Method)
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:
- Create a separate snippet for each active language using only the
_iub.csConfiguration
object. - Add the language in the
"lang"
parameter for each snippet. - Include the language-specific
cookiePolicyId
in each_iub.csConfiguration
object. - Retain the script linking to the
iubenda_cs.js
file for each snippet.
Example Snippets for Different Languages
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>
Using the GTM Template
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
