Button

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

Reporting

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

Developers Guide

Single Suggestion Pill

Programmatic API (JavaScript)

Chat Modal

Styling The Container And Its Elements

Styling Message Elements

Styling Products

Customizing The Quick Add Overlay

Beta Products

Beta Products Overview

Cart Product Recommendations

PDP Product Recommendations

PDP Assistant

References

Release Notes

Preview (try it below):

What it is

A drop-in call-to-action that launches Nobi’s conversational shopping experience.

When to use

Ideal for the hero / nav bar and shoppers tend to use this as a “ChatGPT shopping in your store” experience.

Quick Add

After installing the main Nobi script (see the Quick Start Guide), place the custom element where you want the button to render.


<!-- Minimal usage -->
<nobi-button></nobi-button>

A button renders where the tag is placed.

Attributes

Only the attributes below affect this variant.

Attribute	Type	Default	Description
`additional-class-names`	string	–	Space‑separated class names applied to the host element for styling/layout integration.
`button-label`	string	`"Shop With AI"`	Visible label.
`is-text`	`"true"` \| `"false"`	`"false"`	Render as a text link style instead of a filled button.
`icon-url`	string (URL)	(built‑in icon)	Override the default icon asset.
`hide-icon`	`"true"` \| `"false"`	`"false"`	Hide the leading icon.
`id`	string	–	The HTML id of the element to be applied to the underlying component
`initial-message`	string	-	Pre-populate the chat drawer with this message when the button is clicked
`on-click`	string	-	JavaScript function name (as a string) to execute when button is clicked, before opening the Nobi chat drawer. Security Note: Only function references from the global window object are supported - no inline functions or eval() for security reasons.
`use-search-mode-at-launch`	`"true"` \| `"false`"	-	When true, Nobi will use the first message to run a fast, semantic search, rather than trying a slower (but possibly more accurate) conversational, reasoned response
`hide-quick-add`	`"true"` \| `"false"`	-	When set to true, the quick add overlay will not show

Examples

1) Primary button with icon (default):


<nobi-button></nobi-button>

2) Text link style (no icon):


<nobi-button
	id="my-button-id"
  button-label="Shop with AI"
  is-text="true"
  hide-icon="true">
</nobi-button>

3) Custom icon + design system classes:


<nobi-button
	id="my-button-id"
  button-label="Find with AI"
  icon-url="https://cdn.example.com/brand/ai.svg"
  additional-class-names="btn btn-primary btn-lg">
</nobi-button>

Behavior

Clicking the button opens Nobi’s assistant

Styling

CSS Custom Properties

Easily customize button appearance using CSS variables:


:root {
  /* Background & Colors */
  --nobi-button-background: #007bff;
  --nobi-button-text-color: #ffffff;
  --nobi-button-hover-background: #0056b3;
  --nobi-button-hover-text-color: #ffffff;

  /* Typography */
  --nobi-button-font-family: inherit;
  --nobi-button-font-size: 14px;
  --nobi-button-font-weight: normal;
  --nobi-button-text-transform: none;

  /* Layout */
  --nobi-button-padding: 10px 16px;
  --nobi-button-border-radius: 4px;
  --nobi-button-border: none;

  /* Effects */
  --nobi-button-hover-transform: none;
  --nobi-button-hover-box-shadow: none;

  /* Mobile Responsive */
  --nobi-button-padding-mobile: 12px 16px;
}

ID-Based Styling

Target specific buttons by their custom ID:


/* Style header button specifically */
#header-shop-button {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 600;
}

/* Style hero button differently */
#hero-cta-button {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 25px;
}

Global Class Styling

Style all buttons consistently:


.nobi-button {
  transition: all 0.3s ease;
  font-weight: 500;
}

.nobi-text-button {
  border-bottom: 1px dotted currentColor;
}

Placement Ideas

PDP: below Add‑to‑Cart or in the help/fit guidance area.

Header/Nav: alongside the search or account/cart icons.

Home/Landing: hero section near primary CTAs.

No‑results/Empty State: offer AI help when keyword search returns nothing.

Troubleshooting

Button not rendering: ensure the script is present; the element will render after nobi-ready fires.

Multiple buttons rendering: check for duplicate elements or multiple script initializations.

Accessibility

The mounted control is keyboard‑focusable and clickable by default.

Set a clear button-label for screen readers.

If using is-text="true", ensure contrast and focus state are visible within your theme.

Button Preview (try it below):What it is When to use Quick Add Attributes Examples Behavior Styling CSS Custom Properties ID-Based Styling Global Class Styling Placement Ideas Troubleshooting Accessibility