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.

circle-info

Fancy Box does not replace the native browser permission prompt. It prepares the user for that step.

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.

Use Fancy Box

Best when:

  • the subscription value needs context,

  • branding matters,

  • or you want re-show control.

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.

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.

For iOS Home Screen web apps, complete Mobile Web Push for iOS first.

How Fancy Box works

1

1) Show the pre-permission prompt

Fancy Box appears on your site before the native browser prompt.

2

2) Explain the value

Use the title, description, and button text to set expectations.

3

3) Open the native prompt

When the user accepts, the browser shows its own permission request.

4

4) Re-show when appropriate

Use Show Again After to avoid repeating the prompt too often.

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.

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.

Size

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

Prioritize readability over visual density.

Color

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

Use one clear primary CTA color.

Font

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

Application icon

Fancy Box uses the Application Icon from General Settings.

To change the icon:

  1. Go to Settings → General Settings.

  2. Update the Application Icon.

  3. Click Apply.

circle-info

Changing the application icon also updates other features that inherit it.

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.

circle-check

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.

Default Fancy Box

Use when you need:

  • text edits,

  • size and color changes,

  • and fast setup from the panel.

Custom Fancy Box

Use when you need:

  • full hosted UI control,

  • custom layout behavior,

  • or advanced brand implementation.

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.

circle-exclamation

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.

Last updated

Was this helpful?