Quick Start Guide

GET UP AND RUNNING IN MINUTES

Getting Started

Welcome! This quick start shows you how to add Nobi to your site using a single custom element tag, verify that it works, and understand the minimum configuration. It assumes you want the simplest path to production.
What you’ll build: add a Shop With AI button to your site using <nobi-assistant variant="button">.
notion image

1) Prerequisites

  • A public website where you can edit HTML (or a dev/staging environment).
  • Your merchant ID (provided by Nobi during onboarding).
  • Optionally, a staging page where you can test with the query string ?nobi-test=1 or ?show-nobi=1 (enables extra logs).

2) Include the script

Add the Nobi script once on any page where you want Nobi placements.
<script src="https://assistant-script.nobi.ai/nobi.bundle.js" onload="window.Nobi.initialize({ merchantId: 'MERCHANT_ID' });"></script>
  • The script registers the <nobi-assistant> element and dispatches a nobi-ready event when the renderer is ready.
  • It’s safe to place <nobi-assistant …> before or after the script; rendering will wait for nobi-ready if needed.
Advanced / local dev: If you’re bundling Nobi yourself, call registerNobiElement() once on app startup. The element listens for nobi-ready and renders when your app dispatches it.

3) Add a placement

You can add multiple placements to a page. In this guide, we’ll show you how to implement the simplest one, our Shop With AI button.
All you need to do is add the nobi-assistant tag to your site with the right variants and attributes to wherever you want it to show up in your site:

Shop With AI Button

<nobi-assistant
  variant="button"
  button-label="Shop With AI"
  is-text="false"
  icon-url="https://cdn.example.com/icons/nobi.svg"
  additional-class-names="btn btn-primary"
  hide-icon="false">
</nobi-assistant>
Attributes
  • variant (required): button
  • button-label (optional): visible label (default: Shop With AI)
  • is-text (optional): true to render as a text link
  • icon-url (optional): override the default icon
  • additional-class-names (optional): space‑separated class names to apply to the host element
  • hide-icon (optional): true to hide the icon
Design note: The host element is a normal DOM node—your site’s CSS can target it directly. Use additional-class-names to align sizing/spacing with your design system.

Styling Your Button (Optional)

Customize your button's appearance with CSS:
/* Add to your site's CSS */
:root {
  --nobi-button-background: #your-brand-color;
  --nobi-button-text-color: white;
  --nobi-button-border-radius: 8px;
}
For specific buttons, add an id:
<nobi-assistant variant="button" id="main-shop-button" button-label="Shop With AI"></nobi-assistant>
#main-shop-button {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 600;
}

4) Verify your installation

Simply open up your site and watch for the new button.
Troubleshooting
  • Unknown variant: confirm the variant is button.
  • No render / waiting: ensure the script tag is present. The element waits for the global nobi-ready event; once fired, it renders.

6) Security & data

Nobi indexes your product catalog and selected site content for semantic retrieval. No PII required. You control the sources and exclusions during onboarding.