将tawk Tawk_API.setAttributes与reactjs一起使用

问题描述

我具有以下应用程序组件：-

import React,{ useEffect } from "react";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  useEffect(() => {
    var Tawk_API = Tawk_API || {},Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = "https://embed.tawk.to/5ab8d/default";
      s1.charset = "UTF-8";
      s1.setAttribute("crossorigin","*");
      s0.parentNode.insertBefore(s1,s0);
    })();
    Tawk_API.onLoad = function () {
      console.log("chat loaded");
      Tawk_API.setAttributes(
        {
          name: "Test Name",email: "[e-mail]",hash: "hash value",},function (error) {}
      );
    };
  },[]);

  return (
    <div>
      <div className="container-fluid rtl">
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </div>
  );
}

export default App;

我可以看到该聊天小部件，但是当我开始聊天时，请不要为访问者分配名称。

如何在reactjs中使用setAttributes？

解决方法

使用 tawkto npm 包，方便使用