Customize Components

Use this page to build the layout and visual structure of your web widget.

This page covers the builder basics. For the full element catalog, see Widget Elements Reference. For button and image behavior, see Assign Click Actions.

Quick workflow

1

Set the base style

Start with the widget view settings.

Set:

• width

• border radius

• background color

• border width

• border color

2

Add the elements you need

Drag elements into the canvas from the left panel.

Keep the structure simple at first. Add only what the widget really needs.

3

Customize the selected element

Use the right panel to adjust styling and settings.

Typical changes include text, spacing, colors, borders, and positioning.

4

Add views for multi-step flows

Use Add View when the widget needs more than one screen.

This is useful for flows like form → thank you, or rating → feedback.

5

Add identifiers and actions

Give key elements clear identifiers before you configure actions.

Then assign actions to buttons or images if needed.

Understand the editor

The builder has four main areas:

• Left panel: available elements

• Canvas: the widget preview and layout area

• Right panel: styling and settings for the selected element

• More menu: move, duplicate, or open advanced HTML settings

Widget builder

View settings

Before adding content, define the main style of the widget.

Use View Settings to control:

• width

• border radius

• background color

• border width

• border color

These settings affect the overall container, not just a single element.

View Settings

Use the right width

In web widgets, the same view settings are applied across mobile, tablet, and desktop previews. Incorrect width values can distort the layout on smaller screens.

For a stable layout, set the widget width to 250 px.

Widget Background Image

The Widget/HTML Builder supports adding text directly to uploaded images.

Upload an image as an asset, place text on top of it, and customize basic styling options such as position, color, font size, and alignment.

Add text directly to uploaded images

Add and manage elements

You can add elements in two ways:

• drag and drop from the left panel

• use the + button and place the element to the left or right

Start with the essentials. Then refine the design.

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 best use cases, see Widget Elements Reference.

Edit a selected element

When you select an element, the right panel shows its available settings.

Common controls include:

• spacing

• border

• corners

• text

• shadow

• display

• position

• effects

Element settings

Use the more menu

Click the three-dot menu on an element when you need quick layout actions.

Available actions:

• Move Up

• Move Down

• Duplicate

• HTML

Use HTML only when the visual editor is not enough for the layout you want.

More menu

HTML settings

Work with multiple views

Use Add View to build multi-step widgets.

Examples:

• form → success screen

• rating → feedback form

• offer → coupon reveal

Keep each view focused on one step.

Add View

Identifiers

Each element has an identifier code.

Identifiers are important for:

• tracking

• click actions

• action conditions

• analysis

Use short and clear names instead of random defaults.

Good examples:

• submit_button

• email_input

• rating_score

• hero_image

Set identifiers before you configure actions. This makes the setup much easier to manage later.

Actions and validations

This page focuses on layout and structure.

Use separate setup pages for behavior:

• Assign Click Actions for button and image actions

• Widget Elements Reference for element-specific guidance

In practice:

• use this page to build the widget

• use identifiers to prepare logic

• add actions after the structure is ready

Best practices

Keep widgets readable

• Start with one goal per widget.

• Use fewer elements when possible.

• Keep text short.

• Use consistent spacing.

• Preview on both mobile and desktop.

• Create extra views only when the flow needs them.

What to do next

After you finish the layout:

1. review identifiers

2. assign click actions to buttons or images

3. preview each view

4. save the widget