首页 > web前端 > js教程 > 正文

TAWK.TO 和 NEXTjs 集成

WBOY
发布: 2024-08-19 17:07:36
原创
547 人浏览过

嘿开发者!

在本文中,您将了解 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:

TAWK.TO & NEXTjs integration

TAWK.TO & NEXTjs integration

在下面的示例中,属性 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 integration

根据您的项目需求更新代码!
谢谢

以上是TAWK.TO 和 NEXTjs 集成的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!