Iubenda logo
Start generating

Documentation

Table of Contents

How to Use the New Multilanguage Snippet with Language Autodetection

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

When you enable the multilanguage feature:

  1. Unified Snippet: Now, you only need to embed a single snippet instead of copying and pasting one for each language.
  2. Automatic Language Detection: The snippet will automatically detect and apply the language based on:
    • The language set in the <html> tag of the page.
    • The browser’s language setting if no language is specified on the page.
    • Falls back to English if none of the above options work.

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 the csConfiguration serves as a fallback in case no language is detected.
  • Storage: Using useSiteId under the storage object means the user’s consent is valid across different languages of your website.

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:

consent storage options CS conf

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:

  1. Create a separate snippet for each active language using only the _iub.csConfiguration object.
  2. Add the language in the "lang" parameter for each snippet.
  3. Include the language-specific cookiePolicyId in each _iub.csConfiguration object.
  4. 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

GTM lang parameters