Перейти к основному содержимому

Настройка 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 это запрещают