Single Suggestion Pill

List view

Understanding Nobi
About Nobi (Overview)
Capabilities & How It Works
Nobi’s Search Mode
The Warmup Period
FAQs
Getting Started
Getting Started Checklist
Quick Start Guide
Previewing Nobi
Syncing Your Product Catalog
Installing Nobi For Shopify Stores
Implementing Nobi
Launch Components Overview
Search Bar Launch Component
Button Launch Component
Search Mode Toggle Launch Component
Suggestion Pills Launch Component
Single Suggestion Pill Launch Component
Javascript API For Launching Nobi
Implementation Examples
Add AI To Your Search Bar
Simplify Collections Pages With AI
Capture Bouncers From Search Results Page
Start A Conversation From Your Nav Bar
Accessibility
Knowledge Base
Knowledge Base Feature Overview
Adding Documents To Your Knowledge Base
Managing Documents In Your Nobi Knowledge Base
Merchandising
Merchandising Overview
Boosting Products
Burying Products
Slotting Products
Hiding Products
Redirects
Reporting
Reporting Overview
Performance Metrics
Insights
Custom Actions
Custom Actions Overview
Custom Actions Quick Start Guide
Custom Actions Use Cases And Examples
Query Overrides
Query Override Rules Overview
Managing Query Override Rules
Plans And Billing
Plans & Billing Overview
Managing Your Subscription
Usage & Limits
Developers Guide
Components API
Search Bar
Button
Search Mode Toggle
Suggestion Pills
Single Suggestion Pill
Programmatic API (JavaScript)
Chat Modal
Styling The Container And Its Elements
Styling Message Elements
Styling Products
Customizing The Quick Add Overlay
Custom Actions API
Events
Hooks
A/B Testing
Beta Products
Beta Products Overview
Cart Product Recommendations
PDP Product Recommendations
PDP Assistant
References
Release Notes
 

Single Suggestion Pill

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>
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.