Smart Modal (Legacy)
Shows a modal instantly, after a delay, or on scroll — once ever, or again after a set number of days.
Last updated
Legacy component
What it is
The classic promotional/announcement modal, shown once per customer, remembered via localStorage. Two separate controls decide its behavior: Appear sets how it first shows — Instant, Delay, or Scroll — while Show sets how often a customer sees it again — Once ever, or every Reset After days. Supports multiple modals per site via unique Identifiers, though only the first-mounted Instant/Delay modal on a page auto-appears on its own — additional ones need a Smart Modal Trigger (Legacy) to open, or use Appear: Scroll, which lets each modal compete on its own scroll trigger. Uses the three-piece legacy stack: Modal + Trigger + Close.
Setup in Framer
Add the modal with a unique
Identifier.Connect your modal's content to
⦿ Desktop— required, the component renders nothing until it's connected. Connect⦿ Phonetoo if mobile should look different; see below.Place Smart Modal Close (Legacy) somewhere inside that connected design so customers can dismiss it (and save the dismiss to
localStorage).Set the appear timing (
Appear) and show-frequency (Show/Reset After) controls on this component. For a button that reopens the modal manually, add Smart Modal Trigger (Legacy).
Desktop and Phone designs
This is a Connect-only component — there's no built-in design. Display picks which connected design is live and which one previews on canvas: ⦿ Desktop when set to Desktop, ⦿ Phone when set to Phone. Override Display on each of Framer's breakpoints so a phone-width customer and a desktop customer can see different modal content — or just connect ⦿ Desktop and leave every breakpoint set to Desktop if you don't need a separate phone design.
On canvas, turn Preview on to see your connected design instead of a "Preview disabled" placeholder — it's an editing convenience only and has no effect on the published site.
Migration
New recipe-driven overlays use Recipe Framer Event Trigger paired with a native Framer overlay/interaction, closed with Recipe Framer Event Dismiss — driven by a Recipe instead of manual appear/show-frequency settings.