# Widget preview

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

The widget preview toolbar controls the presentation of the widget preview window and enables your organization to preview how your widget configurations will look across different brands, devices, etc... In this article, we will cover the different elements of the widget preview toolbar.

* [Brand preview](#brand-preview)
* [Device preview](#device-preview)
* [Language preview](#language-preview)
* [Settings](#settings)

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>

The widget preview toolbar and preview window are the central panels on the subsequent page.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2Fc9lfLRU2jXmrNEcBvovH%2FScreenshot%202026-02-23%20at%2010.22.36%E2%80%AFAM.png?alt=media&#x26;token=a8345c9b-528e-4785-9dcc-a97c3a71b8ab" alt="" width="563"><figcaption></figcaption></figure>

***

### Brand preview

The brand preview option enables your organization to preview how the layer will look in conjunction with a particular brand when applied together in a consent flow. To change the brand preview in the window, use the provided drop-down menu to select any previously configured brand.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FLJPezSwuqj8KHqnts1k1%2FScreenshot%202026-02-23%20at%2010.47.50%E2%80%AFAM.png?alt=media&#x26;token=c9993507-3c90-46d3-89ce-338eac46582d" alt="" width="563"><figcaption></figcaption></figure>

The preview window will automatically adjust to show the current layer with the specified brand.

### Device preview

The device preview option enables your organization to view how the layer will look across different device sizes.&#x20;

To change the device preview in the window, use the provided icons to select between the different screen sizes. The size for each screen is defaulted to the breakpoints configured for the brand that you are currently previewing.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FDiBhIl1iWihFQ7uTeYtb%2FScreenshot%202026-02-24%20at%209.59.22%E2%80%AFAM.png?alt=media&#x26;token=c558e161-a69e-458d-b12b-6d55ba0d5454" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
[Click here](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/widgets/widget-editor/configure-widget-breakpoints) for information on how to configure breakpoints/layout shifts for different device sizes.
{% endhint %}

### Language preview

The language preview option enables your organization to toggle the layer between different enabled languages for the widget.&#x20;

To change the brand language in the window, use the provided drop-down menu to select any previously enabled languages.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FtskzqaU96WJwtWusM7Oq%2FScreenshot%202026-02-23%20at%2011.32.07%E2%80%AFAM.png?alt=media&#x26;token=99aa6346-9f94-40fd-bc08-6488ddb206d3" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
The language preview is also the method used to provide translation of text components for any enabled languages. [Click here](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/widgets/widget-editor/widget-translations) to learn more about widget translations.
{% endhint %}

### Settings

The settings tab of the widget preview toolbar enables your organization to apply guidelines and other tooling that can help you in the configuration process of a widget layer.&#x20;

Access the settings for the widget preview by clicking the :gear:icon in the widget preview toolbar.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FmiqS5vRMx8oQiOe7XgRb%2FScreenshot%202026-02-23%20at%2012.05.27%E2%80%AFPM.png?alt=media&#x26;token=c8fb41cd-e546-4bdf-a275-6766ef30ca76" alt="" width="563"><figcaption></figcaption></figure>

The following settings can be applied to the widget preview window. Toggle each setting to enable or deactivate it in the preview window.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Highlight all components</td><td>Displays a visual outline around all components in the preview window to help identify their boundaries.</td></tr><tr><td>Show preview indicators</td><td>Displays the layer and breakpoint indicators in the preview window corners.</td></tr><tr><td>Show component hierarchy</td><td>Displays a breadcrumb bar showing the selected component's hierarchy path. Click ancestors to navigate up.</td></tr><tr><td>Interactive mode</td><td>When enabled, clicking on components interacts with them (expand, buttons, etc.) instead of selecting them for editing.</td></tr><tr><td>Custom font URL</td><td>Since the widget inherits fonts from the page on which it is embedded, use the provided field to load and preview a specific font.</td></tr></tbody></table>