← Back

Add the AIchat popup to your Next.js app

Embed the chat popup in a Next.js (App Router or Pages Router) app so visitors get one chat launcher and one chat panel—no duplicate containers.

1. Get your snippet values

From your AIchat dashboard: Install chatbot → Popup. You need:

  • Embed URL – e.g. https://embed.withaichat.com
  • API URL – e.g. https://api.withaichat.com
  • Slug – your chatbot slug (e.g. withaichat)
  • API key (optional) – public key if you use keyed access

2. Recommended: Next.js App Router (Next 13+)

Use next/script and a small client component so the script loads once and initializes after load.

Step 1: Env variables

In .env.local:

NEXT_PUBLIC_AICHAT_EMBED_URL=https://embed.withaichat.com
NEXT_PUBLIC_AICHAT_API_URL=https://api.withaichat.com
NEXT_PUBLIC_AICHAT_SLUG=your-chatbot-slug
NEXT_PUBLIC_AICHAT_API_KEY=ck_xxxx

For local dev you can use http://localhost:3003 and http://localhost:3001 if you run the embed and API locally.

Step 2: Client component

Create components/AIchatPopup.tsx (or under app/):

'use client';

import Script from 'next/script';

const EMBED_URL = process.env.NEXT_PUBLIC_AICHAT_EMBED_URL ?? '';
const API_URL = process.env.NEXT_PUBLIC_AICHAT_API_URL ?? '';
const SLUG = process.env.NEXT_PUBLIC_AICHAT_SLUG ?? '';
const API_KEY = process.env.NEXT_PUBLIC_AICHAT_API_KEY ?? '';

export function AIchatPopup() {
  if (!SLUG || !EMBED_URL) return null;

  const init = () => {
    (window as any).AIchatPopup?.init({
      slug: SLUG,
      apiUrl: API_URL,
      embedUrl: EMBED_URL,
      apiKey: API_KEY || undefined
    });
  };

  return (
    <Script
      src={`${EMBED_URL}/popup.js`}
      strategy="afterInteractive"
      onLoad={init}
    />
  );
}

Step 3: Add to layout or page

Option A – All pages: In app/layout.tsx, add <AIchatPopup /> inside <body>.

import { AIchatPopup } from './components/AIchatPopup';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AIchatPopup />
      </body>
    </html>
  );
}

Option B – Only specific pages: Import and render <AIchatPopup /> only where you want the popup (e.g. landing page).

Why this approach

  • One script load, one init: no duplicate widgets.
  • Uses Next.js Script with afterInteractive so the popup doesn’t block first paint.
  • Config via env: different slugs/keys per environment without code changes.

3. Next.js Pages Router

Same idea: use next/script in _app.tsx and call window.AIchatPopup?.init(...) in onLoad. Use the same env vars and init object as in the App Router example above.

4. Behaviour and “single container”

  • Launcher: A “Chat” button appears fixed at the bottom-right.
  • When opened: The chat panel opens; the launcher is hidden so only one main container (the chat) is visible. A light backdrop appears; clicking it closes the chat and brings the launcher back.
  • No duplicate containers: one launcher, one panel.

If you see two chat panels, ensure the popup script is only included once (e.g. only one<AIchatPopup /> or one script tag).