Integrated Elements

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

Integrated Elements

Integrated elements are Nobi components you place inside your site layout, such as headers, product pages, and content blocks. Use them when visitors already expect a search box, button, or suggestion prompt.

When to use integrated elements

  • Use the Search Bar in headers and search pages.
  • Use the Ask AI Button near product actions, navigation, or help areas.
  • Use Suggestion Pills Row when you want a group of curated prompts directly in page content.
  • Use Single Suggestion Pill when one focused prompt is enough.
  • Use the JavaScript API for custom controls that open Nobi from your own interface.

Available integrated elements

Setup path

In the dashboard, go to Website UX, open UX Elements, and choose Integrated. Pick the element, open it in the playground if needed, then copy the setup snippet into your site.