Widget components
Access Type: Widgets - Editor
Utilizing the component library your organization can completely customize the layout of a widget layer by adding and rearranging the components into a specified end-user interface. In this article, we will cover the following:
To start, click Widgets on the left-hand panel and select the Edit icon inline with a widget name.
For every new widget created, Didomi will provide multiple layers pre-populated with components.
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:
Column
Adds a flexible row container that arranges its children elements vertically.
Row
Adds a flexible row container that arranges its children elements horizontally.
Container
Adds a flexible container that supports responsive styling
Heading
Inserts a header that renders the appropriate HTML heading element (h1-h6)
Text
Inserts a block of text
Accept All
Inserts a button that grants consent to all vendors and purposes included in the consent flow
Reject All
Inserts a button that rejects all vendors and purposes included in the consent flow
Save
Inserts a button that saves the end-users choices
Redirect
Inserts a button that redirects to a designated URL
Custom Action
Inserts a button that executes an action defined in your website or mobile application code. The action is identified via the Action Name.
Switch Layer
Inserts a navigational button that enables an end-user to navigate to a specified layer in the widget
Back Button
Inserts a navigational button that enables an end-user to return to the previous layer of the widget
Image
Displays a hosted image
Logo
Displays the brand logo configured for the brand used in the consent flow
Stack List
Displays grouped TCF purposes configured for the Transparency and Consent Framework (TCF). Information populated in the widget preview is example data only. Note: 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)
Purpose List
Displays purposes with expandable descriptions that are included in the consent flow Note: Information populated in the widget preview is example data only.
Vendor List
Displays vendors and their respective information that are included in the consent flow Note: Information populated in the widget preview is example data only.
User Info
A collapsible accordion that displays the following end-user information:
User ID
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.
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.
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.
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.
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.
Component settings
The settings tab of a component enables your organization to customize aspects like the content, icons, button variants, etc... of the component.
The available settings for each component varies and some components do not have any settings that can be configured.
Configure settings for any component by navigating to the widget preview and selecting a component.
With the component highlighted, navigate to the right-hand panel and ensure the Settings tab is selected.
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.
Component style
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.
Use the style tab to override any brand styling when configuring breakpoints/layout shifts. Click here for more information.
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.
Use the provided fields and accordions to adjust the styling of the component. Any changes will impact the selected breakpoint.
Last updated