# Widget translations

{% hint style="success" %}
**Access Type**: Widgets - Editor
{% endhint %}

The widget can be surfaced to end-users in a variety of supported languages. In this article, we will cover the following: 

* [Widget translation behavior](#widget-translation-behavior)
* [Configure default and enabled languages](#configure-default-and-enabled-languages)
* [Add component translations](#add-component-translations)

To start, click **Widgets** on the left-hand panel and select the **Edit** icon inline with a widget name.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FVl9fnpSzpTNYbK0LRSRW%2FScreenshot%202026-02-18%20at%2010.08.07%E2%80%AFAM.png?alt=media&#x26;token=29ebf0d6-3354-46e7-a1d8-057d9db45da0" alt="" width="563"><figcaption></figcaption></figure>

***

### Widget translation behavior

Once a consent flow is published and implemented on your website and/or application, the widget will be displayed in one of the following ways:

<table><thead><tr><th width="273">Support</th><th>Description</th></tr></thead><tbody><tr><td>End-user browser/device language supported</td><td>Widget components will be automatically translated for the end-user.<br><br><mark style="background-color:$warning;"><strong>Note</strong>: Any components that do not have translations will be rendered in the specified default language.</mark></td></tr><tr><td>End-user browser/device language not supported</td><td>All widget components will be rendered in the default language.</td></tr></tbody></table>

{% hint style="info" %}
Didomi sets the default language for widgets to English unless edited otherwise.
{% endhint %}

### Configure default and enabled languages

From the widget editor page, navigate to the widget layers section and click the **Languages** button.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FYhh7apNyBXS0U0WCapoS%2FScreenshot%202026-02-20%20at%2010.46.28%E2%80%AFAM.png?alt=media&#x26;token=96eb94b1-119f-4794-a937-727b17fa86ba" alt="" width="563"><figcaption></figcaption></figure>

In the subsequent modal, navigate to the **Enabled languages** field and use the drop-down menu to select all the languages the widget will support (this should include the language your organization plans to set as the default language).

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FjRvvaBFoPtsKGGd17pCe%2FScreenshot%202026-02-20%20at%2010.50.24%E2%80%AFAM.png?alt=media&#x26;token=7347616d-094b-46be-a90f-a828b8252ba3" alt="" width="335"><figcaption></figcaption></figure>

Next, navigate to the **Default language** field and use the drop-down menu to select which of the enabled languages will be used as the default language (*i.e. the language used for widget components if the end-user's browser/device language is not supported or if a translation for the component has not been configured*).

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FM1GIwHjqbrkeIymNyL0G%2FScreenshot%202026-02-20%20at%2010.53.59%E2%80%AFAM.png?alt=media&#x26;token=a7f13237-4d24-440f-aca5-ed09b5c02013" alt="" width="321"><figcaption></figcaption></figure>

Click **Save** when finished.

### Add component translations

Once a widget's default and enabled languages have been configured, your organization can proceed with adding the necessary translations to each component that requires a translation.

Navigate to the widget preview toolbar and use the language preview drop-down menu to select a language.&#x20;

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FOYaoSSLWrISJcZ3LaM1S%2FScreenshot%202026-02-20%20at%2011.15.04%E2%80%AFAM.png?alt=media&#x26;token=4fd930a2-fe96-4799-a811-4c739429ece3" alt="" width="563"><figcaption></figcaption></figure>

Click a component in the widget preview window and ensure the **Settings** tab is selected in the right-hand panel.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F4of7NtuIzPfn8yXpnH6a%2FScreenshot%202026-02-20%20at%2012.01.46%E2%80%AFPM.png?alt=media&#x26;token=f89478f8-aab8-476d-9d13-3e8be94b502e" alt="" width="563"><figcaption></figcaption></figure>

Expand the **Content** accordion and use the provided field to input the translation of the content in the specified language.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FTO6XPmRRSDVKudR8GgzB%2FScreenshot%202026-02-20%20at%201.00.38%E2%80%AFPM.png?alt=media&#x26;token=71808b2d-ddc5-42ad-bde8-d1c7ebe0062d" alt="" width="563"><figcaption></figcaption></figure>

The component will be translated in the widget preview window.

{% hint style="info" %}
In the widget preview window, untranslated components will be rendered in the default language&#x20;
{% endhint %}

Repeat as necessary for every component across all layers in the widget