TAWK.TO 和 NEXTjs 集成

嘿開發者！

在本文中，您將了解 tawk.to 及其與 NEXTjs 的整合。

關於 TAWK.to：
Tawk.to 是一款免費的基於雲端的即時聊天軟體，使企業能夠與網站訪客進行即時互動。它提供聊天監控、自動觸發以及與各種平台整合等功能。 Tawk.to 因其易用性、客製化選項和經濟實惠而廣受歡迎。

與 Nextjs 整合的步驟
您可以從 tawk.to 文件取得協助 https://help.tawk.to/article/react-js。

否則請依照下列步驟操作：

1- 將庫安裝到您的 Nextjs 應用程式
紗線添加@tawk.to/tawk-messenger-react

2- 前往 https://help.tawk.to/ 並註冊
3- 建立您的小部件/專案並前往儀表板
4-現在在 nextjs 應用程式的 page.js 檔案中匯入 tawk-messenger-react。然後，為您的 widgetId 和 propertyId 指派值。使用 API 時，您需要使用 useRef 來存取 tawk-messenger-react 元件中的物件函數。

5- 前往 tawk.to 上的項目儀表板以取得 ID：

在下面的範例中，屬性 ID 為 xxxxxxxxxxxxxxxxxxxxxxxx，widgetId 為 123456789。

6- 現在在 page.js 中：
`「使用客戶端」
從 '@tawk.to/tawk-messenger-react' 匯入 TawkMessengerReact;
從“../stores/userStore”匯入 useUserStore;
從“react”導入{useRef}；
匯出預設功能頁面({ Children }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handleMinimize = () =>; {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () =>; {
console.log("Tawk.to 小工具已載入");

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");
}

};
返回（

{孩子}
盡量減少聊天
propertyId="66be1852146b7af4a43ad88f"
widgetId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
//>

);
}`

onLoad={onTawkLoad} 這定義了從您的應用程式發送到 tawk.to 的內容，例如訪客/使用者資訊。

依照您的專案需求更新程式碼！
謝謝

以上是TAWK.TO 和 NEXTjs 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！