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.

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.

🌐 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>

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