# Fancy Box

Fancy Box is a customizable **pre-permission prompt** for **Web Push**. It appears before the browser’s native permission request and helps you explain the value of subscribing before users make a decision.

Use Fancy Box when you want more control over messaging, timing, and appearance in the web push opt-in flow.

![](https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FBJrCvRe5ZjoSdrCSqNAb%2FWeb%20Fancy%20Box.png?alt=media\&token=e5fe6bbe-3a3b-402b-b911-55744fa73a88)

### Before you start

* Make sure **Web Push** is already configured in your project.
* Use Fancy Box as part of the web push subscription flow.
* For iOS home screen web apps, complete the required setup in [Mobile Web Push for iOS](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/web-push/mobile-web-push-for-ios).

### Configure Fancy Box

Open the Fancy Box settings in the web onboarding flow.

![](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\&width=768\&dpr=4\&quality=100\&sign=1e7c0c30\&sv=2)

#### Settings reference

**Enable Fancy Box**

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

**Show Again After**

Controls when Fancy Box appears again for users who dismissed or declined the prompt earlier.

Use this setting to avoid showing the same prompt too often.

**Animate Fancy Box**

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

**Preview**

Shows how the current design looks before you publish changes.

**Customize Fancy Box**

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

### Application icon

Fancy Box uses the **Application Icon** defined in [General Settings](https://user.netmera.com/netmera-user-guide/panel-settings/netmera-panel-settings/general-settings).

![](https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FFUKDlHpzbKJd9oFssmxM%2FScreenshot%202025-10-31%20at%2015.15.03.png?alt=media\&token=6ff7f1f8-bbc4-45e9-9f8d-a1c02422da06)

To change the icon used in Fancy Box:

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

{% hint style="info" %}
Changing the application icon updates the icon used across features that inherit this global setting.
{% endhint %}

### Customize appearance

You can adjust the default Fancy Box from the panel.

#### Text

Edit the title, description, and button labels.

Keep the message short and action-oriented. Tell users what they get by subscribing.

![](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\&width=768\&dpr=4\&quality=100\&sign=93ed20a2\&sv=2)

#### Size

Adjust width, height, border radius, and text size.

Match the prompt to your site layout, but keep it readable on smaller screens.

![](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\&width=768\&dpr=4\&quality=100\&sign=217449fa\&sv=2)

#### Color

Set background, button, and text colors.

Use colors that fit your brand and keep contrast high enough for readability.

![](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\&width=768\&dpr=4\&quality=100\&sign=71c752f4\&sv=2)

#### Font

Choose the font style used in the prompt.

Use a font that stays consistent with the rest of your site.

![](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\&width=768\&dpr=4\&quality=100\&sign=457c6a40\&sv=2)

### Use Custom Fancy Box

Custom Fancy Box replaces the default Netmera-managed Fancy Box UI with your own hosted design during the **web push opt-in flow**.

Use this option when the built-in panel customization is not enough and you need full control over the prompt markup and styling.

#### Requirements

Before you use Custom Fancy Box:

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

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

#### What you can customize

Inside `netmera_worker.html`, you can control elements such as:

* button colors and borders
* background and overlay styling
* title and body typography
* layout and component dimensions

When you update the file on your server, the new design is used in the flow. No extra panel action is required.

#### Limitations

* This feature applies only to **Web Push**.
* The custom design is managed outside the panel.
* Initial activation requires coordination with Netmera support.

#### Test after setup

After enabling Custom Fancy Box, verify the full opt-in flow in your target browsers:

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