# Fancy Box

Fancy Box is Netmera’s pre-permission prompt for **Web Push**. It appears before the browser permission request. Use it to explain value, control timing, and match your site branding.

<img src="/files/uI7HPbDHue7fWwQKylDC" alt="" width="563">

{% hint style="info" %}
Fancy Box does **not** replace the native browser permission prompt. It prepares the user for that step.
{% endhint %}

### When to use Fancy Box

Use Fancy Box when you want to:

* explain why users should subscribe before the browser asks,
* match the opt-in flow to your brand,
* and control when the prompt appears again.

If you want the shortest possible opt-in flow, you can rely on the native browser prompt only.

{% columns %}
{% column %}

#### Use Fancy Box

Best when:

* the subscription value needs context,
* branding matters,
* or you want re-show control.
  {% endcolumn %}

{% column %}

#### Use native browser prompt only

Best when:

* you want the fewest steps,
* the subscription value is already obvious,
* or you do not need UI customization.
  {% endcolumn %}
  {% endcolumns %}

### Before you start

Before using Fancy Box, make sure:

* your **Web Push** setup is complete,
* your site is ready for the subscription flow,
* and your browser support plan is clear.

If you are still setting up the channel, start with [**Web Push**](/netmera-user-guide/omnichannel-engagement/web-push.md).

For iOS Home Screen web apps, complete [**Mobile Web Push for iOS**](/netmera-user-guide/omnichannel-engagement/web-push/mobile-web-push-for-ios.md) first.

### How Fancy Box works

{% stepper %}
{% step %}

#### 1) Show the pre-permission prompt

Fancy Box appears on your site before the native browser prompt.
{% endstep %}

{% step %}

#### 2) Explain the value

Use the title, description, and button text to set expectations.
{% endstep %}

{% step %}

#### 3) Open the native prompt

When the user accepts, the browser shows its own permission request.
{% endstep %}

{% step %}

#### 4) Re-show when appropriate

Use **Show Again After** to avoid repeating the prompt too often.
{% endstep %}
{% endstepper %}

### Recommended timing

Fancy Box performs best after the user has some context.

Good trigger points:

* after a product or category visit,
* after login or signup,
* or after a meaningful content view.

Avoid showing it immediately on first page load unless the benefit is already clear.

### Configure Fancy Box

Open the Fancy Box settings in the web push onboarding flow.

<img src="https://user.netmera.com/~gitbook/image?url=https%3A%2F%2F2578508252-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F0bOAscrXzPSujyzq8DEz%252Fuploads%252FAK1z41MUzz8EoJbLNunN%252FScreenshot%25202025-01-15%2520at%252012.45.55.png%3Falt%3Dmedia%26token%3Da7a8dd55-fe4d-4cb6-af7e-7b894ece722a&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1e7c0c30&#x26;sv=2" alt="" width="563">

#### Settings reference

**Enable Fancy Box**

Turns the pre-permission prompt on or off. If disabled, users see only the native browser permission request.

Use this when you want a branded opt-in step before the browser prompt.

**Show Again After**

Controls when Fancy Box appears again after a dismissal or decline. Use it to reduce prompt fatigue.

Choose a longer interval if your site has frequent repeat visits.

**Animate Fancy Box**

Adds animation to the prompt. Use it carefully so the prompt still feels lightweight.

Animation should support attention, not distract from the message.

**Preview**

Shows the current design before you publish changes.

**Customize Fancy Box**

Opens the design settings for text, size, color, and font.

### Customize appearance

You can edit the default Fancy Box from the panel.

#### Text

Edit the title, description, and button labels. Keep the message short and benefit-led.

Good copy usually answers one question:

**What will the user get if they subscribe?**

Examples:

* product drops and price alerts,
* order and delivery reminders,
* or breaking updates and announcements.

<img src="https://user.netmera.com/~gitbook/image?url=https%3A%2F%2F2578508252-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F0bOAscrXzPSujyzq8DEz%252Fuploads%252FddHPtCoi1AoROh6IEL8m%252FScreenshot%25202025-01-15%2520at%252012.48.26.png%3Falt%3Dmedia%26token%3Dee99ae9c-485b-4611-841e-60f0da7cb7ee&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=93ed20a2&#x26;sv=2" alt="" width="563">

#### Size

Adjust width, height, border radius, and text size. Keep the prompt readable on smaller screens.

Prioritize readability over visual density.

