Suggestion Pills

Suggestion Pills

Preview (try it below):

What it is

• Default carousel: Prompts sit in a single row with caret icons so visitors can page through pills without breaking the page layout.

• Multi-row grid: When space allows, the pills can wrap into multiple rows (no carousel), presenting more prompts without interaction.

When to use

• Detail pages where you already surface Nobi recommendations and want a lightweight entry point higher on the page.

• On the homepage near the hero, to increase engagement

Basic usage

1. Install the primary Nobi script (see the Quick Start guide).

2. Place the custom element where you want the pills to render:

<!-- Default: 3 carousel pills -->
<nobi-suggestion-pills pill-count="3"></nobi-suggestion-pills>

<!-- Multi-row example with up to 6 pills -->
<nobi-suggestion-pills pill-count="6" multi-row="true"></nobi-suggestion-pills>

<!-- Specify pill types (comma-separated) -->
<nobi-suggestion-pills pill-count="3" pill-types="cross-sell,qa"></nobi-suggestion-pills>

<!-- Explicit product ID (optional — auto-detected on most platforms) -->
<nobi-suggestion-pills pill-count="3" product-id="YOUR_PRODUCT_ID"></nobi-suggestion-pills>

Configuration options

Layout modes

• Single row (default): Pills are rendered inside the assistant carousel, so horizontal swipes/taps reveal the remaining prompts even in tight page layouts.

• Multi-row: Pills wrap using flexbox and respect -nobi-suggestion-pills-gap. Use this when you have space and want every prompt visible at once.

Click behavior & page integration

Analytics & events

• Suggestion Pills Container Viewed — fired once when the container reaches 25% viewport visibility. Payload includes entryPoint, merchantId, and productInternalId.

• Custom Instruction Followups Viewed — fired per pill when a new set renders. Includes pillText and pillType.

• Click Custom Pill — fired on click with pillText, pillType, productInternalId, and EntryPoint.SuggestionPills.

Styling

CSS Custom Properties

Public CSS classes

• .nobi-suggestion-pills-container – wraps the heading + pill region. Useful for margins or layout tweaks.

• .nobi-suggestion-pill – applied to each pill button. Pair with .nobi-suggestion-pill:hover for hover states.

• .nobi-suggestion-pill:hover – target hover/focus styles when you want more control than the CSS variables provide.

• .nobi-suggestion-pill-icon – targets the leading sparkle icon.

Example overrides

:root {
  --nobi-suggestion-pill-background: #fff;
  --nobi-suggestion-pill-text-color: #212121;
  --nobi-suggestion-pill-border: 1px solid #e0e0e0;
  --nobi-suggestion-pill-hover-background: #212121;
  --nobi-suggestion-pill-hover-text-color: #fff;
  --nobi-suggestion-pill-icon-color: #ff6b35;
  --nobi-suggestion-pills-gap: 12px;
}

.product-media .nobi-suggestion-pills-container {
  margin-top: 1rem;
  justify-content: flex-start;
}

Troubleshooting

• No pills rendering: The cache may not have been primed yet. The first time pills are requested on a page, the system generates them (this can take a few seconds). Subsequent requests use cached results.

• Pills expanding width of parent: The suggestion pills container will take up the full width allotted to it. You can constrain its width by setting an explicit width or max-width on the nobi-suggestion-pills-container class, or by setting the width or max-width on any of its parent elements.

Accessibility