Reading:
Comment puis-je passer des attributs personnalisés au widget tawk.to dans React ?

Comment puis-je passer des attributs personnalisés au widget tawk.to dans React ?

Avatar photo
février 23, 2023

Pour MailMergic, nous utilisons tawk.to pour notre chat en direct. Grâce à ce widget, nos utilisateurs peuvent nous envoyer des messages directement depuis notre application.

Avec la mise en œuvre précédente, nous étions confrontés au problème suivant : tous les utilisateurs apparaissaient dans le tableau de bord du support sous la forme V812368123891237 (ou similaire). Sous cette forme anonymisée, il était difficile d’attribuer les demandes des utilisateurs aux utilisateurs connectés dans notre application.

Afin d’améliorer notre assistance à la clientèle, nous avons dû relever le défi d’envoyer des attributs définis par l’utilisateur (tels que l’adresse électronique, le prénom et le nom de famille) de nos utilisateurs connectés à l’API tawk.to.

Nous avons été un peu surpris qu’il n’existe aucune documentation à ce sujet, bien que React soit l’un des frameworks JavaScript les plus populaires et que tawk.to soit également un widget de chat populaire.

Dans ce qui suit, nous vous montrons notre implémentation dans React.

Tout d’abord, nous créons un module qui appelle l’API tawk.to et transmet nos attributs définis par l’utilisateur au cours du processus onLoad (dans notre exemple, l’adresse électronique, le prénom et le nom de famille). Nous avons ajouté le module dans le répertoire src/util/tawkto.js.

Nous importons ensuite ce module dans notre module AppRouter.js et utilisons le crochet useEffect pour appeler notre module tawk.to :

Veillez à charger le widget dans la racine de votre application afin qu’il s’affiche sur toutes les pages.

Voir le code complet sur Github.


Related Stories

février 3, 2023

Quelle est la différence : DOC et DOCX