← All posts
Developers6 min read

Embed an AI Sales Agent in React and Next.js (App Router)

Step-by-step: MerrchAI script tag vs next/script, root layout placement, and avoiding double-loading on client navigation.

React and Next.js apps need the widget to load once per session and stay out of the way of hydration. The simplest path is the same async script you would use in HTML; the App Router path uses next/script with afterInteractive.

Next.js App Router

Add the script in app/layout.tsx inside <body>, after {children}, with your agent id and API URL from the dashboard. Import Script from next/script and set strategy="afterInteractive" so the widget runs after the page is interactive.

React (Vite or CRA)

Paste the snippet in index.html before </body>, or mount a small loader component once from App.tsx that injects the script if it is not already present (guard with a data attribute so navigations do not duplicate the tag).

Test before production

Use the dashboard merge tool to paste your layout file and copy the combined result. Verify CORS allows your site origin on the API, then watch Network for /api/widget and /api/behavior on a real page with scroll and pricing links.

Try MerrchAI on your site

Free tier with starter credits—embed in minutes from the dashboard.

Create account for free