Programmatic API | Components API | Developers Guide

Use the JavaScript API when you want to open/close Nobi from your own UI (buttons, forms, menu items) instead of—or in addition to—the built‑in UX elements.

Nobi exposes a small global on window.Nobi. Calls made before the app finishes booting are queued and replayed automatically, so you can call Nobi.openChat() as soon as your page loads.

Example


<!-- 1) Load Nobi -->
<script src="https://assistant-script.nobi.ai/nobi.bundle.js"></script>
<script>
  // 2) Initialize (merchantId required)
  Nobi.initialize({ merchantId: "YOUR_MERCHANT_ID" });

  // 3) Anywhere in your code: open/close
  Nobi.openChat();
  
  // Or add an optional message:
  // Nobi.openChat({ message: "Show me trail running shoes under $120" });
  
  // Close the chat
  // Nobi.closeChat();
</script>

API

`Nobi.initialize(config)`

Boots the app and attaches the UI container to the page.

Required: merchantId: string

Optional: assistantConfiguration: object, debugMode: boolean


Nobi.initialize({
  merchantId: "YOUR_MERCHANT_ID",
  assistantConfiguration: {/* optional */},
  debugMode: false
});

`Nobi.openChat(options?)`

Opens the assistant drawer. Accepts an optional payload to seed context.


// Options are all optional
{
  message?: string;                    // preset shopper question
  assistantMessage?: string | null;    // preset assistant greeting/CTA
  categories?: any;                    // pass category identifiers your setup expects
  cartProductVariantInternalId?: string | number; // preattach a specific variant
  cartProductInternalId?: string | number;        // preattach a product
  hideQuickAdd: true | false           // setting this to true will hide the quick add overlay
}

Examples:


// Open empty
Nobi.openChat();

// Open with a preset question
Nobi.openChat({ message: "Show me gifts under $50" });

// Open targeting a context (categories/cart)
Nobi.openChat({
  categories: ["running", "trail"],
  cartProductInternalId: "12345",
  cartProductVariantInternalId: "12345-RED-10"
});

// Force a specific entry point (falls back to your configured default)
Nobi.openChat({ entryPoint: "chat" });

`Nobi.closeChat()`

Closes the assistant drawer.

`Nobi.isChatOpen()` → `boolean`

Returns whether the drawer is currently open.

Safe to call early: Before the app binds its live handlers, openChat/closeChat calls are queued and replayed after initialization.

Common patterns

1) Button that opens Nobi


<button id="open-nobi">Shop with AI</button>
<script>
  document.getElementById('open-nobi').addEventListener('click', () => {
    Nobi.openChat();
  });
</script>

2) Form that submits a question and opens Nobi


<form id="ask-nobi">
  <input id="nobi-msg" placeholder="Ask Nobi…" />
  <button type="submit">Ask</button>
</form>
<script>
  document.getElementById('ask-nobi').addEventListener('submit', (e) => {
    e.preventDefault();
    const msg = document.getElementById('nobi-msg').value.trim();
    if (!msg) return;
    Nobi.openChat({ message: msg });
  });
</script>

3) Open with predefined assistant copy (promo/CTA)


Nobi.openChat({
  assistantMessage: "Tell me who you're shopping for and a price range—I'll curate picks."
});

Behavior & lifecycle

Queue & replay: If you call Nobi.openChat() before Nobi.initialize(...), the call is stored and replayed once the app is ready.

Container: The app mounts into a div with id nobi-app-container that is appended to <body> automatically.

Styles: In production, Nobi injects its stylesheet (main.css) automatically.

Troubleshooting

Nobi is undefined → Make sure the script tag is present before you call the API.

isChatOpen() always false on first tick → Expected until the app binds live handlers; initialize first.

Nothing renders → Ensure merchantId is provided to Nobi.initialize(...).

Layout tight in headers → Use the Styling Guide’s compact tokens to reduce padding/font-size in that region.

Notes for advanced setups

Entry points: entryPoint selects a specific UI entry context if your configuration defines multiple. If unsure, omit and the default entry point will be used.

Categories & cart context: Pass whatever identifiers your Nobi setup expects (e.g., category slugs, product/variant IDs). If not needed, omit these.

Programmatic API (JavaScript)Example API Nobi.initialize(config)Nobi.openChat(options?)Nobi.closeChat()Nobi.isChatOpen() → boolean Common patterns 1) Button that opens Nobi 2) Form that submits a question and opens Nobi 3) Open with predefined assistant copy (promo/CTA)Behavior & lifecycle Troubleshooting Notes for advanced setups