▲Next.js Integration Guide
Add an AI chatbot to your Next.js app using the built-in Script component with optimized loading.
1Open your root layout file
Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router). This is where you add the script so it loads on every page.
2Import the Script component
Add import Script from "next/script" at the top of the file. The Next.js Script component optimizes third-party script loading automatically.
3Add the Script tag inside the body
Place the <Script /> component inside the <body> tag with strategy="afterInteractive". This ensures the widget loads after the page becomes interactive without blocking hydration.
4Replace YOUR_BOT_ID
Replace the placeholder YOUR_BOT_ID with your actual bot ID from the BotEmbed.ai dashboard.
Code Examples
import type { Metadata } from 'next';
import Script from 'next/script';
import './globals.css';
export const metadata: Metadata = {
title: 'My Next.js App',
description: 'Built with Next.js and BotEmbed.ai',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
{/* BotEmbed.ai Chat Widget */}
<Script
src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
strategy="afterInteractive"
data-theme="light"
data-position="bottom-right"
/>
</body>
</html>
);
}import type { AppProps } from 'next/app';
import Script from 'next/script';
import '../styles/globals.css';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
{/* BotEmbed.ai Chat Widget */}
<Script
src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
strategy="afterInteractive"
data-theme="light"
data-position="bottom-right"
/>
</>
);
}Tips
The strategy="afterInteractive" setting ensures the widget loads after Next.js hydration, so it does not block the initial page load.
Works with both the App Router (app/ directory) and the Pages Router (pages/ directory).
For the Pages Router, add the Script component in _app.tsx so it persists across page navigations.
Do not use next/head for script tags — always use next/script for third-party scripts in Next.js.