Marfeel Experiences: Popups

Experiences Formats
,
1

Popups are overlay experiences that appear on top of page content. They range from full-screen modal gates to subtle non-blocking notifications, depending on how you configure them.

Popup Experiences
Popup Experiences1920×1200 95.4 KB

How Popups work

A Popup renders as an overlay on the viewport. Unlike Inline experiences, Popups don’t inject into the DOM flow — they sit on top of the page. Where the Popup appears, whether it blocks interaction, and how the user dismisses it are all configurable through the Format tab settings.

In Modal mode, the Popup blocks interaction with the underlying page and demands attention. A modal Popup at center with blur behaves like a traditional interstitial.

In Contextual mode, the user can still interact with the page content beneath the overlay. A contextual Popup positioned at the bottom-right behaves like a floating notification.

Configure appearance

The Format tab exposes several settings that control how the Popup looks and behaves on the page.

Setting What it controls
Close icon Show or hide the close button. When hidden, the user must interact with the Popup content or click the background to dismiss. When a user clicks the close button, the close event is tracked for frequency capping — if you’ve configured a frequency cap for closes in Delivery settings, this dismissal counts toward that limit
Background The overlay color behind the Popup. Set a hex color, opacity (to let underlying content show through), and blur (0 to 100). Blur slightly defocuses the page beneath the overlay, drawing attention to the Popup while keeping visual context. Blur only works when the background color is not fully transparent
Max-width The width of the Popup container. Accepts any valid CSS unit — 600px, 50%, 100vw, etc.
Mode Contextual or Modal. Contextual allows the user to interact with the page content underneath the Popup. Modal blocks all interaction with the underlying page — only the Popup is actionable. Use Modal for content gates, subscription walls, or any scenario where the Popup must be the only available action
Position Where the Popup appears on the viewport. A 3x3 grid lets you place it at any combination of top/center/bottom and left/center/right. The position is defined from the Popup’s top-left corner

Backdrop Color and Blur
Backdrop Color and Blur1920×1200 125 KB

These settings combine with triggers to create flexible behaviors. A modal Popup with at bottom-center position creates a sticky banner for an offer. A scroll-triggered Popup at center with blur creates a Substack-style subscription gate. A contextual Popup at bottom-right works as a non-blocking notification.

Triggers

Triggers control when the Popup activates. By default, the Popup appears as soon as the experience loads (immediate appearance). To delay or condition activation, click + Add trigger in the Format tab.

Six trigger types are available: Scroll Absolute, Scroll Velocity, Intersection Observer, Timer, Click, and Back Navigation. See Triggers Reference for full descriptions, parameters, and use cases.

Popup-specific behavior: The trigger type determines the entry behavior (see below).

Entry behavior

Popups enter the screen in two different ways depending on which trigger you configure:

Scroll-bounded appearance

When the trigger is Scroll Absolute, the Popup enters the screen in sync with the user’s scrolling behavior. The Popup matches the user’s scroll speed as it appears, and the configured backdrop — color and blur — applies gradually as the Popup becomes visible. This creates a smoother, more integrated experience that aligns with the user’s interaction pattern.

Immediate appearance

When there is no trigger defined, or the trigger is anything other than Scroll Absolute (Timer, Click, Back navigation, Scroll velocity, or Intersection observer), the Popup appears immediately once the trigger condition is met. The backdrop and Popup render instantly at full opacity. While this creates a more attention-grabbing effect, it can feel more abrupt to the user.

Content

The Content tab defines what the Popup displays. What you see here depends on the blueprint you started from.

Content Tab
Content Tab2362×1476 241 KB

Recommender experiences configure a ranking algorithm (Most Read, Trending, Personalized, and others), content filters, time windows, and fallback behavior. A common pattern: a contextual Popup at bottom-right showing a curated article as a floating notification. This funnels traffic into a specific piece of content without interrupting the reading flow.

Forms provide newsletter signups, lead generation fields, and subscription prompts.

Custom Layout gives you full layout control with template-based rendering. This is the most widely used Popup content type:

  • Discount banners and promotional offers
  • Sticky call-to-action bars at the bottom of the screen
  • Conversion CTAs targeting specific user segments

All Popup experiences share a common set of style options in this tab: Colors, Hero Image, and Header and Icon.

Full details: Content and Recommender

When to use Popups

  • Subscription gates and paywall prompts
  • Discount offers, gift codes, and promotional banners
  • Trial announcements and premium upgrade prompts
  • Raffles, contests, and limited-time giveaways
  • Time-sensitive announcements and promotions
  • Consent dialogs and privacy notices
  • Gated content experiences
  • High-priority CTAs that need immediate visibility
  • Floating notifications with curated content recommendations

When to avoid Popups

Modal Popups interrupt the user experience. Overuse leads to fatigue and higher bounce rates. Before using a modal Popup, consider whether a Flowcard, Inline experience, or contextual Popup could achieve the same goal with less disruption.

Scenario Better alternative
Content recommendations Flowcard or Inline
Newsletter signup (non-urgent) Flowcard, Inline form, or contextual Popup
Editorial widget Flowcard
Branded content Flowcard with hero image

Avoid the popup party. A user lands on your page and is hit with a notification Popup, a newsletter subscription Popup, and a discount Popup — all at once. This destroys the reading experience and trains users to dismiss everything reflexively.

Marfeel provides the orchestration tools to prevent this. Use triggers to space Popups across different moments in the user journey — one scroll-triggered, another time-delayed, another on back navigation. Use targeting to show each Popup only to the right audience segment. Use frequency capping to limit impressions per user. Use goals to exclude users who have already converted.

The result: each Popup appears at the right moment, to the right user, with maximum impact and minimum disruption.

When you do use Popups, pair them with precise targeting and delivery controls:

  • Targeting: Show only to specific segments. Example: returning visitors who haven’t subscribed.
  • Frequency capping: Limit to one impression per day per user to avoid fatigue.
  • Goals: Exclude users who have already converted. No reason to show a subscription popup to existing subscribers.

Custom layout: interactive elements

When building a Custom Layout, you can add HTML elements that automatically inherit default Popup behaviors. Instead of writing JavaScript to handle interactions, assign a specific id or data attribute to any element in your layout and it will act as a native control.

Close button

Add a custom close button by giving any HTML element one of these identifiers:

  • id="mrf-inline-closeButton"
  • data-mrf-role-close attribute

The element inherits the default close behavior — clicking it dismisses the Popup exactly as the built-in close icon would.


<!-- Using the id -->
<button id="mrf-inline-closeButton">No thanks</button>

<!-- Using the data attribute -->
<a href="#" data-mrf-role-close>Maybe later</a>

This lets you design close buttons that match your layout’s visual style while keeping the standard dismissal behavior. The built-in Close icon setting in the Format tab can be hidden when you provide your own.

Going deeper