Message Pill

Message Pill is a dashboard-controlled triggered prompt. It renders a compact pill near the page edge and opens the Nobi chat drawer when the visitor clicks it.

Developers do not place a custom element in the page template. Install the Nobi script once, then configure Message Pill from Website UX > UX Elements > Triggered.

When to use

Use Message Pill for a lightweight behavioral nudge that should not cover page content. It works best for short prompts after a visitor qualifies for time on page, scroll depth, idle behavior, returning visitor, search referral, or LLM referral rules.

Set up in Triggered elements

Open Website UX > UX Elements > Triggered.

Choose Message Pill.

Click Setup.

Choose the trigger, message, page rules, schedule, and auto-dismiss timing.

Click Set Live.

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

Advanced JavaScript configuration

Most merchants should configure Message Pill in the dashboard. Advanced setups can pass the pill configuration inside assistantConfiguration when initializing Nobi:


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

Configuration

Option	Default	Description
`enabled`	`false`	Enables the Message Pill.
`activation`	`{ type: 'timeOnPage', delaySeconds: 30 }`	Primary trigger rule. This object controls when the pill can appear.
`activation.type`	`timeOnPage`	Supported values: `always`, `timeOnPage`, `scrollDepth`, `idle`, `returningVisitor`, `searchReferral`, and `llmReferral`.
`activation.delaySeconds`	`30`	Used with `timeOnPage` to wait for active browsing time.
`activation.depthPercent`	`50`	Used with `scrollDepth` to wait for a scroll percentage.
`activation.idleSeconds`	`60`	Used with `idle` to wait until the visitor stops interacting.
`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.
`message`	`null`	Optional merchant-authored pill text. Keep it short because the pill is a compact surface.
`autoDismissSeconds`	`15`	Seconds before the pill hides automatically.
`visibleUrlPatterns`	`[]`	Relative path patterns where the pill may appear. Empty means all pages unless hidden by `hiddenUrlPatterns`.
`hiddenUrlPatterns`	`[]`	Relative path patterns where the pill 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.

Trigger behavior

Message Pill is a non-exit prompt. It follows the one non-exit prompt per session rule, so it will not keep competing with Message Card in the same session. Floating Bar and Compact Button can still appear independently.

Prompt elements are suppressed after the visitor opens chat manually or submits a lead in the same session.

Styling

The Message Pill renders as a fixed launcher near the bottom-right corner.

Style area	Default behavior
Position	Fixed, bottom `80px`, right `20px` on desktop. On screens up to `480px`, it spans left `16px` to right `16px` near the bottom.
Container	White pill, `24px` border radius, light border, `0 4px 12px rgba(0, 0, 0, 0.12)` shadow.
Text	`14px` system font, single-line ellipsis on desktop, wraps on mobile.
Dismiss control	Small circular close button inside the pill.
Animation	Fades and slides up over `0.3s`; dismissal fades and slides down over `0.3s`.
Z-index	`2147483645`.

Message Pill exposes stable public CSS hooks in addition to its internal styles. Use these hooks in the merchant stylesheet when the dashboard controls are not enough:


.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;
}

.nobi-message-pill--dismissing {
  pointer-events: none;
}

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 pill.enabled is true or Message Pill is set live in the dashboard.

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

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

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

Scheduling

Message Pill 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 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 are relative paths such as /checkout or wildcard paths such as /admin/*. Hidden paths override allowed paths for this element.

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