# Customize Components

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

This page covers the editor basics. For the full element catalog, see [Widget Elements Reference](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/mobile-in-app/create/widget-elements-reference). For button and image behavior, see [Assign Click Actions](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/mobile-in-app/create/assign-click-actions).

### Quick workflow

{% stepper %}
{% step %}

#### Set the base style

Start with the widget view settings.

Set:

* width
* border radius
* background color
* border width
* border color
  {% endstep %}

{% step %}

#### Add the elements you need

Drag elements into the canvas from the left panel.

Keep the structure simple at first. Add only the parts needed for your goal.
{% endstep %}

{% step %}

#### Customize the selected element

Use the right panel to adjust styling and settings.

Typical changes include text, spacing, colors, borders, and positioning.
{% endstep %}

{% step %}

#### 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.
{% endstep %}

{% step %}

#### Add identifiers and actions

Give key elements clear identifiers before you configure actions.

Then assign actions to buttons or images if needed.
{% endstep %}
{% endstepper %}

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

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FCgqPrSwBijwFTQsr1OhH%2FScreenshot%202023-05-18%20at%2017.18.38.png?alt=media&#x26;token=023229cd-efec-47cb-8cfa-ab93290360b0" alt="" width="563"><figcaption><p>Widget builder</p></figcaption></figure>

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

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FZMaociMIsSFqXnA6dvIg%2FScreenshot%202023-05-18%20at%2017.25.27.png?alt=media&#x26;token=a2cee5e5-a6e5-4f0d-960c-3ebbcfe98856" alt="" width="563"><figcaption><p>View Settings</p></figcaption></figure>

### 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](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/mobile-in-app/create/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

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FHGqox2lj3UzbNZhAa7Hx%2FScreenshot%202023-05-18%20at%2017.30.56.png?alt=media&#x26;token=f556bbe1-cb25-42e6-a51d-c91cdf32d62e" alt="" width="563"><figcaption><p>Element settings</p></figcaption></figure>

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

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FyNNBaEZ6b51NZGgV4B1i%2Fimage.png?alt=media&#x26;token=8fbaf87e-2b4f-4f8c-ace8-8a329a88c8c6" alt="" width="563"><figcaption><p>More menu</p></figcaption></figure>

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

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FuqrwLVIOB392e8VfiqI4%2FScreenshot%202023-05-18%20at%2017.26.51.png?alt=media&#x26;token=715f547c-443d-404d-b5a1-e360529e3a36" alt="" width="563"><figcaption><p>Add View</p></figcaption></figure>

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

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

### Actions and validations

This page focuses on layout and structure.

Use separate setup pages for behavior:

* [Assign Click Actions](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/mobile-in-app/create/assign-click-actions) for button and image actions
* [Widget Elements Reference](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/mobile-in-app/create/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

{% hint style="success" %}

#### Keep widgets readable

* Start with one goal per widget.
* Use fewer elements when possible.
* Keep text short.
* Use consistent spacing.
* Preview on mobile and desktop.
* Create extra views only when the flow needs them.
  {% endhint %}

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