Developer FrameworksSetup: 1 minute· Developer (1-Line Code)

AI Chatbot Integration for React & Next.js Applications

Modern developer-first AI support widget. Drop a single script tag into your Next.js layout or React root with zero hydration mismatch.

Start Free Trial Try Interactive Demo

Why use SiteMind with React & Next.js?

Zero SSR / Hydration Glitches

Built with client-safe lazy mounting so Next.js App Router renders flawlessly with zero console hydration warnings.

Developer Public API Access

Use API keys to query the chatbot headlessly from your React components or custom frontend interfaces.

Shadow DOM Encapsulation

Tailwind CSS classes and custom global CSS rules in your app will never leak into or distort the widget.

Quick Setup

How to install in 1 minute

Add to Next.js Root Layout

Import next/script and insert the widget snippet into your app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://sitemind.tech/widget.js"
          data-widget-key="YOUR_WIDGET_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}