Message Card | Triggered Elements | Website UX Elements | Implementation

Message Card is a dashboard-controlled prompt card with a message, close button, and call-to-action button. It appears after a configured visitor moment and opens Nobi when the visitor clicks the CTA.

When to use

Use Message Card when a short pill is not enough context, but a full popup would be too interruptive. It is best for moments where the visitor has shown intent and a clear button label helps, such as after scrolling, going idle, returning, or arriving from search.

Set up in Triggered elements

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

Choose Message Card.

Click Setup.

Select the visitor moment under Show when.

Add the message and button label.

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 Card to appear when its trigger, page rules, and schedule match.
Show when	When idle	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 prompt text shown in the card body.
Button label	Chat with us	The CTA text shown at the bottom of the card.
Allowed pages	All pages	Relative paths where the card may appear.
Hidden pages	None	Relative paths where the card 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.toast in the Nobi initialization call:


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

Behavior

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

Clicking the CTA opens Nobi with the configured prompt context.

Dismissing the card suppresses it for the current session.

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

Floating Bar and Compact Button can still appear independently.

Styling

Message Card is larger than Message Pill and uses a fixed card anchored near the lower-right corner. On mobile, it expands to the lower viewport width.

Style area	Default behavior
Position	Bottom-right on desktop, lower full-width treatment on small screens.
Container	White card, light border, rounded corners, and elevated shadow.
Message	Medium gray body text with comfortable line height.
CTA	Full-width indigo button with white text.
Dismiss	Small circular close button in the card header.

Message Card exposes stable public CSS hooks for merchant styling:


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

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

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

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

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

Scheduling

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

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