Button

START NOBI WITH THE CLICK OF A BUTTON

Button

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;

  /* 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;

  /* Text Button Variables */
  --nobi-text-button-text-color: #007bff;
  --nobi-text-button-text-decoration: underline;
  --nobi-text-button-font-family: inherit;
  --nobi-text-button-font-size: inherit;
  --nobi-text-button-hover-text-color: #0056b3;
  --nobi-text-button-hover-text-decoration: underline;
}

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.