Button

START NOBI WITH THE CLICK OF A BUTTON

Component: Button

Our Shop With AI Button is a drop‑in call‑to‑action that launches Nobi’s conversational shopping experience or AI product search from anywhere on your site. Ideal for PDPs (below Add to Cart), nav bars, landing pages, and empty‑state search results.
notion image

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-assistant variant="button"></nobi-assistant>
  • A new button will show up in place

Attributes

Only the attributes below affect this variant.
Attribute
Type
Required
Default
Description
variant
string
Yes
–
Must be button.
button-label
string
No
"Shop With AI"
Visible label.
is-text
"true" | "false"
No
"false"
Render as a text link style instead of a filled button.
icon-url
string (URL)
No
(built‑in icon)
Override the default icon asset.
additional-class-names
string
No
–
Space‑separated class names applied to the host element for styling/layout integration.
hide-icon
"true" | "false"
No
"false"
Hide the leading icon.
id
string
No
–
The HTML id of the element to be applied to the underlying component

Examples

1) Primary button with icon (default):
<nobi-assistant variant="button"></nobi-assistant>
2) Text link style (no icon):
<nobi-assistant
	id="my-button-id"
  variant="button"
  button-label="Shop with AI"
  is-text="true"
  hide-icon="true">
</nobi-assistant>
3) Custom icon + design system classes:
<nobi-assistant
	id="my-button-id"
  variant="button"
  button-label="Find with AI"
  icon-url="https://cdn.example.com/brand/ai.svg"
  additional-class-names="btn btn-primary btn-lg">
</nobi-assistant>

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;
}

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.

Lifecycle & Logs (Advanced)

  • On connect, the element begins listening for nobi-ready.
  • When the runtime is ready, it calls the renderer with (host, variant, config) and stores a cleanup function.
  • On disconnect, cleanup is invoked automatically.
If you see Unknown variant, confirm variant="button".

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.

Notes

  • Merchant/store identity is configured by your Nobi installation. The component itself does not require a merchant-id attribute.
  • This component does not currently accept behavioral routing attributes (e.g., native-action). Those apply to the Search Bar (documented later).