Quick Start Guide | Nobi Knowledge Base

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 Dual Mode Search Bar to your site using Nobi’s web components

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

a. Get your merchant ID from Nobi and optionally set up a custom app

Nobi’s system needs to read and index your product catalog to make your products searchable. To get started, contact your Nobi rep to get set up with a merchant ID. If your store is not on Shopify, or has more than 25,000 products, you’ll also need to take a few extra steps to make your product catalog. See our documentation at Installing Nobi If Your Shopify Store Has More Than 25,000 Products for more details.

b. Nobi’s main script

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


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

The script registers the various Nobi components (i.e. <nobi-search-bar>) and dispatches a nobi-ready event when the renderer is ready.

It’s safe to place <nobi-search-bar …> and other elements before or after the script; rendering will wait for nobi-ready if needed.

⚠️ Make sure you replace the placeholder with your actual merchant ID before testing or going live

c. (Optional) Install the metrics tracking script

If you’re on Shopify, you can install the following script as a custom pixel under your “Customer events” section on your site’s backend:


const merchantId = 'NOBI_PROVIDED_MERCHANT_ID';
const script = document.createElement('script');
script.src = 'https://assistant-script.nobi.ai/nobi.bundle.js';
script.async = true;
script.onload = () => {
    window.Nobi.subscribeToShopifyEvents(merchantId, analytics);
};
document.head.appendChild(script);

This script will send events to Nobi so we can help track incremental improvements in conversion rates, AOVs, etc. if you’d like us to help with your A/B testing. It’s additionally required for any customers who use Nobi’s smart product recommendations for their checkout cart.

⚠️ Make sure you replace the placeholder with your actual merchant ID before testing or going live

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="true"
  show-hint-row="true">
</nobi-search-bar>

For a list of all available attributes, see the page for the launch component that you would like to use.

4) Verify your installation

Simply open up your site and watch for the new button.

Troubleshooting

No render / waiting: ensure the script tag is present. The element waits for the global nobi-ready event; once fired, it renders.

Getting Started 1) Prerequisites 2) Include the script a. Get your merchant ID from Nobi and optionally set up a custom app b. Nobi’s main script c. (Optional) Install the metrics tracking script 3) Add a Launch Component 4) Verify your installation