Popup

Popup is a dashboard-controlled triggered overlay for high-intent moments such as exit intent. It opens a focused popup with a headline, message, input, CTA, and optional merchant-configured suggestion prompts.

The persisted configuration key is modal, but the dashboard and public docs call the component Popup.

When to use

Use Popup sparingly when the moment is important enough to take focus, most commonly when a desktop visitor appears to be leaving through exit intent.

Set up in Triggered elements

Open Website UX > UX Elements > Triggered.

Choose Popup.

Click Setup.

Choose the trigger, headline, message, suggestion prompts, page rules, and schedule.

Click Set Live.

No HTML placement is required after the main Nobi script is installed.

Advanced JavaScript configuration

Most merchants should configure Popup in the dashboard. Advanced setups can pass the modal configuration inside assistantConfiguration when initializing Nobi:


window.Nobi.initialize({
  accountId: 'YOUR_ACCOUNT_ID',
  assistantConfiguration: {
    modal: {
      enabled: true,
      activation: {
        type: 'exitIntent',
        cooldownDays: 7
      },
      headline: 'Need help before you go?',
      message: 'Ask Nobi for a recommendation.',
      ctaLabel: 'Ask AI',
      suggestionPrompts: [
        'Help me choose',
        'Compare my options'
      ],
      visibleUrlPatterns: ['/products/*'],
      hiddenUrlPatterns: ['/checkout', '/account/*'],
      schedule: null
    }
  }
});

Configuration

Option	Default	Description
`enabled`	`false`	Enables the Popup.
`activation`	`{ type: 'exitIntent', cooldownDays: 7 }`	Primary trigger rule. Popup is normally used with `exitIntent`.
`activation.type`	`exitIntent`	Supported values include `exitIntent`, plus the shared triggered-element values `always`, `timeOnPage`, `scrollDepth`, `idle`, `returningVisitor`, `searchReferral`, and `llmReferral`.
`activation.cooldownDays`	`7`	For exit intent, controls how many days to wait before showing again for the same merchant and browser.
`activation.conditions`	`[]`	Optional extra gates. Supported condition types are `timeOnPage`, `scrollDepth`, and `idle`.
`activation.conditionMode`	`any`	When multiple extra gates are configured, use `any` or `all` to decide whether one or every gate must match.
`headline`	`null`	Optional popup headline. Runtime fallback is `What were you looking for?`.
`message`	`null`	Optional merchant-authored popup message. Runtime fallback is `Tell us what you were looking for, and we can help from here.`
`ctaLabel`	`Ask AI`	Optional CTA label for the popup submit button. The dashboard setup currently focuses on headline, message, and suggestions.
`suggestionPrompts`	`[]`	Optional merchant-configured prompts shown as popup suggestion pills. Empty values are removed and at most three prompts render.
`visibleUrlPatterns`	`[]`	Relative path patterns where the popup may appear. Empty means all pages unless hidden by `hiddenUrlPatterns`.
`hiddenUrlPatterns`	`[]`	Relative path patterns where the popup must not appear. Hidden paths override visible paths.
`schedule`	`null`	Optional day and time window configuration. `null` means always active when trigger and page rules match.

Exit intent behavior

On desktop, exit intent fires when the visitor moves toward the top of the viewport or browser chrome. Popup has its own session and cooldown behavior, so it can appear independently from non-exit prompts such as Message Pill and Message Card.

Visitor-entered popup text is submitted as visitor-authored text when the chat opens. Suggestion prompts should come from merchant configuration or supported runtime data.

Styling

The Popup renders as a dark overlay with a top-positioned card.

Style area	Default behavior
Backdrop	Fixed full-screen overlay, `rgba(17, 24, 39, 0.58)` when visible, `2147483646` z-index.
Card position	Aligned near the top with `clamp(64px, 10vh, 108px)` top padding, centered horizontally.
Card size	White card, max width `820px`, full available width, `22px` border radius, large shadow.
Intro	Two-column layout with assistant badge, eyebrow, headline, and message.
Composer	Rounded search-style input row with icon, text input, and CTA button. On mobile it stacks into a vertical composer.
Suggestion prompts	Inline pill buttons using the Nobi suggestion pill CSS variable system.
Animation	Backdrop fades in over `0.25s`; card fades and moves from `translateY(-10px) scale(0.98)` to full size.

