How to Install Chatim Live Chat Widget on Next.js

Step 1: Generate and Copy the Widget Code

1. Log in to your .Chatim dashboard.
2. Select your project and click Install in the navigation menu.
3. Note your Project ID from the code snippet shown on the page.

Step 2: Add the Widget to Your Root Layout (App Router)

Open app/layout.tsx and add two next/script tags before the closing </body> tag: one inline script with your Chatim settings and one that loads the widget. The root layout wraps every route, so the widget appears on every page.

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="chatim-settings" strategy="afterInteractive">
          {`
            window.chatim = window.chatim || {};
            window.chatim.cmd = window.chatim.cmd || [];
            window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
          `}
        </Script>
        <Script
          src="https://chatimwidget.com/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_PROJECT_ID with your actual project ID from the Chatim dashboard. strategy="afterInteractive" is the default: the widget loads client side after your page hydrates, renders nothing on the server (no hydration mismatch) and adds nothing to your Next.js bundle. If you prefer to load it during browser idle time, use strategy="lazyOnload" on both tags. No useEffect or client component is needed: the widget waits for window.chatim.settings for up to 10 seconds, so the order of the two scripts does not matter.

Step 3: Pages Router (`pages/_app.tsx`)

If your project uses the Pages Router, add the same two tags to pages/_app.tsx next to <Component />:

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script id="chatim-settings" strategy="afterInteractive">
        {`
          window.chatim = window.chatim || {};
          window.chatim.cmd = window.chatim.cmd || [];
          window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
        `}
      </Script>
      <Script
        src="https://chatimwidget.com/widget.js"
        strategy="afterInteractive"
      />
    </>
  );
}

The root layout and _app.tsx stay mounted on client side navigation, so the widget loads once and stays open while users move between pages.

React (Create React App / Vite)

If you're using plain React (not Next.js), you can add the widget like this:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };

    const script = document.createElement('script');
    script.src = 'https://chatimwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return <div>{/* Your app */}</div>;
}

Vue.js

For Vue.js projects:

<script>
export default {
  mounted() {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };

    const script = document.createElement('script');
    script.src = 'https://chatimwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Step 4: Test the Widget

1. Run your development server and open your site in a browser.
2. The Chatim widget should appear in the corner of your page.
3. Test the live chat and chatbot functionalities to ensure they are working correctly.

Step 5: Adjust Settings and Monitor Performance

Return to your Chatim dashboard to monitor customer interactions, view analytics, and make any necessary adjustments to the widget's behavior, appearance, or responses based on user feedback and engagement.

Need Help?

If you encounter any issues during the installation process, contact us.