Integrating Tawk.to with Next.js 14 (App Directory) for Real-Time Chat Support

In this post, we’ll walk you through Tawk.to Next.js Integration, a live chat solution, into a Next.js 14 application using the app directory. This will provide real-time customer support and enhance user experience on your website.

Prerequisites

• A Next.js 14 project using the App Directory structure.
• A Tawk.to account. You can sign up here.
• The @tawk.to/tawk-messenger-react npm package to easily integrate the Tawk.to chat widget.

Step 1: Create a Tawk.to Account and Retrieve Property ID & Widget ID

1. Sign up for Tawk.to and log in to the dashboard.
2. Navigate to Administration and find the Property ID.
3. To find your Widget ID, go to Channels > Chat Widget.
Keep these IDs handy as we’ll use them in the Next.js application.

Step 2: Install the Tawk.to Messenger React Package

To integrate Tawk.to into your Next.js project, you’ll need to install the Tawk Messenger React package. Run the following command in your terminal:

npm install @tawk.to/tawk-messenger-react

Step 3: Add Environment Variables for Tawk.to Property and Widget IDs

Create a .env.local file in the root directory of your Next.js project. This file will store your environment variables, including the Property and Widget IDs from Tawk.to.

NEXT_PUBLIC_TAWK_PROPERTY_ID=your-property-id-here
NEXT_PUBLIC_TAWK_WIDGET_ID=your-widget-id-here

Make sure to replace your-property-id-here and your-widget-id-here with your actual Tawk.to IDs.

Step 4: Create a Tawk.to Chat Component

Next, create a component for integrating the Tawk.to chat widget using the @tawk.to/tawk-messenger-react package. You can place this in a components/common/tawk-chat.tsx file.

'use client';
// @ts-ignore
import TawkMessengerReact from '@tawk.to/tawk-messenger-react';

const TawkChat = () => {
  return (
    <TawkMessengerReact
      propertyId={process.env.NEXT_PUBLIC_TAWK_PROPERTY_ID}
      widgetId={process.env.NEXT_PUBLIC_TAWK_WIDGET_ID}
    />
  );
};

export default TawkChat;

This component uses environment variables to dynamically configure the chat widget.

Step 5: Integrate Tawk.to Chat into Your Layout

Now that the TawkChat component is ready, you can integrate it into your layout. In Next.js 14’s app directory, your layout file might look something like this:

import Header from '@/components/layout/app/header';
import Footer from '@/components/layout/app/footer';
import TawkChat from '@/components/common/tawk-chat';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className='grid grid-rows-[auto_1fr_auto] min-h-[100dvh]'>
      <Header />
      <main className='relative'>{children}</main>
      <Footer />
      <TawkChat />
    </div>
  );
}

In this example, we import the TawkChat component and place it within the layout. The chat widget will be loaded on all pages of your application, making it easily accessible to your users.

Step 6: Test the Tawk.to Next.js Integration

Run your Next.js application locally to test the integration:

npm run dev

Visit your site and check if the Tawk.to chat widget appears at the bottom of the page. If everything is set up correctly, your live chat should now be available.

Step 7: Deploy Your Application

Once you’ve tested the chat widget and ensured it’s working as expected, deploy your Next.js application. You can use services like Vercel, Netlify, or any other deployment platform of your choice.

Make sure the .env.local file is added to your environment variables on the hosting platform as well.

Conclusion

In this tutorial, we walked through the steps to integrate the Tawk.to live chat widget into a Next.js 14 app using the new App Directory structure. By following these steps, you can quickly add real-time chat functionality to your website, improving customer engagement and support.

This setup is highly customizable, so feel free to style or adjust it based on your project’s needs.