Base de conocimiento de GetMyBot

Install in a React, Next.js or Vue app

Paste the widget snippet once in the root layout so it survives client-side routing.

En esta página

This page covers only where to paste the snippet in a single-page application and how to confirm it works. For everything else, see Site widget.

Where to paste the snippet

Paste the complete snippet once, outside of any routed page component:

  • Next.js (App Router): the root app/layout.tsx, inside <head> (or via the Script component with strategy="afterInteractive").
  • Next.js (Pages Router): pages/_document.tsx, inside <Head>.
  • Vue (Vite, Nuxt or a plain Vue Router app): the single index.html the app is served from, or the root App/layout component.
  • Plain React (Create React App, Vite): public/index.html, inside <head>.

Do not paste it inside a component that a router mounts and unmounts as the visitor navigates.

Verify the installation

Deploy the change, then open Widget → Install in the studio and run Check installation against a live route. Only a runtime-ready result confirms the widget actually mounted — see Automatic diagnostics.

Why once, outside the router

The loader and the widget are idempotent by design: window.mybot = window.mybot || {} never overwrites an existing session, and the widget bundle refuses to mount a second time. A client-side route change does not need to reload or re-run the snippet — the widget stays mounted across every route as long as it loaded once, outside the tree the router swaps out. Placing the snippet inside a routed page component instead would mount and unmount the widget (and its open conversation) on every navigation, dropping unsaved state along the way.

Common pitfalls

  • Do not add the snippet again in individual page or route components "just in case" — it is unnecessary and risks landing inside a component the router unmounts.
  • In a Next.js app using the Script component, prefer strategy="afterInteractive" over "beforeInteractive" for the loader, so it does not block first paint.
  • If the app is served behind a reverse proxy or CDN that caches HTML, make sure a deploy actually invalidates that cache — otherwise the snippet change won't reach real visitors.

What's next