> 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/target-and-publish/publish-a-web-widget.md).

# Publish a web widget

{% @arcade/embed url="<https://app.arcade.software/share/cZ9R6yEXsEmLZVGfLOoq>" flowId="cZ9R6yEXsEmLZVGfLOoq" %}

### Publication workflow

Publishing controls where, when, and for whom your widget appears. Design the widget and configure its click actions before starting this workflow.

Use [Design widget layout](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/design-widget-layout.md) for layout and content. Use [Configure widget actions and validation](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/configure-widget-actions-and-validation.md) for buttons and images.

{% hint style="warning" %}
Preview every target screen width. Confirm the widget does not cover essential content.
{% endhint %}

### Step 1: Setup

Choose a saved widget or template in **Setup**. Then add a clear publication name. Use names that describe the campaign, audience, or placement. This makes active widgets easier to find and maintain.

<figure><img src="/files/IGwA6B32lW1jkqxWH00p" alt=""><figcaption><p>Setup</p></figcaption></figure>

### Step 2: Rules

Triggers decide when a widget can appear. Filters decide which visitors can see it. Combine rules to reach a relevant audience without interrupting every visitor.

<figure><img src="/files/TJOMNyUjPbHBXMiz4yDE" alt=""><figcaption><p>Exit Intent Trigger</p></figcaption></figure>

{% hint style="info" %}
For example, show a widget after a visitor spends time on your site. Then filter it to selected regions.
{% endhint %}

<figure><img src="/files/dvdAMFbTOqmE1oQBLX10" alt=""><figcaption><p>Rules</p></figcaption></figure>

#### Use segments and tags

Use [Segments](/netmera-user-guide/targeting/segments.md) for reusable audiences. Use tags to include or exclude directly labeled visitors.

### Triggers

Add one or more triggers to define the behavior that can display a widget. Group triggers when one campaign needs several conditions.

#### Scroll

Show the widget after a visitor reaches a selected page depth. Use a ratio such as 50% or 75% to engage visitors who show interest in the content.

<figure><img src="/files/gbHQRdZHBtu9jZ7JStXX" alt="" width="347"><figcaption></figcaption></figure>

#### Click Selector

Show the widget when a visitor clicks a specific page element. Identify the element with its CSS selector. Use this for a **Buy Now** button, a selected image, or another intent signal.

{% hint style="warning" %}
Enter a CSS selector that matches the clicked element. The selector works with the `contains` operator. Prefix an ID with `#` and a class with `.`.
{% endhint %}

<figure><img src="/files/onL4z0jx9bCoBMvfPpfe" alt="" width="375"><figcaption></figcaption></figure>

#### Page View

Show the widget when a visitor opens a selected page or page set. Use it for contextual content, such as a related-product discount on product detail pages.

<figure><img src="/files/ASVj60gqRjqzY5LpIpXK" alt="" width="375"><figcaption></figcaption></figure>

#### Exit Intent

Show the widget when a visitor appears ready to leave the page or switch tabs. Use it to offer an incentive, helpful information, or a final recommendation.

<figure><img src="/files/K0nI5MtskcahE2ZVopyZ" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/YiUdz9sL7i0cnzxCNV5w" alt="Exit Intent widget example"><figcaption><p>Exit Intent widget</p></figcaption></figure>

#### Widget Shown

Show this widget after a selected widget has already appeared. Use it for follow-up flows, such as a feedback survey after a support widget.

<figure><img src="/files/3G0POuVrGwSFKMGEgEXA" alt="" width="375"><figcaption></figcaption></figure>

#### Netmera Event

Show the widget when a Netmera event matches its configured name, attributes, operator, and value. Use it for purchases, preferences, or custom interactions.

<figure><img src="/files/MytpRJJXJZdPmF70Iydv" alt="" width="356"><figcaption></figcaption></figure>

Use triggers that match one campaign goal. This keeps the experience relevant and easier to maintain.

### Filters

Add one or more filters to narrow the eligible audience. Filters can target behavior, context, devices, or known audience data.

#### Time spent on site

Target visitors who have spent a minimum duration on your website. Set the threshold in seconds to engage visitors who show interest.

<figure><img src="/files/GaSiAsxcHAUr4eKvIE5Q" alt="" width="375"><figcaption></figcaption></figure>

#### Source URL

Target visitors by where they arrived from. Define the medium, source, and campaign parameters for channel-specific messages or offers.

<figure><img src="/files/FlSRamUEGsntSpfw8HlU" alt="" width="375"><figcaption></figcaption></figure>

#### Browser

Target Chrome, Safari, Firefox, Edge, Opera, or other browsers. Use this when the widget depends on browser compatibility or features.

<figure><img src="/files/a6kc16gX4yzAct1LLmTY" alt="" width="349"><figcaption></figcaption></figure>

#### Device Type

