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 our Getting Started Checklist 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) Prerequisites

A public website where you can edit HTML (or a dev/staging environment).

Optional for ecommerce: ensure Nobi has read in your product catalog

2) Include the 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 src="https://assistant-script.nobi.ai/nobi.bundle.js" onload="window.Nobi.initialize({ accountId: 'NOBI_PROVIDED_MERCHANT_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

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

Simply open up your site and watch for the new search bar.

Troubleshooting

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

Quick Start Guide 1) Prerequisites 2) Include the script 3) Add a Launch Component 4) Verify your installation