> 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/configure-widget-settings.md).

# Configure widget settings

Configure settings that apply to the widget container and its presentation.

Set these options before building the layout. Use [Design widget layout](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md) to create views and add elements.

### Open widget settings

Click **Settings** in the top-right corner to configure:

* **Identity**: name and description for internal use.
* **Presentation**: type, screen placement, and mobile overlay.
* **Dismissal**: outside-click behavior and close button position.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FzcqGxDP8hqmffWD3gWgN%2FEkran%20Resmi%202026-08-13%2011.18.49.png?alt=media&amp;token=0ca1fa60-5637-40a4-9f42-a26645f3dc43" alt="Settings button in the widget builder"><figcaption><p>Open Settings to configure the widget container.</p></figcaption></figure>

### Name and description

Give the widget a clear, memorable name. For example: **Summer Sale Pop-up**.

Add a short description of its purpose. For example: “Promotes seasonal discounts with an interactive pop-up.”

These fields help teammates find the right widget during campaign setup.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FhsjjLd0G4UGWBGAaMdPe%2FEkran%20Resmi%202026-08-13%2011.13.01.png?alt=media&amp;token=c73376b9-965a-4769-a61e-a82553ce7965" alt="Widget name and description fields"><figcaption><p>Name and describe the widget for your team.</p></figcaption></figure>

### Widget type and placement

Choose the format that matches the message and available screen space.

#### Pop-up

A focused overlay for promotions, offers, or subscriptions.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2Fkb3eIWxYD5aJuUAj4zSc%2FEkran%20Resmi%202026-08-13%2011.20.04.png?alt=media&amp;token=fdff0cc5-7898-4776-9ede-935670061594" alt="Pop-up widget type"><figcaption><p>Use a Pop-up for focused messages.</p></figcaption></figure>

#### Floating Bar

A slim top or bottom bar for persistent announcements.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FF9w5jUe3VPyzx5qir4zX%2FEkran%20Resmi%202026-08-13%2011.20.28.png?alt=media&amp;token=a6fbe3d0-f086-40ed-9cc1-f8b32aa4d952" alt="Floating Bar widget type"><figcaption><p>Use a Floating Bar for persistent announcements.</p></figcaption></figure>

#### Full-Screen

An immersive experience that fills the screen.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FzqUlZCE6rDpNsUYprSZc%2FEkran%20Resmi%202026-08-13%2011.22.10.png?alt=media&amp;token=14c19379-a93f-4516-b19a-0a89c213b3b6" alt="Full-Screen widget type"><figcaption><p>Use Full-Screen for an immersive experience.</p></figcaption></figure>

#### Carousel

Adds navigation buttons for switching between widget views.

Choose the arrow background color, arrow color, and a **Slide** or **Fade** transition.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F1zdRiklfh1WHV77xZYcO%2FEkran%20Resmi%202026-08-13%2011.23.44.png?alt=media&amp;token=74549f12-b797-4163-93e0-618290620f6f" alt="Carousel widget settings"><figcaption><p>Configure carousel navigation and transitions.</p></figcaption></figure>

{% hint style="info" %}
Full-Screen mobile widgets require Android SDK `4.12.1` or Swift SDK `4.14.1`.
{% endhint %}

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FxyGyO4sHsBzaqi4AftA0%2FEkran%20Resmi%202026-08-13%2011.15.00.png?alt=media&amp;token=2f1ce2f4-8c36-41b5-92cf-a4e9cec84cd9" alt="Full-Screen widget preview"><figcaption><p>A Full-Screen widget fills the available screen.</p></figcaption></figure>

#### Set the placement

Set the widget position to **Top**, **Center**, or **Bottom**. Preview the result on desktop and mobile. Ensure the widget does not cover essential content.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F1Uzp3Z3kcpPuhYq8SkXq%2FEkran%20Resmi%202026-08-13%2011.15.46.png?alt=media&amp;token=fb55fa85-5a35-434e-be86-6ca7f5dd2f5d" alt="Widget placement options"><figcaption><p>Choose where the widget appears on the screen.</p></figcaption></figure>

### Mobile overlay and background

#### Configure the overlay

Use **Background Overlay** to dim or color the area behind a mobile pop-up. It is enabled by default and covers the full screen, including the status bar.

Select an overlay color with the color picker. HEX and RGBA values are supported. Adjust opacity in the picker or with the opacity slider.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FuelfeQ99b6Aj4ZMwDsPX%2FEkran%20Resmi%202026-08-13%2011.17.23.png?alt=media&amp;token=9e9c8b76-8a82-4d8a-9730-020c9408f4b4" alt="Background Overlay setting"><figcaption><p>Background Overlay dims the area behind a mobile pop-up.</p></figcaption></figure>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FD7AgWJRGAgxkOKheXQN0%2FEkran%20Resmi%202026-08-13%2011.17.55.png?alt=media&amp;token=8855606e-1e06-4b7a-8e98-26e7117f88af" alt="Overlay color picker"><figcaption><p>Set the overlay color and opacity.</p></figcaption></figure>

