# Create

{% hint style="info" %}
**Quick Steps Guideline**

Go to your Netmera Panel and click:

**Web Tools >** **Widget > Design Widget**

1. Select your widget from [**Widget Gallery**](#widget-gallery) or [**Your Widgets**](#your-widgets) and edit your design.
2. If you want to create a new custom widget, select **"Blank Widget"**, add a name and configure your widget in[ **Extend Widget**](#extend-widget)**.**
3. Customize your widget using drag and drop widget tools in **Elements.**
4. Define [**Click Actions**](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/web-pop-up/create/assign-click-actions) for your buttons or images.
5. Click on **Save Widget & Return**.
   {% endhint %}

When you click **Blank Widget**, the **Extend Widget** page opens. This is where you configure your widget’s core settings and customize how it looks and behaves. Each option helps you create a widget that is easy to identify, fits your campaign purpose, and delivers the right user experience.

## Widget Gallery

The **Widget Gallery** provides you with a collection of pre-designed templates that you can use as a starting point for your campaigns. These templates save you time and effort while still giving you the flexibility to customize them according to your needs.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FYAFoD69OjDxqt8P9VoxH%2FScreenshot%202023-05-18%20at%2014.52.46.png?alt=media&#x26;token=b734585f-7830-4cf7-bd8a-b63acdae5112" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F9sMMqwlJAWj1aMhU9bLX%2FScreenshot%202023-05-18%20at%2014.52.54.png?alt=media&#x26;token=74d6e9f6-09c9-4e21-af0b-36725a3703f8" alt=""><figcaption><p>Widget Gallery</p></figcaption></figure>

## Your Widgets

In the **Your Widgets** section, you have access to the widgets you created previously. This section allows you to manage and maintain widgets efficiently with the following options:

* **Search**\
  Quickly find specific widgets by entering keywords. Useful when you have a large library.
* **Edit**\
  Update design, content, or behavior settings. For example, you may change the look of the close button or update campaign text.
* **Delete**\
  Remove unwanted widgets permanently. Helps keep your library organized.
* **Clone**\
  Duplicate an existing widget to create a new version with small modifications.

**Example:**\
If you have a “Welcome Discount” widget offering **10%**, you can use **Edit** to update it to **15%**, instead of creating one from scratch.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FYAFoD69OjDxqt8P9VoxH%2FScreenshot%202023-05-18%20at%2014.52.46.png?alt=media&#x26;token=b734585f-7830-4cf7-bd8a-b63acdae5112" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F9sMMqwlJAWj1aMhU9bLX%2FScreenshot%202023-05-18%20at%2014.52.54.png?alt=media&#x26;token=74d6e9f6-09c9-4e21-af0b-36725a3703f8" alt=""><figcaption><p>Widget Gallery</p></figcaption></figure>

## Extend Widget

When you select **Blank Widget**, the **Extend Widget** page opens. Here, you configure your widget’s fundamentals and advanced options.

### Name

Give your widget a descriptive, memorable name, e.g., **“Summer Sale Pop-up”**.

### Description

Add a short explanation of the widget’s purpose, e.g., “Promotes seasonal discounts with an interactive pop-up.”

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FbZ7GUviJGIyBbY8nZF3v%2Fimage.png?alt=media&#x26;token=acfdd593-1601-4914-a763-1cd21c25c3ce" alt=""><figcaption></figcaption></figure>

### Background Overlay Feature

Background Overlay is designed to give you **greater visual control** over how popups are presented, without breaking existing or simple use cases. It enables more advanced visual customization while preserving backward compatibility and keeping basic popup implementations simple.

{% hint style="info" %}
**Minimum SDK Versions**

* **Android SDK:** 4.13.1
* **Swift SDK (iOS):** 4.14.2
  {% endhint %}

#### Background Overlay

The **Background Overlay** toggle is enabled by default.

When enabled:

* All areas outside the popup are covered by an tinted gray overlay.
* The overlay is applied in **full screen**.
* The overlay includes the **status bar area** (such as time, battery, and carrier information).
* The **Overlay Color** option becomes available.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2Fia7exrLMwrSpbyEYKtVm%2FScreenshot%202026-02-05%20at%2011.17.46.png?alt=media&#x26;token=808bd2e1-9e44-4a20-8a74-f79d9c6dd504" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FaRh5jrbFdjBmUdwJx05c%2FScreenshot%202026-02-05%20at%2011.18.02.png?alt=media&#x26;token=54d6810b-e76f-4527-ace8-4acdc143bedf" alt=""><figcaption></figcaption></figure>

#### Overlay Color

* By default, the overlay color is set to a **tinted gray**.
* You can select a custom color using the **color picker**.
* Both **HEX** and **RGBA** color formats are supported.
* The selected color is applied to the **full-screen overlay area behind the popup**.
* Opacity can be adjusted either:
  * Directly within the color picker, or
  * Via a separate opacity control (slider).

#### Clear Background

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2F0Pk4RKzukP8FJquxO5tI%2FScreenshot%202026-02-05%20at%2011.19.44.png?alt=media&#x26;token=f90ce3d3-2dc6-467c-abb1-fd3229281979" alt=""><figcaption></figcaption></figure>

When the **Clear Background** toggle is enabled:

* The popup is displayed on a **transparent app background**.
* **Background Overlay is automatically disabled.**
* The **Overlay Color** option becomes disabled.

{% hint style="success" %}

### What You Can Achieve with Background Overlay

* Display popups on a **transparent background** when you want the underlying app content to remain visible.
* **Dim or colorize the area outside the popup** to draw user attention to the message.
* Create an overlay experience that is **consistent with brand colors**.
* Provide a **seamless modal experience**, including the status bar area, for full-screen or immersive presentations.
  {% endhint %}

### Widget Closes When Clicked Outside

When this option is enabled, users only need to **tap or click outside the widget area** to close it.

* The feature works across **both web and mobile platforms**.
* It provides a smoother, more natural interaction that aligns with common digital behavior patterns.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FH1kpdVyzikn0RZs5muTy%2FFrame%2091580.png?alt=media&#x26;token=06a9a71e-a8fe-449f-8e6a-1a0c7de1dff0" alt="" width="563"><figcaption></figcaption></figure>

### Type

Choose the widget type best suited for your campaign:

* **Pop-up:** Eye-catching overlay for promotions, offers, or subscriptions.
* **Floating Bar** – Slim bar at the top/bottom of the page, ideal for persistent announcements.

### Close Button Location

You can place the close (X) button in any of these positions:

* **Widget Top-Right** **Corner** (default)
* **Above the Right Corner of Widget**
* **Custom Button Position**

This behavior works across both **web and mobile platforms**, allowing you to align interactions with your branding and UX flow.

#### Custom Button Position

If you select **Custom Button Position**, additional controls will appear:

* **Right Position**: Adjust the horizontal distance of the button from the right edge (0–100%).
* **Top Position**: Adjust the vertical distance of the button from the top edge (0–100%).

This flexibility allows you to place the close button anywhere inside the widget, ensuring it never overlaps important content and always matches your layout.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FbIWDypoUvLJN6ENW8Hgb%2FScreenshot%202025-08-26%20at%2017.03.17.png?alt=media&#x26;token=4761f96a-80bb-4de0-bd57-150f2f038073" alt=""><figcaption></figcaption></figure>

### Close Button Color

Choose a color that matches your design. For example, you may use a contrasting color for visibility or a brand color for consistency.

### Placement

You can define where the widget itself appears on the user’s screen:

* **Top**
* **Center**
* **Bottom**

Preview the widget in both **desktop and mobile** views to confirm correct alignment.

### Example

If you’re creating a **Feedback Pop-up** for mobile users, you could:

* Place the widget at the **bottom of the screen** for easy thumb access.
* Set the **close button** at the **top-left**, making it stand out from your form fields.
* Use your brand’s **accent color** for the close button, ensuring it matches the rest of the widget.

✅ With these options, you have complete control over how your widgets look and behave, from basic design to subtle details like close button placement. Small changes in positioning can make a big impact on **user comfort** and **brand alignment**.