Перейти до основного вмісту

Налаштування widget

Widget встановлюється одним script tag. Додавайте його один раз глобально на всі сторінки, де має працювати асистент.

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

Куди додавати​

Використовуйте глобальний layout або template:

  • перед закривальним </body> у HTML
  • загальний шаблон CMS
  • scripts array у Docusaurus
  • app/layout.tsx з next/script у Next.js App Router
  • tag manager лише якщо клієнт контролює порядок завантаження scripts

Next.js App Router​

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​

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

Перевірка​

Після deploy відкрийте сайт і перевірте:

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

Очікуваний результат: 1.

У DevTools Network перевірте:

  • widget.js завантажується
  • /api/webhooks/widget/session повертає 200 або 201
  • надсилання повідомлення викликає /api/webhooks/widget/message
  • відповідь бота з'являється як нове повідомлення

Чого не робити​

  • не додавати script усередині повторюваних card або route content
  • не монтувати кілька копій widget
  • не розкривати private prompts або API keys на сторінці
  • не використовувати widget там, де consent rules це забороняють