Installing Nobi

This guide covers how to install Nobi on any website. Choose the method that fits your setup: add the script directly to your HTML, or use Google Tag Manager.

On Shopify? See our dedicated Shopify installation guide for step-by-step instructions tailored to Shopify stores.

Direct Installation

If you can edit your site's HTML directly, this is the simplest approach. Add the Nobi script to your site's <head> tag:


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

⚠️ Replace YOUR_MERCHANT_ID with your actual merchant ID. You can find this on the Installation page of your Nobi dashboard.

Place this snippet before the closing </head> tag on every page where you want Nobi to appear. For site-wide coverage, add it to your main layout or template file.

Installing With Google Tag Manager

If your site uses Google Tag Manager, you can install Nobi without editing your site's source code.

Log in to Google Tag Manager and select your container.
Click Tags in the left sidebar, then New.
Name the tag (e.g., "Nobi AI Assistant"). Click Tag Configuration and select Custom HTML.
Paste the following code into the HTML field:


<script>
  (function () {
    var scriptUrl = 'https://assistant-script.nobi.ai/nobi.bundle.js';

    function initializeNobi() {
      if (!window.Nobi || typeof window.Nobi.initialize !== 'function') {
        return;
      }

      window.Nobi.initialize({
        merchantId: 'YOUR_ACCOUNT_ID',
        autoLaunch: ['floating-chat-bar']
      });
    }

    if (window.Nobi && typeof window.Nobi.initialize === 'function') {
      initializeNobi();
      return;
    }

    var existingScript = document.querySelector('script[src="' + scriptUrl + '"]');
    if (existingScript) {
      existingScript.addEventListener('load', initializeNobi, { once: true });
      return;
    }

    var script = document.createElement('script');
    script.async = true;
    script.src = scriptUrl;
    script.onload = initializeNobi;
    document.head.appendChild(script);
  })();
</script>

⚠️ Replace YOUR_ACCOUNT_ID with your actual account ID from the Installation page of your Nobi dashboard.

Click Triggering and select All Pages to load Nobi on every page.
Click Save.
Click Submit in the top right to publish your changes.

Full-page search results

Nobi can render search results inside a page on your website. Products and useful pages share one results page. Shoppers can use manual filters or enter commands in Filter with AI to update the grid.

Account and installation

Create a Nobi account or sign in to your existing account.
Complete store or website setup. Connect your product catalog and add the website pages you want Nobi to search. Wait for indexing to finish.
Open Website UX → Install. Use the selected account's ID and personalized installation snippet. Install the script once on the pages that use Nobi.
Choose the full-page search instructions on the Install page. Your developer needs access to your website's search route and header form. Adding the script alone does not replace the existing results page.

Configure each search bar directly

With SDK 1.6.4, an AI bar can use search-results-path="/search" to open your results page without shared window routing. Include your locale prefix where needed. The path alone opts that bar into page results; search-presentation="modal" explicitly keeps it in a modal. Omitting both preserves existing installation behavior.

The destination page still needs the renderer below. site-search-path remains the separate option for ordinary site search. Existing shared-routing installations remain supported. See the full attribute details in

Search Bar.

Developer setup

Create a visible container in your search route. After the Nobi script has initialized and emitted nobi-ready, mount the component with the query from your URL:


const host = document.getElementById('nobi-search-results');
const disposeSearchPage = window.Nobi.renderComponentIntoElement(host, 'search-page', {
  query: new URLSearchParams(window.location.search).get('q') || '',
  appearance: {
    desktopColumns: 3,
    mobileColumns: 1,
    imageAspectRatio: 'natural'
  }
});

The container must already be in the document, and the render method must be available. If your script runs after Nobi is ready, use the available render method immediately. This is a JavaScript mount API, not a <nobi-search-page> HTML element. Keep the returned disposer and call it when your application removes or replaces the route.

Point your header search form to that route using its q query parameter. If an existing Nobi header opens the modal, configure window.Nobi.searchResultsPage = {merchantId: 'YOUR_ACCOUNT_ID', path: '/search'} after the SDK is available, using your actual account ID and your site's search path. Keep that configuration available across the pages where your header appears. Other launch components can continue to use the modal.

Appearance settings belong to this component. They do not overwrite your account's existing styling. Filter with AI selects available catalog filters and changes results; it does not open a conversation. It cannot apply a filter value that is absent from the catalog.

Check before publishing

Test a new search, a compound filter command, visible selected filters, clear filters, loading, product links and Show More Products. Check desktop and mobile, including the filter drawer. A fresh visit or reload starts from the URL query without a previous visit's filters; Back and Forward can restore the earlier results.

On Shopify, follow the

Installing Nobi For Shopify Stores instructions for the theme block and optional header-routing embed.

Adding Launch Components

After installing the script, you need to add at least one launch component to give visitors a way to interact with Nobi. The simplest option is the search bar:


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

Place this HTML element wherever you want the search bar to appear on your site.

For GTM installations where you cannot add HTML elements, use the Floating Chat Bar — it requires no HTML and is configured entirely through the script initialization:


window.Nobi.initialize({
  merchantId: 'YOUR_ACCOUNT_ID',
  autoLaunch: ['floating-chat-bar']
});

See the Launch Components Overview for all available components and their configuration options.

Verify Your Installation

After installing, open your site in a browser and confirm:

The Nobi search bar (or other launch component) appears on the page.
Typing a query opens the Nobi assistant and returns results.
If you have products synced, product results appear in responses.

Troubleshooting

Component not rendering: Verify the Nobi script is loaded by checking for nobi.bundle.js in your browser's Network tab. The component waits for the nobi-ready event before rendering.
Wrong or no results: Confirm your product catalog has finished syncing in the Nobi dashboard. New catalogs can take a few minutes to index.
GTM tag not firing: Use GTM's Preview mode to verify the tag fires on page load. Check that the trigger is set to "All Pages".
Console errors: Ensure your merchant ID is correct and that you haven't blocked the assistant-script.nobi.ai domain in any content security policy.

Installing Nobi Direct Installation Installing With Google Tag Manager Full-page search results Account and installation Configure each search bar directly Developer setup Check before publishing Adding Launch Components Verify Your Installation Troubleshooting