Popup | Triggered Elements | Website UX Elements | Implementation

Popup is a dashboard-controlled overlay for high-intent visitor moments, most commonly exit intent. It shows a focused card with a headline, message, input, CTA button, and optional suggestion prompts.

When to use

Use Popup when the moment is important enough to take focus, such as when a desktop visitor appears to be leaving. Use it sparingly because it interrupts the page more than Message Pill or Message Card.

Set up in Triggered elements

Set up Popup from Website UX > UX Elements > Triggered.

Choose Popup.

Click Setup.

Select the visitor moment under Show when, usually On exit intent.

Add the headline, message, and optional suggestion prompts.

Add allowed pages, hidden pages, and active hours if needed.

Click Set Live.

No HTML element is needed after the Nobi script is installed.

Configuration

Setting	Default	What it controls
Set Live	Off	Allows the Popup to appear when its trigger, page rules, and schedule match.
Show when	On exit intent	Main visitor moment. Popup is usually used with exit intent, but it uses the same triggered-element system as the other elements.
Do not show again for	7 days	Cooldown for exit-intent popup display in the same browser.
Additional conditions	None	Optional extra gates for time on page, scroll depth, or idle time.
Condition matching	Any	When multiple extra gates are enabled, decide whether any one or all of them must match.
Headline	What were you looking for?	The main heading in the popup.
Message	Tell us what you were looking for, and we can help from here.	The helper text shown below the headline.
Suggested prompts	None	Optional prompt pills shown inside the popup. Blank prompts are hidden and up to three render.
Allowed pages	All pages	Relative paths where the popup may appear.
Hidden pages	None	Relative paths where the popup must not appear. Hidden pages override allowed pages.
Active hours	Always active	Optional schedule for days and time windows.

Advanced JavaScript configuration

Most merchants should use the dashboard. Advanced setups can pass assistantConfiguration.modal in the Nobi initialization call:


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'],
      schedule: null
    }
  }
});

Exit intent behavior

On desktop, exit intent is detected when the visitor moves toward the top of the viewport or browser chrome. The 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 text is submitted as visitor-authored text when chat opens. Suggestion prompts should come from merchant configuration or supported runtime data.

Styling

Popup uses a dark full-screen overlay and a white card placed near the top of the viewport. The card includes a small assistant badge, headline, message, input row, CTA button, and optional suggestion prompt pills.

Style area	Default behavior
Backdrop	Dark overlay over the full page.
Card	White card, wide desktop layout, rounded corners, large shadow, positioned near the top.
Input	Rounded search-style row with an icon, text input, and CTA button.
Suggestions	Optional pill buttons below the input row.
Mobile	Card uses smaller padding and the input row stacks vertically.

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 Popup is set live and that the trigger has actually matched.

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

Popup appears on the wrong page: check allowed pages and hidden pages.

Popup appears too early or too late: check Show when, additional conditions, and condition matching.

Suggestion prompts are missing: confirm each prompt field contains non-empty text.

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

Schedules limit Popup to specific days and time windows. 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 support exact paths such as /checkout and wildcards such as /admin/*. Hidden pages override allowed pages.

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