Launch Components Overview

List view

Understanding Nobi
About Nobi (Overview)
Capabilities & How It Works
Nobi For Search
FAQs
Getting Started
Getting Started Checklist
Quick Start Guide
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

Launch Components Overview

Launch components are the entry points that allow your customers to interact with Nobi. Each component serves as a trigger that opens Nobi's chat modal, where customers can search for products, ask questions, and get personalized shopping assistance.You have full control over where and how Nobi appears on your site. You can use a single component or combine multiple components to give customers different ways to access Nobi depending on their context and needs.

Available Launch Components

All components are implemented as custom web components and require the Nobi script to be installed and run on the webpage where the custom component is used.
  • Search Bar (Dual Mode): A configurable search bar that gives customers the choice between your standard search experience or Nobi's AI-powered search and assistance.
  • Button: A standalone button that opens Nobi's chat modal when clicked. This component works great as a clear call-to-action for customers who want shopping assistance.
  • Search Mode Toggle: A simple toggle switch that integrates directly into your existing search bar, allowing customers to activate Nobi without replacing your current search interface.
  • Suggestion Pills: A container that displays nudges in the form of “pills”, that, when clicked, open Nobi’s chat modal with the message contained on the pill
  • JavaScript API: Open Nobi programmatically using JavaScript, giving you complete control over when and how the chat modal appears.

Customization Options

Every launch component can be customized to match your brand:
Visual styling - Colors, fonts, sizes, borders, shadows, and more using CSS
Behavior - Configure default modes, placeholder text, button labels, and interaction patterns
Placement - Position components anywhere on your site (header, sidebar, inline, floating)
Responsive design - Components automatically adapt to mobile and desktop, with additional customization available
See individual component guides for specific customization options