Target desktop, mobile, or tablet visitors. Combine this filter with responsive design checks for the selected device.

<figure><img src="/files/o9QdgC7zuEFOksJxG2C5" alt="" width="351"><figcaption></figcaption></figure>

#### Operating System

Target Windows, macOS, iOS, Android, or other operating systems. Use it for operating system-specific instructions, promotions, or features.

<figure><img src="/files/eEY88YEeKYEYHWh5uPD5" alt="" width="352"><figcaption></figcaption></figure>

#### Cookie

Target visitors with a matching cookie name and value. Use this for personalized experiences based on known attributes or preferences.

<figure><img src="/files/OHoeVArv01aZlsqOXRju" alt="" width="375"><figcaption></figcaption></figure>

#### Screen Width

Target visitors whose screen width falls within a minimum and maximum range. Use this to protect responsive layouts across screen sizes.

<figure><img src="/files/rRnVSJVTH0aHi6zI3HIf" alt="" width="375"><figcaption></figcaption></figure>

#### Location

Target visitors in selected geographic locations. Use this for local offers, promotions, or regional content.

<figure><img src="/files/DtwqdASLvfw2gjmJDiI0" alt="" width="357"><figcaption></figcaption></figure>

#### Segment

Target visitors who belong to selected Netmera segments. Use segments for reusable audiences based on attributes, behaviors, or preferences.

<figure><img src="/files/NdqmKOqkEGSJGm9NpZqx" alt="" width="375"><figcaption></figcaption></figure>

#### Tag

Target visitors by the presence or absence of selected Netmera tags. Use tags for direct audience labeling and exclusions.

<figure><img src="/files/I1YnZXL4rprQeLdpl3w8" alt="" width="375"><figcaption></figcaption></figure>

Combine filters to create a focused target group. Keep the rule set understandable for future maintenance.

### Configure display timing

Use **Advanced Show Settings** to control when the widget appears and how long it remains visible.

<table><thead><tr><th width="318.80078125">Setting</th><th>Behavior</th></tr></thead><tbody><tr><td><strong>Show Instantly</strong></td><td>Displays the widget as soon as the webpage loads.</td></tr><tr><td><strong>Show Later</strong></td><td>Displays the widget after a selected delay. You can also set a hide delay, such as 20 seconds, to remove it automatically.</td></tr><tr><td><strong>Schedule</strong></td><td>Displays the widget only between selected start and end dates.</td></tr><tr><td><strong>Enable custom tag firing scheduled</strong></td><td>Schedules display based on selected custom tags and the configured date range.</td></tr><tr><td><strong>Start/End</strong></td><td>Defines the exact date and time that display starts and ends.</td></tr></tbody></table>

<figure><img src="/files/8F1r8EGwlLVclbYFiTSb" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CJ3prjyGIk2sa0sNkBnp" alt=""><figcaption><p>Advanced Show Settings</p></figcaption></figure>

### Set frequency and eligibility limits

<figure><img src="/files/4MsaAvhzU6GPT8urofgy" alt=""><figcaption><p>Example</p></figcaption></figure>

Limits prevent overexposure. All configured limits apply together.

| Limit                 | What it controls                                                               | Example                                                                           |
| --------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
| **Lock Duration**     | The cooldown after one display. The widget cannot reappear during this period. | A one-week lock means a January 1 display cannot repeat before January 8.         |
| **Show Limit**        | The maximum displays for one user.                                             | A limit of two allows only two displays.                                          |
| **Limit Time Period** | The time window used for the show limit.                                       | Two displays within two months prevents further displays until the window resets. |

#### Example timeline

1. The visitor sees the widget on January 1. A one-week lock applies.
2. The visitor sees it again on January 15. This is the second display.
3. The widget stays hidden until March 1, when the two-month period resets.

### Step 3: Design

Choose the page location that supports the campaign goal and preserves the surrounding content. Available placements include a top bar, bottom bar, sidebar, and center placement.

{% hint style="info" %}
Use center placement for a time-sensitive discount or another high-attention message.
{% endhint %}

<figure><img src="/files/KuofDeczRnYDP7B01H9Y" alt="Widget placement settings"><figcaption><p>Design placement</p></figcaption></figure>

### Step 4: Go

In **GO**, preview the widget before making it live. Confirm the trigger, filters, timing, limits, and placement support the intended campaign. Select **Launch** when the preview is correct.

<figure><img src="/files/wZtKMLdFbOAPGKp413jP" alt=""><figcaption><p>Go</p></figcaption></figure>

{% hint style="info" %}
If the widget covers important content, return to **Design**. Choose another placement or adjust the widget dimensions.
{% endhint %}

After launch, use [Analyze widget performance](/netmera-user-guide/omnichannel-engagement/widgets/measure-performance/analyze-widget-performance.md) to review shown and action events.


---

# 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/target-and-publish/publish-a-web-widget.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.