✦ Auto-train your AI from your URLTry it free →
DocsInstallation

Install in React / Next.js

Embed EasyChatWidget in a React or Next.js app. Because the widget injects its own DOM, you just need to load the script once.

React (Vite / Create React App)

Create a small component that appends the script on mount, and render it once near the root of your app:

import { useEffect } from 'react'

export default function ChatWidget() {
  useEffect(() => {
    const s = document.createElement('script')
    s.src = 'https://easychatwidget.com/widget.js'
    s.async = true
    s.dataset.widgetId = 'YOUR_WIDGET_ID'
    document.body.appendChild(s)
    return () => { document.body.removeChild(s) }
  }, [])

  return null
}

Next.js

Use the built-in next/script component in your root layout so it loads on every route:

// app/layout.jsx (Next.js App Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://easychatwidget.com/widget.js"
          data-widget-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
Tip
Replace YOUR_API_KEY with your widget's key from the dashboard. Keep the loader at the app root so it isn't mounted and unmounted on every page change.

Verify it works

  1. 1
    Reload your site
    Hard-refresh the page (Ctrl/Cmd + Shift + R) so the new script loads.
  2. 2
    Look for the chat bubble
    It appears in the bottom-right corner. Click it to open the chat panel.
  3. 3
    Send a test message
    If the AI replies, you're connected. The chat also shows up live in the Conversations table on your widget's dashboard page.