Widget Preview

This article provides a detailed overview of the Widget Preview feature in the Widget Customization Editor. The Widget Preview is a central area of the editor that displays real-time updates as the widget is configured. It allows for interactive testing and customization, ensuring the widget behaves as expected before publishing. This guide covers the structure, functionality, and key controls of the Widget Preview, with a focus on setting up user-specific previews.

Overview of Widget Preview

The Widget Preview consists of two main parts:

Preview Toolbar: Contains controls for adjusting the widget’s display and preview-specific configurations.
Widget Preview Area: Displays the widget in real-time, allowing for interaction and testing.

The Widget Preview is a fully functional widget connected to a specific user. This means it reflects the actual behavior and appearance of the widget in a live environment. Users can interact with the widget, navigate through tabs and pages, and test various elements to ensure everything works as intended.

Preview Toolbar Controls

The Preview Toolbar provides several controls to customize the preview experience:

1. Size Control

Predefined Sizes: Select from a range of predefined sizes for popular devices or platforms to see how the widget will appear in different environments.
Custom Dimensions: Specify custom width and height to test the widget’s responsiveness and layout.
Scale Adjustment: Increase or decrease the zoom level of the widget preview for a closer or broader view.

2. Preview-Specific Configurations

User ID: Set a specific user ID to preview the widget as it would appear for that user. This is particularly useful for testing personalized content.
Language: Select a supported language to preview the widget in different locales.
Theme: Toggle between light and dark themes (if not locked) to see how the widget adapts to different visual modes.

Setting a User ID for Preview

To set a User ID for the widget preview:

Locate the User ID field in the Preview Toolbar.
Enter the desired user ID into the field.
- If the user does not exist, it will be automatically created.
- Alternatively, start typing the user ID to search for existing users.
For advanced use cases, toggle the 'Manual' link at the top of the field to paste a user token directly.

This feature allows for precise testing of user-specific content and configurations.