Logo of CustomGPT.ai, a leader in Generative AI for business.
Try for free
Talk to sales

CustomGPT.ai Blog

How do I Embed a Chatbot in a Next.js app?

To embed a chatbot in a Next.js app, load your provider’s script with the Next.js Script component instead of a raw script tag. In the App Router, add it to app/layout.tsx so the chatbot appears across all routes; in the Pages Router, place it in _app.tsx or a single page. For customgpt.ai, copy the Embed, Live Chat, or Website Copilot code and paste it into those Script blocks.

Scope:
Last updated: December 2025. Applies globally; ensure chatbot data collection and scripts comply with local privacy laws such as GDPR in the EU and CCPA/CPRA in California.

What are my options to embed a chatbot in a Next.js app?

Use a vendor’s embed script or widget

Most chatbot providers give you a small <script> snippet or widget code you can paste into any site. In Next.js, you should load this via the next/script component rather than a raw <script> tag so that scripts are optimized and only loaded once.

Typical options from vendors:

  • Floating chat bubble in the corner
  • Inline chat area you place inside a page section
  • “Copilot” button that opens a chat window on click

All of these boil down to: include their script and optional config object, then place any required HTML hook elements.

Build a custom chat UI backed by an API

The other pattern is building your own chat interface in React and delegating AI or support logic to an API:

  1. UI lives in a React component (chat window, history, input box).
  2. Messages are sent to a Next.js API route or server action.
  3. That backend code calls an AI/chat service (e.g., CustomGPT.ai API, OpenAI, etc.).

This gives you full control over layout, styling, authentication, and features like “show sources” or conversation grouping.

How to embed a chatbot in the Next.js App Router

Load a third-party script globally in app/layout.tsx with next/script

For App Router projects (app/ directory), the recommended pattern is to load third-party widgets in the root layout, so they’re available on every route.

Steps (App Router):

  1. Install the chatbot provider if required (some use NPM packages; many just use a script URL).
  2. Import the Script component in your root layout:
// app/layout.tsx
import Script from ‘next/script’;
import type { ReactNode } from ‘react’;

export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang=“en”>
<body>
{children}

<Script
src=“https://example-chat.com/widget.js”
strategy=“afterInteractive”
/>
</body>
</html>
);
}
  1. Use strategy=”afterInteractive” so the script loads after hydration, which is ideal for most chat widgets. 
  2. If the provider asks for a global config object (e.g., window.chatWidgetConfig), set it above the script:
<Script id=“chat-config” strategy=“beforeInteractive”>
{`window.chatWidgetConfig = { projectId: “YOUR_ID” };`}
</Script>
  1. Test navigation between routes to ensure the widget only loads once and persists as users move around your app.
  2. If you want the chatbot only on specific sections (e.g., /dashboard), you can place the Script in that segment’s layout instead of the root.

How to embed a chatbot in the Next.js Pages Router

Load a third-party script in _app.tsx or a specific page with next/script

For older or legacy projects that still use the pages/ directory, you embed scripts using next/script inside _app.tsx or directly in a page.

Steps (Pages Router, global):

  1. Open pages/_app.tsx and import Script:
import type { AppProps } from ‘next/app’;
import Script from ‘next/script’;

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {…pageProps} />

<Script
src=”https://example-chat.com/widget.js”
strategy=”afterInteractive”
/>
</>
);
}
  1. This loads the chatbot widget on every page.

Steps (Pages Router, page-specific):

  1. If you only want the chatbot on /support, add the Script in pages/support.tsx instead.
  2. Use strategy props (afterInteractive, lazyOnload) to balance performance and responsiveness.
  3. Confirm in dev tools that the script loads once and that navigation doesn’t re-insert the widget multiple times.

How to do it with CustomGPT.ai

This section shows how to use CustomGPT.ai specifically, using the same App Router / Pages Router patterns you just saw.

Create and configure an agent you can embed

  1. Create or open an agent in your CustomGPT.ai dashboard (e.g., trained on your docs or website).
  2. Make sure its knowledge sources are configured (sitemaps, files, etc.) and responses look correct in the built-in chat.
  3. Open the Deploy Agent / Deploy option for that agent.
  4. Ensure the agent is set to public so it can be embedded on external sites.

