thegeneralyst/AnopaDocs
Marketing

Marketing Popup

Exit intent and email capture popup with dual modes, canvas preview, scroll lock, and SPA-safe ownership keys.

What it does

MarketingPopup is a dual-mode popup component that manages Email Capture and Exit Intent (wishlist notification) flows. Each mode runs independently with its own ownership key, so multiple instances on the same page or across SPA navigation won't conflict.

The component renders via a React portal so the popup always appears above other content regardless of stacking context. While any popup mode is open, it applies scroll lock to the body (overflow: hidden) to prevent background scrolling. It also supports a dedicated mobile design slot so you can provide separate layouts for desktop and mobile.

Wishlist/exit-intent behaviour listens for AP_FavouriteButton additions and can show a toast-style notification when items are added to a wishlist.

How to set it up

  1. Add to layout: Place MarketingPopup on your global layout template so it is present across all pages.
  2. Configure Email Capture mode:
  • Enable Email Capture — Enable.
  • Set Email Capture — Delay (in ms) for how long after page load the popup should appear.
  • Connect your designed popup components to Email Capture — Desktop Slot and optionally Email Capture — Mobile Slot.
  1. Configure Exit Intent mode:
  • Enable Exit Intent — Enable.
  • Set Exit Intent — Scroll Depth (percentage) for mobile scroll-depth triggering.
  • Connect your designed popup components to Exit Intent — Desktop Slot and Exit Intent — Mobile Slot.
  1. Canvas preview:
  • Use Canvas Preview — Mode to choose which mode to preview in Framer (Off, Email Capture, Exit Intent).
  • Toggle Canvas Preview — Open to force the popup open on the canvas without waiting for live triggers.

The component manages all open/close logic internally, including timers, exit-intent detection, and scroll locking.

Key behaviours

  • Email Capture mode
  • Opens after a configurable delay (ms) from page load.
  • Uses separate desktop and mobile slots for responsive layouts.
  • Exit Intent mode
  • On desktop, triggers when the cursor leaves the viewport toward the top (exit intent).
  • On mobile, triggers after the user reaches a configurable scroll-depth percentage.
  • Can show a toast-style notification when wishlist items are added via AP_FavouriteButton.
  • SPA-safe ownership keys
  • Each mode has its own ownership key so that when the component remounts on SPA navigation, it does not re-open popups that have already been shown.
  • Portal rendering
  • Renders via a React portal to ensure the popup appears above all other content and is not affected by local stacking contexts.
  • Scroll lock
  • Applies overflow: hidden to the body while any popup mode is open to prevent background scrolling.
  • Canvas preview
  • Lets you preview either Email Capture or Exit Intent designs directly in Framer without relying on live triggers or timers.

Property Controls

ControlTypeDefaultDescription
Email Capture — EnableBooleanfalseTurn on the email capture popup.
Email Capture — DelayNumber3000msMilliseconds after page load before showing the email capture popup.
Email Capture — Desktop SlotComponentInstance—Desktop layout component instance for the email capture popup.
Email Capture — Mobile SlotComponentInstance—Optional mobile layout component instance for the email capture popup.
Exit Intent — EnableBooleanfalseTurn on the exit intent popup and wishlist notification behaviour.
Exit Intent — Scroll DepthNumber40%On mobile, the scroll percentage of the page before triggering the exit intent popup.
Exit Intent — Desktop SlotComponentInstance—Desktop layout component instance for the exit intent popup.
Exit Intent — Mobile SlotComponentInstance—Mobile layout component instance for the exit intent popup.
Canvas Preview — ModeEnumOffSelect which mode to preview on canvas: Off, Email Capture, or Exit Intent.
Canvas Preview — OpenBooleanfalseForce the popup open on the canvas for visual inspection without live triggers.