База знаний GetMyBot

Установка в приложении на React, Next.js или Vue

Вставьте фрагмент виджета один раз в корневой layout, чтобы он пережил клиентскую маршрутизацию.

На этой странице

Здесь описано, куда вставить код виджета в SPA-приложении и как проверить установку. Остальные настройки разобраны в разделе «Виджет на сайте».

Куда вставить фрагмент

Вставьте весь фрагмент один раз, вне какого-либо компонента страницы, управляемого роутером:

  • Next.js (App Router): корневой app/layout.tsx, внутри <head> (или через компонент Script со strategy="afterInteractive").
  • Next.js (Pages Router): pages/_document.tsx, внутри <Head>.
  • Vue (Vite, Nuxt или обычное приложение с Vue Router): единственный index.html, из которого отдаётся приложение, либо корневой компонент App/layout.
  • Обычный React (Create React App, Vite): public/index.html, внутри <head>.

Не вставляйте фрагмент в компонент, который роутер монтирует и размонтирует при переходах посетителя.

Как проверить установку

Выложите изменение, затем откройте «Виджет» → «Установка» в кабинете и запустите «Проверить установку» на реальном маршруте. Установку подтверждает только статус готовности виджета в реальном времени – см. «Автоматическая диагностика».

Почему один раз и вне роутера

Загрузчик и виджет спроектированы идемпотентными: window.mybot = window.mybot || {} никогда не затирает уже существующую сессию, а пакет виджета отказывается монтироваться повторно. Поэтому клиентский переход между маршрутами не требует перезагружать или повторно выполнять фрагмент – виджет остаётся смонтированным на всех маршрутах, если был загружен один раз вне дерева, которое пересобирает роутер. Если же вставить фрагмент внутрь компонента-страницы, виджет (вместе с открытым диалогом) будет монтироваться и размонтироваться при каждом переходе, теряя несохранённое состояние.

Подводные камни

  • Не добавляйте фрагмент повторно в отдельные компоненты страниц или маршрутов «на всякий случай» – это не нужно и рискует попасть в компонент, который роутер размонтирует.
  • В приложении на Next.js с компонентом Script для загрузчика используйте strategy="afterInteractive", а не "beforeInteractive", чтобы не блокировать первую отрисовку.
  • Если приложение работает за обратным прокси или CDN, кэширующим HTML, убедитесь, что деплой действительно инвалидирует этот кэш – иначе изменение фрагмента не дойдёт до реальных посетителей.

Что дальше