Suggestion Pills

PROMPT YOUR CUSTOMERS ANYWHERE

Suggestion Pills

Preview (try it below):

What it is

A drop-in entry point that shows LLM-generated suggestion pills. Each pill is a contextual nudge (“Find other suede Chelsea boots”, “Does this run true to size?”) that opens the Nobi assistant with the prompt pre-filled.
  • Default carousel: Prompts sit in a single row with caret icons so shoppers can page through pills without breaking the PDP layout.
  • Multi-row grid: When space allows, the pills can wrap into multiple rows (no carousel), presenting more prompts without interaction.

When to use

  • PDPs 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
👋 Note: suggestion pills are currently implemented as an internal A/B test. 50% of the time visitors won’t see pills. When they do, the pills will be evenly split by objective (optimizing for cross-sells vs. optimizing for answering questions on the current product). This is not segmented by shopper, so a shopper may see pills on one page and not on others.

Basic usage

  1. Install the primary Nobi script (see the Quick Start guide).
  1. 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>
The component automatically gathers PDP context (internal product ID, page title, URL, and meta description) and requests the appropriate pills.

Configuration options

Attribute
Type
Default
Description
pill-count
number (1–20)
3
Controls how many pills the component requests.
multi-row
"true" | "false"
false
When true, pills render in a wrapped flex grid with no carousel controls. Any truthy value enables the multi-line layout; omit the attribute or set it to "false" for the single-row carousel.

Layout modes

  • Single row (default): Pills are rendered inside the assistant carousel, so horizontal swipes/taps reveal the remaining prompts even in tight PDP layouts.
  • Multi-row: Pills wrap using flexbox and respect -nobi-suggestion-pills-gap. Use this when you have a static column beside the product image and want every prompt visible at once.

Click behavior & PDP integration

Clicking a pill opens the assistant and sends a relevant message or search request to Nobi’s backend.

Analytics & events

  • Suggestion Pills Container Viewed — fired once when the container reaches 25% viewport visibility (or immediately for the “none” variant). Payload includes variant, 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, variant, productInternalId, and EntryPoint.SuggestionPills.

Styling

CSS Custom Properties

Override these on :root, .nobi-suggestion-pills-container, or a scoped wrapper to match your design system.
Variable
Default
Description
-nobi-suggestion-pills-container-margin
1em 0
The margin for the pills container.
--nobi-suggestion-pill-background
#E6EDFDBF
Pill background color.
--nobi-suggestion-pill-text-color
#0C2752
Text color in the idle state.
--nobi-suggestion-pill-border
none
Full border declaration (1px solid #...).
--nobi-suggestion-pill-border-radius
20px
Radius for chip edges.
--nobi-suggestion-pill-padding
8px 22px
Inner padding for the button.
--nobi-suggestion-pill-font-size
0.89em
Base font size for pill labels.
--nobi-suggestion-pill-font-family
inherit
Font family override.
--nobi-suggestion-pill-hover-background
#d2dcf3
Hover/focus background.
--nobi-suggestion-pill-hover-text-color
#0C2752
Hover/focus text color.
--nobi-suggestion-pill-icon-color
#0C2752
Color for the sparkle icon.
--nobi-suggestion-pills-heading-color
inherit
Heading color when the component is embedded inside panels that supply a heading.
--nobi-suggestion-pills-heading-font-size
inherit
Heading font size.
--nobi-suggestion-pills-heading-font-family
inherit
Heading font family.
--nobi-suggestion-pills-gap
8px
Horizontal/vertical gap between pills (carousel and grid).

Merchant-facing 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: You might be in the holdout (variant: none) or the cache has not been primed. The first time pills are requested on a page, the system returns no content but creates the pills in the background so they are ready for the next visit, where they should show up.
  • 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

Each pill renders as a semantic button with visible focus states, supports keyboard activation, and inherits contrast updates through the CSS variables listed above. The carousel uses standard caret buttons for navigation, and the IntersectionObserver used for analytics does not interfere with focus handling.