Single Suggestion Pill Launch Component

List view

Understanding Nobi
About Nobi (Overview)
Capabilities & How It Works
Nobi For Search
Nobi’s Search Mode
Filtering
The Warmup Period
Search Quick Links
Visitor Memory And Personalization
Leads
Conversations
Nobi For Your Industry
Nobi for Ecommerce
FAQs
Getting Started
What You'll Need
Quick Start Guide
Previewing Nobi
Implementing Nobi
Installing Nobi
Installing Nobi For Shopify Stores
Syncing Your Product Catalog
Configuring Your Nobi Assistant
Implementation Examples
Add AI To Your Search Bar
Capture Bouncers From Search Results Page
Start A Conversation From Your Nav Bar
Website UX Elements Overview
Integrated Elements
Search Bar Launch Component
Ask AI Button Launch Component
Search Mode Toggle Launch Component
Suggestion Pills Row Launch Component
Single Suggestion Pill Launch Component
Javascript API For Launching Nobi
Triggered Elements
Floating Bar Launch Component
Compact Button Launch Component
Message Pill Launch Component
Message Card Launch Component
Popup Launch Component
Triggered Element Rules Guide
Additional Trigger Conditions Guide
Allowed URLs and Page Rules Guide
Proactive Elements Test Page
Accessibility
Remarketing Pixels
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
Integrated Elements
Search Bar
Button
Search Mode Toggle
Suggestion Pills
Single Suggestion Pill
Programmatic API (JavaScript)
Triggered Elements
Floating Bar
Compact Button
Message Pill
Message Card
Popup
Chat Modal
Styling The Container And Its Elements
Styling Message Elements
Styling Products
Customizing The Quick Add Overlay
Styling Filters
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 Launch Component

A Single suggestion pill is a clickable prompt with merchant-specified text that opens Nobi's chat modal with that message already sent. Use it when you want one focused prompt in a specific part of your page.
 
Preview:

Dashboard setup

Set up the Single suggestion pill from the Website UX Integrated page before copying code into your site.
  • Go to Website UX > UX Elements > Integrated.
  • Select Single suggestion pill to preview the element and review where it works best.
  • Use Add to site to copy the implementation snippet.
  • Use Try it out in the playground, or open Website UX > UX Elements > Playground, to test the element before adding it to your storefront.

How It Works

Add the single suggestion pill element to your page with a text attribute containing the message you want sent to Nobi. When visitors click the pill, Nobi opens and starts the conversation with that prompt.

When to Use a Single Suggestion Pill

  • Targeted prompts - When you know exactly what question or action makes sense in a specific location, like "Find my size" on a fit guide page
  • Seasonal campaigns - Create pills for specific promotions like "Show me Black Friday deals" or "Find Valentine's gifts"
  • FAQ nudges - Pre-empt any common objections you get with a prompt

Combining Multiple Pills

You can place multiple single suggestion pills together to create a curated set of options:
<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>

Styling

Single suggestion pills inherit the same styling system as the Suggestion pills row and can be customized to match your brand using CSS. Use them when one curated prompt is more helpful than a row of options.
For complete styling options, see the Suggestion pills documentation.