Choose Embed vs Live Chat vs Website Copilot and copy the snippet

CustomGPT.ai gives multiple deployment options that all produce an embeddable script:

  1. In the Deploy screen, choose Embed to get an inline / iframe-style chatbot you can place in a page section.
  2. Choose Live Chat if you want a floating chat bubble that opens a chat window; configure side, size, and appearance, then copy the Live Chat script.
  3. Choose Website Copilot if you want a button (e.g., in the header) that opens a ChatGPT-style assistant; copy the Copilot script.
  4. For each option, you’ll receive a <script> snippet plus attributes (such as project/agent ID) that identify which agent to load. 
  5. Paste that script into your Next.js app using the App Router or Pages Router patterns above—replace https://example-chat.com/widget.js with the CustomGPT.ai script URL and config from the docs.

Because you’re using next/script, CustomGPT’s widget will still be optimized and loaded only once across your app.

Build a custom Next.js chat UI with an AI backend

If you’d rather have a completely custom chat UI (custom layout, multi-panel dashboard, extra controls) instead of the drop-in widget, you can wire a Next.js front end to the CustomGPT.ai API.

High-level steps:

  1. Get an API key from CustomGPT’s developer or Deploy / API tab.
  2. In CustomGPT.ai, create or find the agent you want to connect to and note its agent/project ID.
  3. In your Next.js app, create an API route (e.g., /api/chat) that:
    • Creates a conversation for that agent if needed
    • Sends user messages to CustomGPT.ai’s /conversations/{sessionId}/messages endpoint
    • Returns the AI’s reply to the frontend.
  4. Build a React chat component (messages list + input box) that calls /api/chat and displays the responses.
  5. Optionally, use the Chat Widget – Next.js Version starter as a reference or base; it’s a voice-enabled Next.js widget that already integrates with the CustomGPT RAG API.

This approach lets you blend CustomGPT.ai’s answers into any UI—tabs, sidebars, or multi-column dashboards.

Example — Next.js SaaS app with an inline support chatbot

Imagine a SaaS dashboard at /app built with the App Router:

  1. The team trains a CustomGPT.ai agent on their docs and changelog.
  2. They open Deploy → Embed, copy the inline embed snippet, and adapt it into a next/script block in app/layout.tsx.
  3. In the layout, they also add a <section> in the right sidebar with a simple heading “Ask support” where the embedded iframe/chat appears.
  4. When users open any dashboard route, the inline chatbot is always visible, can answer questions based on the product docs, and keeps them inside the app.
  5. Later, they add a Copilot button in the top navigation using the Website Copilot script so users can pop open a larger assistant window.

Conclusion

In the end, the real tradeoff isn’t whether to add a chatbot to your app, but whether you sacrifice control and performance to ship it fast.

Customgpt.ai resolves that tension with ready-to-embed widgets, Website Copilot, and API-powered Next.js integrations that stay fully aligned with your data and UX.

If you’re ready to ship an on-brand, AI-powered assistant without rebuilding your stack, get started with CustomGPT.ai for Next.js chatbots today.

FAQ’s

How do I embed a chatbot widget in a Next.js App Router project?

Use Next.js’s App Router layout and the next/script component to load your chatbot’s JavaScript once for all routes. Add a <Script> tag with the provider’s script URL in app/layout.tsx, typically with strategy=”afterInteractive”. If your chatbot uses a global config object, add a small inline Script before the widget script to set it on window.

How do I embed a CustomGPT.ai chatbot in a Next.js app?

First create or open an agent in customgpt.ai, then use the Deploy options to copy the Embed, Live Chat, or Website Copilot script for that agent. In a Next.js App Router project, paste the script into app/layout.tsx with next/script; in a Pages Router project, add it in _app.tsx or the specific page where you want the chatbot to appear.

3x productivity.
Cut costs in half.

Launch a custom AI agent in minutes.

Instantly access all your data.
Automate customer service.
Streamline employee training.
Accelerate research.
Gain customer insights.
Start free trial

Try 100% free. Cancel anytime.