Next.js Chatbot – Integrate SiteBot24 with React/Next.js App

Adding SiteBot24 to a Next.js Application

Next.js applications require a slightly different approach due to server-side rendering and the component-based architecture. Here's how to integrate SiteBot24 correctly.

Method 1: Using next/script (Recommended)

The next/script component is the correct way to load third-party scripts in Next.js, as it optimizes loading strategy.

In App Router (Next.js 13+)

Add to your root layout (app/layout.tsx or app/layout.js):

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.sitebot24.com/widget.js"
          data-bot-id="YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Replace YOUR_BOT_ID with the Bot ID from your SiteBot24 admin panel (Settings → Integration).

In Pages Router (Next.js 12 and earlier)

Add to pages/_app.tsx or pages/_app.js:

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.sitebot24.com/widget.js"
        data-bot-id="YOUR_BOT_ID"
        strategy="lazyOnload"
      />
    </>
  )
}

Method 2: Custom Document (Pages Router Only)

Add to pages/_document.tsx:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        {/* SiteBot24 widget */}
        <script
          src="https://widget.sitebot24.com/widget.js"
          data-bot-id="YOUR_BOT_ID"
          defer
        />
      </body>
    </Html>
  )
}

Loading Strategy Options

The strategy prop on next/script controls when the script loads:

Strategy	When it loads	Use case
`lazyOnload`	After page is interactive and idle	Recommended for chatbots
`afterInteractive`	After hydration	If you need the chat sooner
`beforeInteractive`	Before hydration	Not recommended for chat widgets

Use lazyOnload for the best performance impact.

TypeScript Support

SiteBot24's widget exposes a global API. Add type declarations to avoid TypeScript errors:

// types/sitebot24.d.ts
declare global {
  interface Window {
    SiteBot24?: {
      open: () => void;
      close: () => void;
      toggle: () => void;
    };
  }
}

export {};

Programmatic Control

Open or close the chat widget from your application code:

// Open chat
window.SiteBot24?.open();

// Close chat
window.SiteBot24?.close();

// Example: open chat when user clicks a custom button
<button onClick={() => window.SiteBot24?.open()}>
  Talk to us
</button>

Verification

After implementation:

Run npm run dev and open your app
Open browser DevTools (F12) → Network tab
Filter for "sitebot24" to confirm the script loads
Verify the chat button appears
Send a test message

Production Deployment

The integration works identically in production. No environment-specific configuration is needed – the same widget code works across development, staging, and production.