Message Pill | Triggered Elements | Website UX Elements | Implementation

Message Pill is a small dashboard-controlled prompt that appears near the page edge after a configured visitor moment. It opens Nobi when clicked and can disappear automatically after a short delay.

When to use

Use Message Pill when you want a light nudge that does not cover important page content. It works well for short prompts such as sizing help, product guidance, or search assistance after a visitor has spent time on a page, scrolled, gone idle, returned, or arrived from search or an LLM.

Set up in Triggered elements

Set up Message Pill from Website UX > UX Elements > Triggered.

Choose Message Pill.

Click Setup.

Select the visitor moment under Show when.

Add the pill message and auto-dismiss timing.

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 Message Pill to appear when its trigger, page rules, and schedule match.
Show when	After time on page	Main visitor moment. Options include page load, time on page, scroll depth, idle, returning visitor, search engine visitor, LLM referral, and exit intent where supported.
Delay seconds	30	Used when Show when is After time on page.
Scroll depth	50%	Used when Show when is On scroll depth.
Idle time	60 seconds	Used when Show when is When idle.
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.
Message	Merchant configured	The short text shown inside the pill.
Auto-dismiss	15 seconds	How long the pill stays visible before hiding automatically.
Allowed pages	All pages	Relative paths where the pill may appear.
Hidden pages	None	Relative paths where the pill 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.pill in the Nobi initialization call:


window.Nobi.initialize({
  accountId: 'YOUR_ACCOUNT_ID',
  assistantConfiguration: {
    pill: {
      enabled: true,
      activation: { type: 'timeOnPage', delaySeconds: 30 },
      message: 'Need help finding the right option?',
      autoDismissSeconds: 15,
      visibleUrlPatterns: ['/products/*'],
      hiddenUrlPatterns: ['/checkout'],
      schedule: null
    }
  }
});

Behavior

The pill appears only after its trigger, additional conditions, page rules, and schedule match.

Clicking the pill opens Nobi with the configured prompt context.

Dismissing or auto-dismissing the pill suppresses it for the current session.

Message Pill and Message Card share the one non-exit prompt per session rule.

Floating Bar and Compact Button can still appear independently.

Styling

Message Pill is intentionally compact. By default it is fixed near the bottom-right corner, uses a white rounded pill container, has a small close button, and animates with a short slide and fade. On mobile it spans most of the lower viewport width so the text remains readable.

Style area	Default behavior
Position	Bottom-right on desktop, lower full-width treatment on small screens.
Shape	Rounded pill with light border and shadow.
Text	Single-line ellipsis on desktop, wrapping on mobile.
Dismiss	Small circular close button inside the pill.

Message Pill exposes stable public CSS hooks for merchant styling:


.nobi-message-pill {
  right: 24px;
  bottom: 96px;
  border-color: #111827;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
}

.nobi-message-pill__message {
  color: #111827;
  font-weight: 600;
}

.nobi-message-pill__dismiss {
  color: #6b7280;
}

CSS hook reference

.nobi-message-pill - Main pill container.

.nobi-message-pill--visible - Applied while the pill is visible.

.nobi-message-pill--dismissing - Applied while the pill is dismissing.

.nobi-message-pill__message - Pill message text.

.nobi-message-pill__dismiss - Close button inside the pill.

Use these classes in the merchant stylesheet for overrides that are not available in the dashboard.

Troubleshooting

Pill not appearing: confirm Message Pill is set live and that the trigger has actually matched.

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

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

Pill appears only once: clear sessionStorage.nobi_proactive_engagement while testing.

Scheduling

Schedules limit Message Pill to specific days and time windows. Times are evaluated in the merchant timezone. When no schedule is configured, the pill 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.

Message Pill Launch Component What it is When to use Set up in Triggered elements Configuration Advanced JavaScript configuration Behavior Styling CSS hook reference Troubleshooting Scheduling Hidden Pages