Skip to main content

Widget setup

The widget is installed with one script tag. Add it once, globally, on every page where the assistant should be available.

<!-- NaviBot Widget -->
<script src="https://navi.1it.pro/widget.js" data-inbox-id="YOUR_WEBSITE_INBOX_ID" async></script>

Where to add it​

Use the global layout or template:

  • before closing </body> in plain HTML
  • global layout in CMS templates
  • scripts array in Docusaurus
  • app/layout.tsx with next/script in Next.js App Router
  • tag manager only if the client controls script timing carefully

Next.js App Router example​

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://navi.1it.pro/widget.js"
          strategy="afterInteractive"
          data-inbox-id="YOUR_WEBSITE_INBOX_ID"
        />
      </body>
    </html>
  );
}

Docusaurus example​

scripts: [
  {
    src: 'https://navi.1it.pro/widget.js',
    async: true,
    'data-inbox-id': 'YOUR_WEBSITE_INBOX_ID',
  },
]

Verification​

After deploy, open the site and check:

document.querySelectorAll('script[src*="widget.js"]').length

The result should be 1.

Then open DevTools Network and confirm:

  • widget.js loads
  • /api/webhooks/widget/session returns 200 or 201
  • sending a message calls /api/webhooks/widget/message
  • a bot reply appears as a new message

What not to do​

  • do not add the script inside repeated cards or route content
  • do not mount multiple copies of the widget
  • do not expose private prompts or API keys in the page
  • do not use the widget on pages where consent rules prohibit it