# 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="/files/5v8XgXQ3a2Lajez6F8DG" 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="/files/fIF0LLXU856VwbNjGiYi" 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="/files/ENxAYwlLQQRyGAPzXXnj" 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="/files/MBfojcV5F5QWqILfYGW8" 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="/files/JGAl9jpjmQZpm0D1r0Jf" 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="/files/XXLsP1CpZynnGLUo5KqV" 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="/files/XeHnDAdh2IX6bJQVbdLs" 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.didomi.io/widgets/widget-editor/widget-translations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.