#### Use a clear background

Use **Clear Background** when app content should remain visible behind the pop-up. This disables **Background Overlay** and **Overlay Color** automatically.

{% hint style="info" %}
Mobile overlay settings require Android SDK `4.13.1` or Swift SDK `4.14.2`.
{% endhint %}

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FiDFSf838ZMRATzM1xFFp%2FEkran%20Resmi%202026-08-13%2011.18.10.png?alt=media&amp;token=ff3799c0-a544-4880-99ba-932578f73a01" alt="Clear Background setting"><figcaption><p>Clear Background keeps the app content visible behind the pop-up.</p></figcaption></figure>

### Dismissal and close button

#### Enable outside-click dismissal

Enable outside-click dismissal when users should close the widget by tapping or clicking outside it. This option works on web and mobile.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FY43f5LtZ4f0Bc6XSokLQ%2FEkran%20Resmi%202026-08-13%2011.27.15.png?alt=media&amp;token=92b47721-9d5b-40d5-8f8d-930e383cc141" alt="Outside-click dismissal setting"><figcaption><p>Enable outside-click dismissal for web and mobile widgets.</p></figcaption></figure>

#### Position the close button

Choose a close button location:

* **Widget Top-Right Corner**: the default position.
* **Above the Right Corner of Widget**: places the button outside the container.
* **Custom Button Position**: sets its exact location.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FpnRmhxvcx9ZXAKfa3qpa%2FEkran%20Resmi%202026-08-13%2011.28.54.png?alt=media&amp;token=eb536caa-fc8c-47f6-b560-2b044e07edb6" alt="Close button position options"><figcaption><p>Choose a preset location or a custom position.</p></figcaption></figure>

For a custom position, drag the close button into place. Click outside the widget to confirm.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FduVs3DF1wjX8VwtYmgWq%2FEkran%20Resmi%202026-08-13%2011.28.09.png?alt=media&amp;token=57f26cdf-9c3b-4906-ab81-ef748dd3d289" alt="Custom close button position"><figcaption><p>Drag the close button to the required location.</p></figcaption></figure>

### View settings

Select a view, then open **View Settings** to style its overall container.

Available controls include:

* **Minimum height**: the view’s minimum vertical space.
* **Background**: the outer area behind the container.
* **Container Background**: the container’s fill color.
* **Background Image**: an image behind the view content.
* **Corner Radius**: the roundness of the container corners.
* **Border width**: the thickness of the container border.

Use these settings before adjusting individual elements. For full layout guidance, see [Design widget layout](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md).

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FSKOeexCuGIi2YffnzjCr%2FEkran%20Resmi%202026-08-13%2011.25.29.png?alt=media&amp;token=4f1d02bc-6531-4de9-bd22-92e1aca144c5" alt="View Settings panel"><figcaption><p>View Settings control the overall container.</p></figcaption></figure>

### Background image

Use a background image to add visual context to a view:

1. Click **Background Image**.
2. Choose **None**, **Image URL**, or **Upload**.
3. Add the image to the layout.
4. Set the view’s minimum height to fit the image properly.

For example, add a campaign background image that matches your brand.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2Fn8u6b7zUElXFpQPe9mpQ%2FEkran%20Resmi%202026-08-13%2011.39.18.png?alt=media&amp;token=aa6a3fc4-f142-4c9e-b7f0-1dcd781ad0c5" alt="Background Image settings"><figcaption><p>Choose an image source for the view background.</p></figcaption></figure>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FGiKMpxFmANKUeRc1Lbnb%2FEkran%20Resmi%202026-08-13%2011.40.36.png?alt=media&amp;token=32086ab4-3612-4baa-b4d5-b9d60dd08ba3" alt="Widget with a background image" width="563"><figcaption><p>Preview the background image within the widget layout.</p></figcaption></figure>

### Transparent container

Use a transparent container when the widget should blend into the host page or app.

By default, containers can have a background, border, or shadow. To remove that frame:

1. Enable **Clear Background**.
2. Set **Background Color** to **Clear**.
3. Add components to the layout.
4. Enter image URLs in the HTML builder, when needed.

For example, if you create a floating logo widget, the logo appears without a card background or shadow.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FRdZ78T7AmVOrFy0rMGhd%2FEkran%20Resmi%202026-08-13%2011.32.18.png?alt=media&amp;token=c4c4e880-537e-4146-ac7e-68336e89261f" alt="Transparent floating logo widget"><figcaption><p>The logo appears without a visible frame.</p></figcaption></figure>

### Continue building

Build the visual layout next. Then configure interactions and validation.

* [Design widget layout](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md)
* [Widget elements reference](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/widget-elements-reference.md)
* [Configure widget actions and validation](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/configure-widget-actions-and-validation.md)


---

# 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/configure-widget-settings.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.