TAWK.TO & NEXTjs integration

Hey devs!

In this article, you will learn about tawk.to and it's integration with NEXTjs.

About TAWK.to:
Tawk.to is a free, cloud-based live chat software that enables businesses to interact with website visitors in real-time. It offers features like chat monitoring, automated triggers, and integration with various platforms. Tawk.to is popular for its ease of use, customization options, and affordability.

Steps to integrate with Nextjs
You can take help from tawk.to documentation https://help.tawk.to/article/react-js.

Otherwise follow the following steps:

1- Install the library to your Nextjs application
yarn add @tawk.to/tawk-messenger-react

2- Goto to https://help.tawk.to/ and signup
3- Create your widget/project and goto dashboard
4- Now in page.js file of you nextjs application import the tawk-messenger-react. Then, assign the values for your widgetId and propertyId. When using the API, you will need to use the useRef to access the object functions from the tawk-messenger-react component.

5- Goto project dashboard on tawk.to to get the ids:

In the example below, the property ID is xxxxxxxxxxxxxxxxxxxxxxxx and the widgetId is 123456789.

6- Now in page.js:
`"use client"
import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
import useUserStore from "../stores/userStore";
import {useRef} from "react";
export default function page({ children }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handleMinimize = () => {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () => {
console.log("Tawk.to widget loaded");

if (window.Tawk_API) {
  const userName = userData.full_name;// "Hussain Ahmed" 
  const userEmail = userData.email;"hussainsidd99@gmail.com"
  const userPhone=userData.phone_number; "+2342523"
  // Use Tawk.to's identify method to set the visitor's information
  window.Tawk_API.setAttributes({
    name: userName,
    email: userEmail,
    phone: userPhone,
  }, function (error) {
    if (error) {
      console.error("Error setting Tawk.to user details:", error);
    } else {
      console.log("User details successfully sent to Tawk.to");
    }
  });

  // Alternatively, use this to set visitor attributes directly
  window.Tawk_API.visitor = {
    name: userName,
    email: userEmail,
  };
} else {
  console.error("Tawk_API is not available");
}

};
return (

{children}
Minimize the Chat
propertyId="66be1852146b7af4a43ad88f"
widgetId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
/>

);
}`

onLoad={onTawkLoad} This defines what to send to the tawk.to from your application like visitor/user information.

Update the code according to your's project requirement!
Thanks

The above is the detailed content of TAWK.TO & NEXTjs integration. For more information, please follow other related articles on the PHP Chinese website!