嘿開發者！
在本文中，您將了解 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");
}
};
返回（
onLoad={onTawkLoad} 這定義了從您的應用程式發送到 tawk.to 的內容，例如訪客/使用者資訊。
依照您的專案需求更新程式碼！
謝謝
以上是TAWK.TO 和 NEXTjs 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！
