Quick Start Guide

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.

❗Make sure you’ve checked out What You’ll Need to ensure you’re ready to start.

What you’ll build: add Nobi’s search bar to your site using Nobi’s web components

1) Set Up Your Nobi Account

Before installing anything, create your Nobi account and complete the onboarding wizard. This gives Nobi the data it needs to be useful from the moment it goes live.

Review your business details — edit the auto-detected company name, description, and logo if needed.

Connect your product catalog — Shopify stores sync automatically. For other platforms, provide a CSV feed URL. You can skip this if you don't sell products.

Add knowledge base content — Nobi discovers pages from your site automatically. Select which ones to index, or add URLs manually.

Set your business objectives — tell Nobi what success looks like: driving purchases, capturing leads, booking appointments, or a custom goal.

Once you complete the wizard, you can preview Nobi from your dashboard before installing anything on your site.

2) Install the Nobi Script

Add the Nobi script into your site’s header or on any page where you want Nobi’s assistant or launch components to appear.


<script async src="https://assistant-script.nobi.ai/nobi.bundle.js" onload="window.Nobi.initialize({ accountId: 'YOUR_ACCOUNT_ID' });"></script>

⚠️ Make sure you replace the placeholder with your actual merchant ID before testing or going live. This entire snippet is provided to you on the “Installation” page of your Nobi dashboard.

A screenshot of Nobi’s installation instructions from the Nobi dashboard

ℹ️ Using Google Tag Manager? See our Installing Nobi guide for GTM-specific instructions.

3) Add a Launch Component

You can add multiple components to a page. In this guide, we’ll show you how to implement the Dual Mode Search Bar.:

All you need to do is add the nobi-search-bar tag to your site with the right variants and attributes to wherever you want it to show up in your site:


<nobi-search-bar
  default-mode="ai"
  size="regular"
  cta-variant="auto"
  show-mode-toggle="false"
  show-hint-row="false">
</nobi-search-bar>

For a list of all available attributes, see the page for the launch component that you would like to use. You can also use Nobi’s preview capability on your dashboard to try out Nobi before installing it on your site.

An example of Nobi’s preview capabilities

4) Verify Your Installation

Open your site in a browser and confirm the following:

The search bar (or other launch component) is visible on the page.

Clicking or typing into it opens the Nobi assistant.

Submitting a query returns results — either from your product catalog, knowledge base, or both.

Troubleshooting

Component not rendering: Check your browser's Network tab for nobi.bundle.js. If it's missing, verify the script tag is in your page's <head>. The component waits for the nobi-ready event before rendering.

No results or wrong results: Check that your product catalog has finished indexing in the Nobi dashboard. New catalogs can take a few minutes to process.

Merchant ID error: Ensure you replaced the placeholder with your actual merchant ID from the Installation page in your dashboard.

Script blocked: If your site uses a Content Security Policy, make sure assistant-script.nobi.ai is allowed in your script-src directive.

Quick Start Guide 1) Set Up Your Nobi Account 2) Install the Nobi Script 3) Add a Launch Component 4) Verify Your Installation Troubleshooting