# Widget components

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

Utilizing the component library your organization can completely customize the layout of a [widget layer](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/widgets/widget-editor/manage-widget-layers) by adding and rearranging the components into a specified end-user interface. In this article, we will cover the following:

* [Component glossary](#component-glossary)
* [Add widget component](#add-widget-component)
* [Remove widget component](#remove-widget-component)
* [Move widget component](#move-widget-component)
* [Component settings](#component-settings)
* [Component style ](#component-style)

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>

{% hint style="info" %}
For every new widget created, Didomi will provide multiple layers pre-populated with components.&#x20;
{% endhint %}

***

### Component glossary

The left-hand panel on the subsequent page is the component library and the following components can be added and configured to a widget layer:

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2Fm9uGdHTO7aEM0RXMVhYR%2FScreenshot%202026-02-19%20at%203.58.15%E2%80%AFPM.png?alt=media&#x26;token=9c2b795e-892a-442f-a938-d78b278d7405" alt="" width="563"><figcaption></figcaption></figure>

<table><thead><tr><th width="196">Component</th><th>Description</th></tr></thead><tbody><tr><td>Column</td><td>Adds a flexible row container that arranges its children elements vertically.</td></tr><tr><td>Row</td><td>Adds a flexible row container that arranges its children elements horizontally.</td></tr><tr><td>Container</td><td>Adds a flexible container that supports responsive styling</td></tr><tr><td>Heading</td><td>Inserts a header that renders the appropriate HTML heading element (h1-h6) </td></tr><tr><td>Text</td><td>Inserts a block of text</td></tr><tr><td>Accept All</td><td>Inserts a button that grants consent to all vendors and purposes included in the consent flow</td></tr><tr><td>Reject All</td><td>Inserts a button that rejects all vendors and purposes included in the consent flow</td></tr><tr><td>Save</td><td>Inserts a button that saves the end-users choices</td></tr><tr><td>Redirect</td><td>Inserts a button that redirects to a designated URL</td></tr><tr><td>Custom Action</td><td>Inserts a button that executes an action defined in your website or mobile application code. The action is identified via the <strong>Action Name</strong>.</td></tr><tr><td>Switch Layer</td><td>Inserts a navigational button that enables an end-user to navigate to a specified layer in the widget</td></tr><tr><td>Back Button</td><td>Inserts a navigational button that enables an end-user to return to the previous layer of the widget</td></tr><tr><td>Image</td><td>Displays a hosted image </td></tr><tr><td>Logo</td><td>Displays the brand logo configured for the brand used in the consent flow</td></tr><tr><td>Stack List</td><td>Displays grouped TCF purposes configured for the Transparency and Consent Framework (TCF). Information populated in the widget preview is example data only.<br><br><mark style="background-color:$warning;"><strong>Note</strong>: This component is only applicable in consent flows that utilize the Transparency and Consent Framework (TCF) when supporting GDPR. It will be empty if applied to other regulations or frameworks (e.g. CPRA)</mark></td></tr><tr><td>Purpose List</td><td>Displays purposes with expandable descriptions that are included in the consent flow<br><br><mark style="background-color:$warning;"><strong>Note</strong>: Information populated in the widget preview is example data only.</mark></td></tr><tr><td>Vendor List</td><td>Displays vendors and their respective information that are included in the consent flow<br><br><mark style="background-color:$warning;"><strong>Note</strong>: Information populated in the widget preview is example data only.</mark></td></tr><tr><td>User Info</td><td><p>A collapsible accordion that displays the following end-user information:</p><ul><li>User ID</li><li><a href="../../get-started/general/didomi-consent-string-dcs-and-signature">Didomi consent string</a></li></ul></td></tr></tbody></table>

### Add widget component

To add a component to a widget, navigate to the component library and locate the component you wish to add. Drag and drop the component into its desired location within the widget preview window.

{% hint style="info" %}
Guide lines in the widget preview window will assist you in understanding the exact placement of the component in the component hierarchy and in relation to other components.&#x20;
{% endhint %}

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F8pSlkIVKLEhJUUssspbl%2FwidgetAdd.gif?alt=media&#x26;token=cd57108e-75a0-4f44-8237-03cb45fd76fe" alt="" width="563"><figcaption></figcaption></figure>

### Remove widget component

To remove a component from a widget, navigate to the widget preview and select the component. With the component highlighted, click the **Delete** icon in the upper right-hand corner of the component.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FaBlA36HYbywkaMMKZYkJ%2FScreenshot%202026-02-20%20at%207.09.24%E2%80%AFAM.png?alt=media&#x26;token=b4d9f945-954d-48ec-9bea-e0d401c2e97b" alt="" width="563"><figcaption></figcaption></figure>

### Move widget component

To move a component to a different position in the widget, navigate to the widget preview and select the component. With the component highlighted, click and hold the **Drag to move** icon.

Drag and drop the component to its new position within the widget preview window.&#x20;

{% hint style="info" %}
Guide lines in the widget preview window will assist you in understanding the exact placement of the component in the component hierarchy and in relation to other components.&#x20;
{% endhint %}

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FdilGgjFwUHvl5XwpnjS0%2FwidgetMove.gif?alt=media&#x26;token=10cc8135-a0c5-44b7-b930-ec0d3e1050ae" alt="" width="563"><figcaption></figcaption></figure>

### Component settings

The settings tab of a component enables your organization to customize aspects like the content, icons, button variants, etc... of the component.&#x20;

{% hint style="info" %}
The available settings for each component varies and some components do not have any settings that can be configured.
{% endhint %}

Configure settings for any component by navigating to the widget preview and selecting a component.&#x20;

With the component highlighted, navigate to the right-hand panel and ensure the **Settings** tab is selected.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FnOTUk7qdxBCUY1Q6Uqkd%2FScreenshot%202026-02-20%20at%208.53.57%E2%80%AFAM.png?alt=media&#x26;token=d0c3a1e8-8817-4a4d-8f1f-e9c726f5e484" alt="" width="563"><figcaption></figcaption></figure>

Expand any accordion in the settings menu and use the provided options to configure the details for that specific setting. The widget preview window will automatically reflect changes made to the setting.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FHWGnbA6jsLqShSG19NPB%2FScreenshot%202026-02-20%20at%208.59.36%E2%80%AFAM.png?alt=media&#x26;token=9119962d-ff3c-470d-bc56-bc5379a64f68" alt="" width="563"><figcaption></figcaption></figure>

### Component style&#x20;

The style tab of a component allows your organization to override any style/design elements configured for the brand. When a brand and widget are utilized within a consent flow, the style configured for the widget will take precedence and the brand style will be the default if no override styling is available.

{% hint style="info" %}
Use the style tab to override any brand styling when configuring breakpoints/layout shifts. [Click here](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/widgets/widget-editor/configure-widget-breakpoints) for more information.
{% endhint %}

Configure styling for any component by navigating to the widget preview and selecting a component. With the component highlighted, navigate to the right-hand panel and click the **Style** tab.&#x20;

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F3yfekG2CBRUfA65rQYpC%2FScreenshot%202026-02-24%20at%2010.18.05%E2%80%AFAM.png?alt=media&#x26;token=d2ddf797-ee48-4168-847f-75e6cd14a2e1" alt="" width="563"><figcaption></figcaption></figure>

Use the provided fields and accordions to adjust the styling of the component. Any changes will impact the selected breakpoint.

<figure><img src="https://1825037175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FdzFdAJrMazh5YRh2kP3Q%2FScreenshot%202026-02-24%20at%2010.18.51%E2%80%AFAM.png?alt=media&#x26;token=d1f5c52a-e953-480c-9361-dc09fba488dc" alt="" width="563"><figcaption></figcaption></figure>