# Fancy Box

The **Fancy Box** is a pop-up panel that requests permission from users to enable web push notifications. As a customizable feature, it gives you the flexibility to tailor its appearance and behavior, making it fit the specific needs of your application.

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FBJrCvRe5ZjoSdrCSqNAb%2FWeb%20Fancy%20Box.png?alt=media&#x26;token=e5fe6bbe-3a3b-402b-b911-55744fa73a88" alt="" width="563"><figcaption></figcaption></figure>

## Fancy Box Settings <a href="#step-4-fancy-box-settings" id="step-4-fancy-box-settings"></a>

**Developers > Netmera Onboarding > Web Onboarding > Step 4: Fancy Box Settings**

<figure><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=""><figcaption></figcaption></figure>

1. **Enable Fancy Box:** Choose whether to display the Fancy Box for notification prompts or rely solely on the native browser permission request.
2. **Show Again After:** Set the timeframe for when the Fancy Box should reappear for users who declined the notification permission initially.
3. **Animate Fancy Box:** Enable this option to add animated effects to the Fancy Box for a more engaging user experience.
4. **Preview** Use the preview option to see how the Fancy Box will appear to users.
5. **Customize Fancy Box:** Personalize the Fancy Box design in this section.

### Fancy Box Application Icon&#x20;

<figure><img src="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&#x26;token=6ff7f1f8-bbc4-45e9-9f8d-a1c02422da06" alt=""><figcaption></figcaption></figure>

Fancy Box automatically uses the Application Icon that is defined in [general-settings](https://user.netmera.com/netmera-user-guide/panel-settings/netmera-panel-settings/general-settings "mention") > Netmera Panel Application > Application Icon.

To change the icon shown in the Fancy Box:

1\. Navigate to `Settings>General Settings` in Netmera Panel dashboard.

2\. Update the Application Icon in General Settings.&#x20;

3\. Click Apply to save your changes.

### Customization Options

1. **Text**
   * Personalize the header, informational text, and button labels.
   * Deliver clear and inviting messaging to users to encourage interaction.

<figure><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=""><figcaption></figcaption></figure>

2. **Size**
   * Adjust dimensions such as width, height, and border radius.
   * Change text size to ensure the Fancy Box fits seamlessly with your website's layout.

<figure><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=""><figcaption></figcaption></figure>

3. **Color**
   * Select background colors for the Fancy Box frames and buttons.
   * Customize font colors to align with your site’s branding and color palette.

<figure><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=""><figcaption></figcaption></figure>

4. **Font**
   * Choose from a variety of font styles, including inherit, initial, italic, normal, oblique, revert, or unset.
   * Ensure the font selection complements your website's typography for a cohesive design.

<figure><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=""><figcaption></figcaption></figure>