Single Suggestion Pill

Suggestion Pills

Preview (try it below):

What it is

A single, merchant-defined suggestion pill. Unlike the AI-generated <nobi-suggestion-pills> container, you specify exactly what text appears on the pill. When clicked, that text is sent directly to Nobi as the customer's first message.

When to use

  • When you need precise control over the prompt text
  • Campaign-specific CTAs like "Show me Black Friday deals"
  • Static prompts that don't need AI generation
  • A/B testing specific prompt variations
  • Combining with other pills for a curated set of options

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:
<!-- Single pill with custom text -->                                          <nobi-suggestion-pill text="Help me find my size"></nobi-suggestion-pill>
The component automatically gathers PDP context (internal product ID, page title, URL, and meta description) and requests the appropriate pills.
You can place multiple pills together:
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
	<nobi-suggestion-pill text="Find running shoes"></nobi-suggestion-pill>
	<nobi-suggestion-pill text="Best sellers"></nobi-suggestion-pill>
	<nobi-suggestion-pill text="What's on sale?"></nobi-suggestion-pill>
</div>

Configuration options

Attribute
Type
Default
Description
text
string
required
The message displayed on the pill, and consequently the message sent to Nobi’s assistant.

Click behavior

Clicking the pill opens the Nobi assistant and immediately sends the specified text as the customer's message.

Analytics & events

  • Click Custom Pill — fired on click with pillText, pillType: "custom", and EntryPoint: "Suggestion Pill"

Styling

Single suggestion pills use the same styling system as the Suggestion Pills launch component. All CSS custom properties and merchant-facing CSS classes apply.

Accessibility

The pill renders as a semantic button with visible focus states and supports keyboard activation. It inherits contrast updates through the same CSS variables as the Suggestion Pills container.