How to Add TidySupport to Next.js

Install the TidySupport chat widget in your Next.js app in under 5 minutes using the npm package.

Image: TidySupport chat widget in a Next.js app

Install the package

Add the TidySupport widget package to your Next.js project.

Terminal

npm install @tidysupport/widget

Add the component to your layout

Import the widget and add it to your root layout file so it appears on every page.

TypeScript

import TidySupportWidget from "@tidysupport/widget";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <TidySupportWidget workspaceId="YOUR_WORKSPACE_ID" />
      </body>
    </html>
  );
}

Replace YOUR_WORKSPACE_ID with your workspace ID from Settings → Widget in your TidySupport dashboard.

Image: Where to find your workspace ID in TidySupport Settings

Verify the installation

Visit your site. You should see the chat bubble in the bottom-right corner of the page. Click it to confirm the widget opens correctly.

Image: Chat bubble appearing in the bottom-right corner

How it works

The widget loads asynchronously and shows a launcher button in the corner of your site. Customers click it to start a chat with your team. All conversations are routed to your TidySupport inbox.

How to identify users with the Events API