Suggestion prompts use the same stable CSS variables as Nobi suggestion pills:


:root {
  --nobi-suggestion-pill-background: #E6EDFDBF;
  --nobi-suggestion-pill-text-color: #0C2752;
  --nobi-suggestion-pill-hover-background: #d2dcf3;
  --nobi-suggestion-pill-border-radius: 20px;
  --nobi-suggestion-pill-padding: 8px 16px;
}

Popup also exposes stable public CSS hooks for merchant styling:


.nobi-popup-backdrop {
  background: rgba(15, 23, 42, 0.64);
}

.nobi-popup {
  max-width: 760px;
  border-radius: 18px;
}

.nobi-popup__headline {
  color: #111827;
  font-size: 28px;
}

.nobi-popup__composer-box {
  border-color: #111827;
  box-shadow: none;
}

.nobi-popup__cta {
  background: #111827;
}

.nobi-popup__suggestion {
  border: 1px solid #cbd5e1;
}

CSS hook reference

.nobi-popup-backdrop - Full-screen overlay behind the popup.

.nobi-popup-backdrop--visible - Applied while the overlay is visible.

.nobi-popup-backdrop--dismissing - Applied while the overlay is dismissing.

.nobi-popup - Main popup card.

.nobi-popup--visible - Applied while the card is visible.

.nobi-popup--dismissing - Applied while the card is dismissing.

.nobi-popup__dismiss - Close button in the card.

.nobi-popup__content - Inner content wrapper.

.nobi-popup__intro - Intro row with the assistant badge and copy.

.nobi-popup__assistant-badge - Assistant badge container.

.nobi-popup__assistant-icon - Assistant icon inside the badge.

.nobi-popup__eyebrow - Small eyebrow text above the headline.

.nobi-popup__headline - Main popup headline.

.nobi-popup__message - Popup body message.

.nobi-popup__composer - Form around the input row.

.nobi-popup__composer-label - Accessible label for the input.

.nobi-popup__composer-box - Visual input row container.

.nobi-popup__search-icon - Search icon inside the input row.

.nobi-popup__input - Visitor text input.

.nobi-popup__cta - Submit button that opens Nobi.

.nobi-popup__suggestions - Suggestion prompt group.

.nobi-popup__suggestion - Individual suggestion prompt pill.

.nobi-popup__suggestion-icon - Icon inside each suggestion prompt pill.

Use these classes in the merchant stylesheet for overrides that are not available in the dashboard. Popup suggestion pills also support the shared Nobi suggestion pill CSS variables shown above.

Troubleshooting

Popup not appearing: confirm modal.enabled is true or Popup is set live in the dashboard.

Exit intent does not fire: test on desktop and move the pointer out through the top edge of the viewport.

Popup appearing on the wrong page: check visibleUrlPatterns and hiddenUrlPatterns.

Popup appears too early or too late: check activation, extra conditions, and conditionMode.

Suggestion pills are missing: confirm suggestionPrompts contains non-empty strings. Empty strings are filtered out.

Popup appears only once: clear sessionStorage.nobi_proactive_engagement while testing. Exit-intent cooldown can also be stored in localStorage.nobi_triggered_element_history.

Scheduling

Popup supports schedules from the setup dialog under Website UX > UX Elements > Triggered. Times are evaluated in the merchant timezone. When no schedule is configured, the popup can run whenever its trigger and page rules match.

Hidden Pages

Use hidden pages to exclude checkout, account, admin, or other sensitive paths. Patterns are relative paths such as /checkout or wildcard paths such as /admin/*. Hidden paths override allowed paths for this element.

Popup What it is When to use Set up in Triggered elements Advanced JavaScript configuration Configuration Exit intent behavior Styling CSS hook reference Troubleshooting Scheduling Hidden Pages