For the complete documentation index, see llms.txt. This page is also available as Markdown.

Fancy box

Fancy Box is Netmera’s branded pre-permission prompt for Web Push. It appears before the native browser permission request and helps you explain the value of subscribing, control when the prompt appears, and match the opt-in flow to your site branding.

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 use the native browser prompt only.

Fancy Box

Best when:

  • the subscription value needs context,

  • branding matters,

  • or you want re-show control.

Native browser prompt

Best when:

  • you want the fewest steps,

  • the subscription value is already obvious,

  • or you do not need UI customization.

Choose default or 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.

How Fancy Box works

The subscription flow follows these steps:

  1. Fancy Box appears on your site before the browser permission prompt.

  2. Use its title, description, and button text to explain why subscribing is worthwhile.

  3. When someone accepts, their browser shows its own permission request.

  4. If they dismiss or decline Fancy Box, use Show Again After to decide when it appears again.

Step 1: Choose the right trigger

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.

Step 2: Configure Fancy Box

Open the Fancy Box settings in your web push setup flow.

Settings reference

These settings control how Fancy Box appears and behaves:

  • Enable Fancy Box — Turns the pre-permission prompt on or off. If disabled, users see only the native browser permission request.

  • Show Again After — Controls when Fancy Box appears again after a dismissal or decline. Use a longer interval if your site has frequent repeat visits.

  • Animate Fancy Box — Adds animation to the prompt.

  • Preview — Shows the current design before you publish changes.

  • Customize Fancy Box — Opens the design settings for text, size, color, and font.

Step 3: Customize the design

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, and prioritize readability over visual density.

Colors

Set the background, button, and text colors. Keep contrast high for readability, and use one clear primary CTA color.

For Fancy Box buttons, you can configure:

  • Background Color: Defines the button background color.

  • Text Color: Defines the button label color.

  • Border Color: Defines the button border color.

Configure border color separately for both Accept and Dismiss buttons. If no border color is selected, the border is applied as transparent by default.

Changes are reflected in the preview area in real time.

Typography

Choose the font used in the prompt, and keep it consistent with the rest of your site.

You can select the font family and font weight used in the Fancy Box.

The font selection includes Source Sans Pro, Calibri, Cambria and more.

Available font weight options are:

  • Regular

  • Semibold

  • Bold

The selected font and font weight are applied to the Fancy Box title, body text, and button labels.

Existing Fancy Box campaigns continue to use their current design settings. If no border color or font weight is selected, default values are applied to preserve backward compatibility.

Font settings apply only to Fancy Box. Other web engagement components keep their existing font behavior.

Step 4: 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.

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

Step 5: Measure opt-in performance

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

Common events include:

  • Fancy Box Shown

  • Fancy Box Accept

  • Fancy Box Later

  • Enable Push

  • Disable Push

Use these events to answer two questions:

  1. Are users engaging with the pre-permission prompt?

  2. Are they completing the browser permission step?

The gap between Fancy Box Accept and Enable Push shows how well the full opt-in flow performs.

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.

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.

Last updated

Was this helpful?