Widget preview
Access Type: Widgets - Editor
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.
To start, click Widgets on the left-hand panel and select the Edit icon inline with a widget name.
The widget preview toolbar and preview window are the central panels on the subsequent page.
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.
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.
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.
Click here for information on how to configure breakpoints/layout shifts for different device sizes.
Language preview
The language preview option enables your organization to toggle the layer between different enabled languages for the widget.
To change the brand language in the window, use the provided drop-down menu to select any previously enabled languages.
The language preview is also the method used to provide translation of text components for any enabled languages. Click here to learn more about widget translations.
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.
Access the settings for the widget preview by clicking the ⚙️icon in the widget preview toolbar.
The following settings can be applied to the widget preview window. Toggle each setting to enable or deactivate it in the preview window.
Highlight all components
Displays a visual outline around all components in the preview window to help identify their boundaries.
Show preview indicators
Displays the layer and breakpoint indicators in the preview window corners.
Show component hierarchy
Displays a breadcrumb bar showing the selected component's hierarchy path. Click ancestors to navigate up.
Interactive mode
When enabled, clicking on components interacts with them (expand, buttons, etc.) instead of selecting them for editing.
Custom font URL
Since the widget inherits fonts from the page on which it is embedded, use the provided field to load and preview a specific font.
Last updated