Message Card

Message Card is a dashboard-controlled triggered prompt card. It displays a short message with a call-to-action button and opens the Nobi chat drawer when the visitor clicks the CTA.

The persisted configuration key is toast, but the dashboard and public docs call the component Message Card.

When to use

Use Message Card when a visitor has shown enough intent to justify a larger prompt than Message Pill, but not enough interruption for a Popup overlay.

Set up in Triggered elements

Open Website UX > UX Elements > Triggered.

Choose Message Card.

Click Setup.

Choose the trigger, message, button label, 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 Message Card in the dashboard. Advanced setups can pass the toast configuration inside assistantConfiguration when initializing Nobi:


window.Nobi.initialize({
  accountId: 'YOUR_ACCOUNT_ID',
  assistantConfiguration: {
    toast: {
      enabled: true,
      activation: {
        type: 'idle',
        idleSeconds: 60,
        conditionMode: 'all',
        conditions: [
          { type: 'timeOnPage', delaySeconds: 30 }
        ]
      },
      message: 'Still deciding? Nobi can help narrow it down.',
      ctaLabel: 'Chat with us',
      visibleUrlPatterns: ['/products/*'],
      hiddenUrlPatterns: ['/checkout', '/account/*'],
      schedule: null
    }
  }
});

Configuration

Option	Default	Description
`enabled`	`false`	Enables the Message Card.
`activation`	`{ type: 'idle', idleSeconds: 60 }`	Primary trigger rule. This object controls when the card can appear.
`activation.type`	`idle`	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 card text.
`ctaLabel`	`Chat with us`	Label for the card CTA button.
`visibleUrlPatterns`	`[]`	Relative path patterns where the card may appear. Empty means all pages unless hidden by `hiddenUrlPatterns`.
`hiddenUrlPatterns`	`[]`	Relative path patterns where the card 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 Card is a non-exit prompt. It follows the one non-exit prompt per session rule, so it will not keep competing with Message Pill 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 Card renders as a fixed card 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 card, `320px` desktop width, `12px` border radius, light border, `0 8px 24px rgba(0, 0, 0, 0.14)` shadow.
Message	`14px` system font, `1.5` line height, medium gray text.
CTA	Full-width button, `8px` border radius, indigo background, white text, `14px` medium font.
Dismiss control	Small circular close button in the header.
Animation	Fades and slides in from the right over `0.4s`; dismissal reverses the same motion.
Z-index	`2147483645`.

Message Card 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-card {
  width: 360px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
}

.nobi-message-card__message {
  color: #111827;
  font-size: 15px;
}

.nobi-message-card__cta {
  background: #111827;
  border-radius: 999px;
}

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

CSS hook reference

.nobi-message-card - Main card container.

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

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

.nobi-message-card__header - Header row that contains the icon and dismiss control.

.nobi-message-card__icon - Nobi icon in the header.

.nobi-message-card__dismiss - Close button inside the card.

.nobi-message-card__message - Card message text.

.nobi-message-card__cta - CTA button that opens Nobi.

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

Troubleshooting

Card not appearing: confirm toast.enabled is true or Message Card is set live in the dashboard.

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

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

CTA text is wrong: check ctaLabel or the Button label field in the setup dialog.

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

Scheduling

Message Card 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 card 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 Card 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