Como posso passar atributos personalizados para o widget tawk.to no React?

Para o MailMergic, usamos o tawk.to para nosso chat ao vivo. Com este widget, nossos usuários podem nos enviar mensagens diretamente do nosso aplicativo.

Com a implementação anterior, enfrentamos o problema de que todos os usuários eram mostrados para nós no painel de suporte na forma de V812368123891237 (ou similar). Nesta forma anônima, era difícil atribuir solicitações de usuários a usuários logados em nosso aplicativo.

Para melhorar nosso suporte ao cliente, enfrentamos o desafio de enviar atributos definidos pelo usuário (como e-mail, nome e sobrenome) de nossos usuários logados para a API tawk.to.

Ficamos um pouco surpresos com o fato de não haver documentação sobre isso, embora o React seja uma das estruturas JavaScript mais populares, e o tawk.to também seja um widget de chat popular.

A seguir, mostramos nossa implementação no React.

Primeiro, criamos um módulo que chama a API tawk.to e passamos nossos atributos definidos pelo usuário durante o processo de onLoad (em nosso exemplo, e-mail, nome e sobrenome). Adicionamos o módulo no diretório src/util/tawkto.js.

Em seguida, importamos este módulo para o nosso módulo AppRouter.js e usamos o hook useEffect para chamar nosso módulo tawk.to:

Certifique-se de carregar o widget na raiz do seu aplicativo para que ele seja exibido em todas as páginas.

Veja o código completo no Github.