For MailMergic we use tawk.to for our live chat. With this widget, our users can send us messages directly from our application.
With the previous implementation, we faced the problem that all users were shown to us in the support dashboard in the form of V812368123891237 (or similar). In this anonymized form, it was difficult to assign user requests to logged-in users in our application.
In order to improve our customer support, we faced the challenge of sending user-defined attributes (such as email, first name and last name) from our logged-in users to the tawk.to API.
We were a little surprised that there is no documentation on this, although React is one of the most popular JavaScript frameworks, and tawk.to is also a popular chat widget.
In the following we show you our implementation in React.
First we create a module that calls the tawk.to API and pass our user-defined attributes during the onLoad process (in our example email, first name and last name). We added the module in the directory src/util/tawkto.js.
We then import this module into our AppRouter.js module and use the useEffect hook to call our tawk.to module:
Make sure that you load the widget into your app root so that it is displayed on all pages.
See the full code on Github.
