How to install the ChatNeuron widget on React / Next.js / Vue

Step-by-step guide to install the AI agent and chat widget on a React / Next.js / Vue site. Copy the code from the dashboard and follow the steps below.

React / Next.js

Load the script in the root layout. Take data-client and data-variant from Copy the widget code from the dashboard → Widget.

import Script from "next/script"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://your-domain/widget.js"
          data-client="YOUR_CLIENT_ID"
          data-variant="bubble"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Vue / Nuxt

Add the script in app.head.script in nuxt.config.ts.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://your-domain/widget.js",
          "data-client": "YOUR_CLIENT_ID",
          "data-variant": "bubble",
          defer: true,
        },
      ],
    },
  },
})

Ready to install the widget on React / Next.js / Vue?

Create an account, copy the code from the dashboard, and paste it on your site using the steps above.

Get your widget code in the ChatNeuron dashboard