> For the complete documentation index, see [llms.txt](https://user.netmera.com/netmera-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md).

# 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](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/configure-widget-settings.md). For the full element catalog, see [Widget elements reference](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/widget-elements-reference.md).

### 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.

<figure><img src="/files/Ip9sKBya0dUh5hHm6vvb" alt="Widget builder left panel"><figcaption><p>Choose elements from the left panel.</p></figcaption></figure>

#### Canvas

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

<figure><img src="/files/AcZDA8UT5ALTrZRzBWTw" alt="Widget builder canvas"><figcaption><p>Arrange elements in the canvas.</p></figcaption></figure>

#### Right panel

Use the right panel to configure the selected element.

<figure><img src="/files/B9PNpL3YzobIBYbKF5qc" alt="Widget builder right panel"><figcaption><p>Adjust settings for the selected element.</p></figcaption></figure>

#### 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.

<figure><img src="/files/REKfj6weJYRfUqv7sP4u" alt="Element more menu"><figcaption><p>Move, duplicate, or open HTML options.</p></figcaption></figure>

### 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](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/widget-elements-reference.md).

<figure><img src="/files/qs2Nc5ETXrtPTelctwVQ" alt="Available widget elements"><figcaption><p>Drag the element you need into the canvas.</p></figcaption></figure>

### 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.

<figure><img src="/files/RZisg9do7sbAr7T9x3hs" alt="Element settings panel"><figcaption><p>Configure the style and position of the selected element.</p></figcaption></figure>

### 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.

<figure><img src="/files/iZoYrqIqHdyfuypz7fnH" alt="Add View control"><figcaption><p>Add views to create a multi-step widget flow.</p></figcaption></figure>

### 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.

{% hint style="info" %}
Set identifiers before configuring actions. This makes the setup easier to manage later.
{% endhint %}

<figure><img src="/files/Mb00qfks5R56z0X606eR" alt="Element identifier example"><figcaption><p>Use identifiers to connect elements with later behavior.</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.