Programmatic API (Javascript)

START NOBI WITH CODE

Programmatic API (Javascript)

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://storage.googleapis.com/locusive_web_assistant/locusive-web-assistant.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
}
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.