using tawk Tawk_API.setAttributes with reactjs

Question

I have the following App Component :-

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: "email@email.com",
          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;

I can see that chat widget, but when i am starting a chat , don't get the visitor assigned name.

How can i use the setAttributes in reactjs?

score 0 · Answer 1 · answered Feb 01 '21 at 19:36

0

Use tawkto npm package for easy use

answered Feb 01 '21 at 19:36

BUGATTI AJAY

759
6
3

score 0 · Answer 2 · answered Aug 02 '23 at 17:07

import React, {useEffect, useRef, useState} from 'react';
import {useAuth} from "./auth/context";
import TawkMessengerReact from '@tawk.to/tawk-messenger-react';

function generateName() {...}

const TawkMessenger = () => {
    const tawkMessengerRef = useRef();
    const {user} = useAuth()
    const [isTawkLoaded, setIsTawkLoaded] = useState(false)

    useEffect(() => {
        if (tawkMessengerRef.current == null || user == null || !isTawkLoaded) return
        tawkMessengerRef.current.setAttributes({
            reference: user.id,
            name: generateName(user.firstName, user.lastName),
            email: user.email,
            hash: user.tawktoHash,
        }, function (error: unknown) {
            console.log(error)
        })
    }, [user?.tawktoHash, user?.firstName, user?.lastName, user?.email, user?.id, isTawkLoaded])

    return <TawkMessengerReact
        onLoad={() => { setIsTawkLoaded(true) }}
        propertyId="XXXXX"
        widgetId="XXXXX"
        ref={tawkMessengerRef}
    />
}

export default TawkMessenger

using tawk Tawk_API.setAttributes with reactjs

2 Answers2