<img src="https://user.netmera.com/~gitbook/image?url=https%3A%2F%2F2578508252-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F0bOAscrXzPSujyzq8DEz%252Fuploads%252FD99PgIRUhe8bA5sQe3H3%252FScreenshot%25202025-01-15%2520at%252012.49.39.png%3Falt%3Dmedia%26token%3Da9ead144-1992-4082-8fbc-795faa74982a&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=217449fa&#x26;sv=2" alt="" width="563">

#### Color

Set the background, button, and text colors. Keep contrast high for readability.

Use one clear primary CTA color.

<img src="https://user.netmera.com/~gitbook/image?url=https%3A%2F%2F2578508252-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F0bOAscrXzPSujyzq8DEz%252Fuploads%252FqxH4mPrSz2ZXq9leLee4%252FScreenshot%25202025-01-15%2520at%252012.51.31.png%3Falt%3Dmedia%26token%3D216ca948-85d4-4f56-bdcc-5ba91a76eb44&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=71c752f4&#x26;sv=2" alt="" width="563">

#### Font

Choose the font used in the prompt. Keep it consistent with the rest of your site.

<img src="https://user.netmera.com/~gitbook/image?url=https%3A%2F%2F2578508252-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F0bOAscrXzPSujyzq8DEz%252Fuploads%252Ft6mtf7BovQwiYxQTFF5H%252FScreenshot%25202025-01-15%2520at%252012.52.33.png%3Falt%3Dmedia%26token%3D14b78114-5110-4926-8557-3867f8e027fd&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=457c6a40&#x26;sv=2" alt="" width="563">

### Application icon

Fancy Box uses the **Application Icon** from [**General Settings**](/netmera-user-guide/panel-settings/netmera-panel-settings/general-settings.md).

![](/files/B9bRF8DcrxgcL2RxG9yE)

To change the icon:

1. Go to **Settings → General Settings**.
2. Update the **Application Icon**.
3. Click **Apply**.

{% hint style="info" %}
Changing the application icon also updates other features that inherit it.
{% endhint %}

### Measure performance

Netmera tracks the key web push opt-in steps on the web.

Common events include:

* **Fancy Box Shown**
* **Fancy Box Accept**
* **Fancy Box Later**
* **Enable Push**
* **Disable Push**

These events help you answer two questions:

1. Are users engaging with the pre-permission prompt?
2. Are they completing the browser permission step?

Use the gap between **Fancy Box Accept** and **Enable Push** to review how well the full opt-in flow performs.

### Best practices

* Show one clear benefit, not a long explanation.
* Use one primary action label.
* Delay the prompt until the user has context.
* Test the full flow on the browsers you support.

{% hint style="success" %}
Fancy Box performs best when the copy explains a concrete benefit such as offers, reminders, or updates.
{% endhint %}

### Default vs custom Fancy Box

Use the default Fancy Box when panel-level customization is enough. Use Custom Fancy Box when you need full hosted UI control.

{% columns %}
{% column width="50%" %}

#### Default Fancy Box

Use when you need:

* text edits,
* size and color changes,
* and fast setup from the panel.
  {% endcolumn %}

{% column width="50%" %}

#### Custom Fancy Box

Use when you need:

* full hosted UI control,
* custom layout behavior,
* or advanced brand implementation.
  {% endcolumn %}
  {% endcolumns %}

### Custom Fancy Box

Custom Fancy Box replaces the default Netmera-managed UI with your own hosted version. Use it when panel customization is not enough.

#### Requirements

Before using Custom Fancy Box:

1. Contact Netmera support to enable the feature.
2. Host `netmera_worker.html` on your own server.
3. Define your custom Fancy Box inside `netmera_worker.html`.

{% hint style="warning" %}
Custom Fancy Box cannot be enabled from the panel. Initial activation requires Netmera support.
{% endhint %}

#### What you can customize

Inside `netmera_worker.html`, you can control:

* button styles and borders,
* background and overlay styling,
* and layout, typography, and dimensions.

When you update the hosted file, the new design is used in the flow.

This gives you control beyond the panel-level text, size, color, and font settings.

#### Test after setup

After setup, verify the full opt-in flow:

1. Confirm the custom prompt loads correctly.
2. Confirm the subscribe action opens the native browser prompt.
3. Confirm styles and assets load from your hosted file.
4. Confirm the flow works on the browsers and devices you support.


---

# Agent Instructions: 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:

```
GET https://user.netmera.com/netmera-user-guide/omnichannel-engagement/web-push/fancy-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.