Confusing documentation, setAttributes not working

[felixmpaulus]

When using setAttributes(), the attributes are not set and the error UNAUTHORIZED_API_CALL is passed to the callback function. It could be caused by a wrong hash, but I am not sure.
Issue 1: That error code is nowhere to be found in the docs, so I have no idea what it means.

Issue 2: The documentation has conflicting information about calculating the hash:
"hash is a combination of userId + site API key using HMAC SHA256" and "The hash is server side generated HMAC using SHA256, the user’s email and your site’s API key."

Issue 3: The how-to-use.md is stilling using useRef={} instead of ref={} (another issue mentioned this)

Could someone please give me input on my React code and maybe point me in the right direction? I would really appreciate that.

import React, { useRef } from 'react'
import TawkMessengerReact from '@tawk.to/tawk-messenger-react'
import * as CryptoJS from 'crypto-js'
import { TAWK_API_KEY } from './constants/constants'

interface TawkMessengerReactRef {
  setAttributes: (attributes: object, callback: (error: any) => void) => void
}

export default function Container() {
  const tawkMessengerRef = useRef<TawkMessengerReactRef | null>(null)

  const onLoad = () => {
    if (tawkMessengerRef?.current?.setAttributes) {
      const {
        myshopifyDomain,
        contactEmail,
        appBlocksSupported,
        installedOn,
        planName,
      } = merchantInformation
      const hash = hashInBase64(myshopifyDomain)
      tawkMessengerRef.current.setAttributes(
        {
          hash,
          userId: myshopifyDomain,
          name: myshopifyDomain,
          email: contactEmail,
          appBlocksSupported,
          installedOn,
          planName,
        },
        function (e) {
          console.log(e)
        },
      )
    }
  }

  function hashInBase64(userId) {
    var hash = CryptoJS.HmacSHA256(userId, TAWK_API_KEY)
    return CryptoJS.enc.Hex.stringify(hash)
  }

  return <AppContext.Provider value={} >
            <Routes pages={pages} />
            <TawkMessengerReact
              propertyId="6503..."
              widgetId="1haa..."
              onLoad={onLoad}
              ref={tawkMessengerRef}
            />
          </AppContext.Provider>
}

The hash comes out like this: 32422195d1615c8c23d46ff496e23b032aa71df7b6b85d97a8f832121991dfbc
Secure Mode is enabled.
Secret is stored on the frontend only for development purposes.
I am not even able to find the request going out, so I have no idea how to continue debugging this.

Thank you! :)

[felixmpaulus]

Well I got it to set the Attributes now.

One attribute is consistently not being set even though the objects that I pass is valid.

All attributes apart from the email are not displayed in the mobile app, but only in the web interface, which is not helpful at all.

And sometimes tawk throws an error INVALID_EMAIL (also nowhere documented), even though the email is definitely valid. The email is "info@abc.store" where I replaced the original domain with abc. Maybe some regex is not handling the .store domain? Just a guess.

[mrniamster]

Any solution to this yet ?

[felixmpaulus]

Maybe it was a propagation issue. During development it would not work at all. But in production the API now works for about 80% of visitors. Took a few days to get up to that number. Weird.

I know use import @tawk.to/tawk-messenger-react and trigger the setAttributes() with a useEffect() once the data is available.

[andreisaikouski]

@felixmpaulus Im trying to use the @tawk.to/tawk-messenger-react package and setAttributes() method as well, but I still get UNAUTHORIZED_API_CALL error.
Any idea why? I wish the app had a bit better support.

Here is my hash code:

function hashInBase64(str: string) {
    const hash = CryptoJS.HmacSHA256(str, process.env.TAWK_API);
    return CryptoJS.enc.Hex.stringify(hash);
}

[Red-Killer]

@andreisaikouski A bit late but here is the code I use which works fine:

const calcHash = (email: string) =>
  crypto
    .createHmac("sha256", process.env.TAWK_API_KEY!)
    .update(email)
    .digest("hex");

[jaoaustero]

Hello everyone, the setAttributes was async call in our backend thats why it takes a while before it appears in your dashboard. If you data is already prepared before the widget loads you can use the visitor API instead it will be realtime to update the customer data

[AdiCahyaSaputra]

I ended up create it manually

VITE_TAWK_SCRIPT_SRC="https://embed.tawk.to/<PROPERTY_ID>/<WIDGET_ID>"

// Somewhere on your root wrapper
<html lang="en" suppressHydrationWarning>
	<head>
		<HeadContent />
		<script
			async
			src={import.meta.env.VITE_TAWK_SCRIPT_SRC}
			crossOrigin="anonymous"
		></script>
	</head>
	<body>
		...
	</body>
</html>

And create react hook utility

export default function useTawk() {
	const setAttributes = (attributes: Record<string, string>, callback?: () => void) => {
		if (window.Tawk_API) {
			window.Tawk_API.setAttributes(attributes, callback);
		}
	};

	return { setAttributes };
}

Then defining the global.d.ts (at the root of your project)

interface Tawk {
	setAttributes: (attributes: Record<string, string>, callback?: () => void) => void;
};

declare global {
  interface Window {
    Tawk_API: Tawk;
  }
}

export {};