Design widget layout

Use this page to build the layout, views, and visual structure of a widget.

Start with the widget’s visual structure. Then add interactions and validation.

For widget type, placement, and container settings, see Configure widget settings. For the full element catalog, see Widget elements reference.

Build workflow

1. Set the view style and add the required elements.

2. Arrange and style each element in the canvas.

3. Add views for multi-step flows.

4. Set identifiers before configuring actions.

Understand the editor

The builder has four main areas:

Left panel

Use the left panel to find available elements. Choose content, form, action, or feedback elements based on the widget’s goal.

Choose elements from the left panel.

Canvas

Use the canvas to place elements and preview the widget layout.

Arrange elements in the canvas.

Right panel

Use the right panel to configure the selected element.

Adjust settings for the selected element.

More menu

Use the three-dot menu to move or duplicate an element. Open HTML only when the visual editor cannot create the required layout.

Move, duplicate, or open HTML options.

Add and manage elements

Drag elements from the left panel to the canvas.

Start with the essentials. Add supporting elements only when they help users complete the goal.

Common element groups:

• content: text, image, GIF, video

• form: input, text area, checkbox, radio button, select box

• action: button, copy button, countdown

• feedback: rating, emoji feedback, slider feedback

For the full list and usage guidance, see Widget elements reference.

Drag the element you need into the canvas.

Edit a selected element

Select an element to open its available settings in the right panel.

Common controls include:

• Spacing: controls the space inside and around the element.

• Border: sets the border’s color, width, and style.

• Corners: adjusts the element’s corner radius.

• Text: changes the content, font, size, color, and alignment.

• Shadow: adds depth behind the element.

• Display: controls when and how the element appears.

• Position: sets the element’s placement in the layout.

• Effects: adds visual effects such as animations or transitions.

Style the layout before fine-tuning effects. This keeps the design readable and consistent.

Configure the style and position of the selected element.

Work with multiple views

Use Add View to build multi-step widgets. Each view acts as a separate screen within the same widget.

Examples:

• form, then success screen

• rating, then feedback form

• offer, then coupon reveal

Keep each view focused on one step. Give users one clear action before moving forward.

Add views to create a multi-step widget flow.

Identifiers

Each element has an identifier code. Use it to reference that element in actions, conditions, and reporting.

Identifiers are important for tracking, click actions, action conditions and event analysis.

Use short, descriptive names instead of random defaults.

Set identifiers before configuring actions. This makes the setup easier to manage later.

Use identifiers to connect elements with later behavior.