How to Install Chatim Live Chat Widget on Next.js

Step 1: Generate and Copy the Widget Code

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

Step 2: Create a Chat Widget Component

Create a new component file (e.g., components/ChatWidget.tsx) with the following code:

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

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

  return (
    <Script
      src="https://widget.chatim.app/widget.js"
      strategy="lazyOnload"
    />
  );
}

Replace YOUR_PROJECT_ID with your actual project ID from the Chatim dashboard.

Step 3: Add the Component to Your Layout

Import and add <ChatWidget /> to your root layout file (e.g., app/layout.tsx):

import ChatWidget from '../components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

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://widget.chatim.app/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://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Step 4: Test the Widget

Run your development server and open your site in a browser.
The Chatim widget should appear in the corner of your page.
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.

Chatim Help Center