BrightLeaf Digital Code Snippet Library

Goal

• Show a simple popup based on three common behaviors:
  1. Exit intent (when a desktop user moves the mouse toward the browser’s top bar)
  2. Idle time (after a visitor hasn’t moved/typed/scrolled for N seconds)
  3. After scrolling a specified amount down the page.
• Keep everything self‑contained: the shortcode prints its own minimal CSS and JS inline.
• Work nicely with normal page content, including Gravity Forms shortcodes inside the popup.

Features

• Three triggers you can use together or separately:
  • open_on="exit" → show on exit intent (desktop browsers)
  • open_on="idle:3" → show after 3 seconds of inactivity
  • open_on="scroll:50%" → show after the visitor has scrolled 50% of the page
• Choose where the popup sits: position="top", "center" (default), or "bottom".
• Optional auto‑close timer: dismiss="10s" closes it after 10 seconds.
• A ready‑made Close button (×), backdrop click to close, and ESC key support.
• Any link inside the popup with class "gosmartmodalbutton" will close the popup first, then continue to that link. If it’s a #section link, the page will smooth‑scroll there.
• Friendly with Gravity Forms: you can place a [gravityform] shortcode inside the popup.
• Respectful behavior: if a visitor closed a popup, it won’t pop again for its dismiss_for duration (30 minutes by default).

Requirements

• WordPress and (optionally) Gravity Forms if you want to show a form in the popup.
• No extra plugins or theme edits required. The shortcode includes its own CSS/JS once per page.
• Exit intent is a desktop behavior only; on mobile/tablet use the idle trigger.

How to use it (quick start)

1) Paste this in your page/post content

[gosmartmodal width="700" id="welcome-offer"]
<div open_on="exit" position="top" dismiss="10s">
  <div style="text-align:center;">
    <h2>Here's a gift</h2>
    <p>Before you go, enjoy 10% off with code <strong class="gosmartmodalcoupon">GRAVITYOPS10</strong>.</p>
    <p><a href="#pricing" class="gosmartmodalbutton">View Plans</a></p>
  </div>
</div>
<div open_on="idle:3" position="center" dismiss="10s">
  <p>Have a question? Ask us anything!</p>
  [gravityform id="12" title="false"]
</div>
[/gosmartmodal]

2) What happens

• The first popup appears on exit intent.
• The second appears after 3 seconds of inactivity.
• Clicking “View Plans” closes the popup and scrolls to the #pricing section.

What each part means

Shortcode wrapper: [gosmartmodal width="700" id="welcome-offer"] ...

[/gosmartmodal]

• width: limits the popup’s max width.
  • Number only → pixels (e.g., 700 → 700px)
  • CSS length value → 70vw, 90%, 40rem, 32em, 720px
  • Default: 700px
  • Note: calc() not supported.
• id: unique identifier used to scope dismissal memory.
  • Letters, numbers, underscore, hyphen
  • Default: auto‑generated
  • Reusing id shares dismissal memory.

Inner blocks: each <div> controls one popup

• open_on (required): when to open the popup.
  • "exit" or "exit-intent"
  • "idle:N" → N seconds inactivity (decimals allowed)
  • "scroll:X%" → X percent down page
  • "scroll:Ypx" → Y pixels down page
• position: top, center (default), bottom
• dismiss: auto‑close timer
  • "10s", "2.5s", "5000ms", "10000"
  • 0 disables
• dismiss_for: how long the popup stays dismissed
  • "10s", "2.5s", "30m", "1h", "5000ms", bare ms
  • 0 disables
  • Default: 30m

Full Attribute Reference (Quick Lookup)

[gosmartmodal] wrapper attributes

• width: integer px or CSS length. Default: 700.
• id: unique slug used for dismissal memory.

Inner <div> attributes

• open_on: exit, exit-intent, idle:N, scroll:X% or Ypx
• position: top | center | bottom
• dismiss: seconds or milliseconds
• dismiss_for: memory window; default 30m

Examples

Exit intent with bottom position

<div open_on="exit" position="bottom">...</div>

Idle after 2.5s, auto‑close after 6s

<div open_on="idle:2.5" position="top" dismiss="6s">...</div>

Idle after 8s, ms-based dismiss

<div open_on="idle:8" dismiss="8000">...</div>

Scroll 60%

<div open_on="scroll:60%">...</div>

Scroll 800px

<div open_on="scroll:800px">...</div>

Behavior notes

• Dismissal memory: a popup won’t open again during its dismiss_for window.
• Accessibility: role="dialog", aria-modal="true", ESC to close, focus sent to close button.
• .gosmartmodalbutton closes popup first, then navigates; hash links smooth‑scroll.

Styling and classes

• .gosmartmodalcoupon — bold coupon code helper
• .gosmartmodalbutton — closes popup before navigating
• Prefixed classes avoid theme conflicts

Accessibility & Behavior

• Popups include ARIA roles.
• Focus moves to the close button.
• Clicking outside closes popup.

Helpful tips

• Exit intent: move cursor toward top browser chrome.
• To re-trigger a dismissed popup: wait 30m or clear site data.
• Anchor links like #pricing smooth‑scroll after closing.
• For Gravity Forms inside popup: forms activate once visible.

What this does not do

• Cannot override browser Back/Close behaviors (security rule).
• Exit popup won’t fire on mobile; use idle trigger.

Need to customize?

• Timings, positions, and small design tweaks can be adjusted.
• Any HTML allowed inside popup (images, headings, Gravity Forms).

https://raw.githubusercontent.com/Eitan-brightleaf/snippets/refs/heads/main/Exit%E2%80%91Intent%20%26%20Idle%20Modal%20Shortcode.php

Loading...