Un guide du développeur pour l’intégration de Zendesk Chat et React

Si vous avez déjà essayé d’intégrer de force un outil traditionnel basé sur un script dans une application monopage (SPA) moderne construite avec React, vous connaissez probablement ce sentiment. Ça devrait être simple, mais ça l’est rarement. Le widget de chat Zendesk en est un parfait exemple. En apparence, il ne s’agit que d’un simple extrait de code, mais un rapide coup d’œil sur Stack Overflow ou Reddit révèle une tout autre histoire : des développeurs qui se battent avec les cycles de vie des composants, le routage et l’authentification.

Ce guide s’adresse à tous ceux qui ont vécu cette situation. Nous allons passer en revue les différentes manières de gérer une intégration Zendesk Chat React, examiner les avantages et les inconvénients de chacune, puis discuter des raisons pour lesquelles une alternative plus puissante, nativement IA, pourrait de toute façon être la voie la plus intelligente à suivre.

Qu’est-ce que Zendesk Chat ?

Zendesk Chat est un outil de chat en direct qui permet aux entreprises de parler directement avec leurs clients sur leur site web ou leur application. Vous l’avez certainement déjà vu, c’est ce petit widget qui apparaît dans un coin et qui vous demande si vous avez besoin d’aide.

Sa fonction principale est d’ouvrir une ligne directe pour une assistance en temps réel, de capter des prospects et d’interagir avec les personnes qui parcourent un site. Il s’agit d’une pièce du puzzle Zendesk, qui comprend des systèmes de tickets et des centres d’aide. Mais au fond, Zendesk Chat est conçu pour une conversation simple et individuelle entre un agent humain et un client. Ce détail deviendra très important plus tard.

Méthodes courantes pour l’intégration de Zendesk Chat avec React

Comme Zendesk ne dispose pas d’un SDK React officiel pour son widget web, la communauté des développeurs a dû se débrouiller seule. Au fil du temps, deux approches principales ont émergé : mettre les mains dans le cambouis et injecter le script soi-même, ou s’appuyer sur un paquetage développé par la communauté pour faire le gros du travail.

Méthode 1 : L’approche par injection directe de script

C’est la voie du bricolage. Elle consiste à ajouter l’extrait de code JavaScript de Zendesk directement dans votre application React. Vous pourriez simplement le déposer dans votre fichier « public/index.html », mais pour un meilleur contrôle, il est plus judicieux de l’injecter dynamiquement à l’aide d’un hook comme « useEffect ». Le faire dynamiquement est généralement la meilleure façon de procéder dans React, car cela vous permet de décider exactement quand le script se charge et, plus important encore, quand il est nettoyé.

Voici à quoi pourrait ressembler un composant simple pour cela :

"`javascript

import React, { useEffect } from ‘react’;

const ZENDESK_KEY = ‘YOUR_ZENDESK_WIDGET_KEY’;

const ZendeskChat = () => {

useEffect(() => {

const script =   

script.id = ‘ze-snippet’;  

script.src = `https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_KEY}`;  

script.async = true;  

document.body.appendChild(script);  

return () => {  

  // Nettoyer le script et le widget lors du démontage du composant  

  const a = document.getElementById(‘ze-snippet’);  

  const b = document.getElementById(‘launcher’); // L’iframe du widget  

  if (a) {  

     a.remove()  

  }  

  if (b) {  

     b.remove()  

  }  

};  

}, []);

return null;

};

export default ZendeskChat;

"`

Cela fonctionne, mais apporte son lot de vrais casse-têtes :

• Le widget est perturbé par React Router. Le widget Zendesk n’a pas été conçu pour les SPA. Il peut finir par rester sur des pages où vous n’en voulez pas ou ne pas se réinitialiser lorsqu’un utilisateur navigue, ce qui entraîne une expérience boguée et incohérente.

• L’authentification est une plaie. Comme de nombreux développeurs l’ont souligné dans les forums de la communauté Zendesk, trouver le bon timing avec les utilisateurs authentifiés est un vrai bazar. Vous devez vous assurer que le script est entièrement chargé et que votre application a confirmé l’identité de l’utilisateur avant de pouvoir pré-remplir ses informations. Si vous vous trompez de timing, vous vous heurtez à des erreurs 401.

• La gestion de l’état est maladroite. Le widget fonctionne en dehors du contrôle de React, vivant dans l’objet global « window ». Si vous voulez contrôler son état (comme l’ouvrir ou le fermer) depuis vos composants React, vous finissez par écrire du code peu pratique, difficile à maintenir et qui semble déplacé.

Méthode 2 : Utiliser des bibliothèques tierces

Pour contourner certains de ces problèmes, d’autres développeurs ont créé des bibliothèques d’encapsulation qui vous offrent une manière plus « React-like » de gérer le widget. Des paquets tels que « react-use-zendesk » et « react-zendesk » sont des choix courants.

Ces bibliothèques vous fournissent généralement un composant « Provider » et un hook personnalisé, qui cachent toute la logique compliquée de chargement de script.

Voici un aperçu rapide de la façon dont vous pourriez utiliser « react-use-zendesk » :

"`javascript

import { ZendeskProvider, useZendesk } from ‘react-use-zendesk’;

const ChatButton = () => {

const { open } = useZendesk();

return Ouvrir le chat;

};

const App = () => (

);

"`

Cette approche est certainement plus propre, mais ce n’est pas une solution miracle.

D’un côté, cela nettoie votre code et rend la communication avec le widget plus naturelle dans un environnement React. Vous n’avez pas à injecter manuellement des scripts ni à vous soucier du nettoyage.

D’un autre côté, vous ajoutez une autre dépendance à votre projet. Cela signifie que vous dépendez désormais d’un mainteneur tiers pour que les choses restent à jour et sécurisées. Plus important encore, ces bibliothèques ne sont que de jolis emballages. Elles ne corrigent pas les limitations fondamentales du widget Zendesk lui-même.

Les limites d’une intégration basique de Zendesk Chat avec React

Faire apparaître le widget dans votre application est une chose. Mais la vraie question est de savoir si une simple boîte de chat en direct offre réellement aux clients ce qu’ils attendent aujourd’hui. Et le plus souvent, la réponse est non.

Des outils comme Zendesk Chat ont été conçus pour une autre époque, et ils présentent des limites évidentes.

Tout dépend d’un être humain. Le widget n’est qu’une ligne directe vers un agent. Si votre équipe est hors ligne ou débordée, l’utilisateur ne voit qu’un formulaire « laisser un message », qui est essentiellement un e-mail sophistiqué. Ce n’est pas l’aide instantanée que les gens recherchent.

La connaissance est piégée dans des silos. Le widget lui-même ne peut répondre à rien. Il dépend entièrement d’un agent humain qui doit dénicher des informations dans une base de connaissances, un document interne ou sa propre mémoire. Il n’a aucun moyen d’exploiter les informations précieuses que vous avez stockées dans des endroits comme Confluence, Google Docs, ou même dans les résolutions de tickets passés.

L’automatisation est rigide. Bien que Zendesk ajoute de plus en plus de fonctionnalités d’IA, ses bots natifs peuvent sembler peu pratiques et nécessitent beaucoup de configuration manuelle. Ils ont du mal à gérer des tâches complexes, à apprendre automatiquement des conversations ou à s’adapter à la voix unique de votre entreprise sans un travail préparatoire considérable.

Ce sont précisément ces problèmes qui poussent les équipes à regarder au-delà du simple chat en direct et à se tourner vers des solutions d’IA conçues pour notre façon de travailler aujourd’hui.

L’alternative moderne : un agent IA

C’est là qu’un outil comme eesel AI change la donne. Ce n’est pas juste un autre widget de chat ; c’est une plateforme d’IA conçue pour se connecter aux outils que vous utilisez déjà, y compris Zendesk. Elle est conçue pour résoudre les problèmes mêmes qui rendent le chat traditionnel si désuet.

Voici comment eesel AI aborde le problème différemment :

L’installation est réellement rapide. Oubliez les prises de tête avec les hooks « useEffect » et les chargeurs de script. eesel AI est entièrement en libre-service. Vous pouvez connecter vos sources de connaissances et obtenir un chatbot IA réellement utile en quelques minutes, sans écrire de code d’intégration compliqué.

Toutes vos connaissances, en un seul endroit. Le Chatbot IA d’eesel AI peut être entraîné sur votre centre d’aide Zendesk et vos anciens tickets, mais voici la clé : il se connecte également à toutes vos autres sources de connaissances. Connectez-le à Confluence, Google Docs, vos wikis internes, etc. Cela signifie qu’il fournit des réponses instantanées et précises 24h/24 et 7j/7 en puisant dans l’ensemble du cerveau de votre entreprise, pas seulement dans un unique centre d’aide.

Cette infographie montre comment eesel AI se connecte à diverses sources de connaissances pour fournir des réponses complètes, une alternative moderne à une intégration basique de Zendesk Chat avec React.

Déployez-le en toute confiance. L’une des plus grandes craintes avec l’IA est de la laisser interagir librement avec les clients. eesel AI vous offre un mode de simulation qui vous permet de tester l’IA sur des milliers de vos tickets historiques avant même qu’elle ne parle à une personne réelle. Vous pouvez voir exactement comment elle aurait répondu, ce qui vous permet de la déployer progressivement et en toute confiance, au lieu de l’approche « on branche et on croise les doigts » des anciens outils.

Cette image montre le mode de simulation d'eesel AI, où vous pouvez tester les performances de l'IA avec des données historiques avant de la déployer dans votre configuration Zendesk Chat React.

Un aperçu de la tarification de Zendesk

Pour vous donner une vue d’ensemble, il est utile de savoir ce que coûte l’écosystème Zendesk. Bien que les plans d’entrée de gamme soient abordables, les fonctionnalités dont vous avez besoin pour une configuration de support moderne, comme le chat en direct et l’IA de base, ne sont disponibles que dans les plans Suite plus chers.

Remarque : les prix peuvent changer. Consultez la page officielle des tarifs de Zendesk pour les informations les plus récentes.

Une question d’intelligence, pas seulement d’intégration

Vous pouvez tout à fait faire fonctionner une intégration de Zendesk Chat avec React. Que vous injectiez le script vous-même ou que vous utilisiez une bibliothèque tierce, c’est faisable. Mais les deux chemins s’accompagnent de maux de tête techniques et ne changent rien au fait que l’outil lui-même a des limites fonctionnelles.

Le véritable défi pour les équipes de support et de produit aujourd’hui n’est pas seulement de faire apparaître un widget sur une page. Il s’agit de fournir l’aide intelligente, instantanée et automatisée que les clients veulent réellement. Une simple fenêtre de chat en direct ne suffit plus.

Pour les équipes qui ont atteint les limites de ce qu’un outil de chat de base peut faire, eesel AI est la prochaine étape logique. Elle améliore l’investissement que vous avez déjà fait dans Zendesk en y superposant une plateforme d’IA puissante et facile à gérer. Elle transforme un simple bouton de contact en un moteur de résolution qui fonctionne 24 heures sur 24.

Si vous en avez assez de vous battre avec l’ancienne façon de faire, découvrez ce qu’un chatbot vraiment intelligent peut faire pour votre configuration Zendesk. Essayez eesel AI gratuitement et vous pourrez avoir un agent IA entraîné sur vos propres connaissances en moins de 5 minutes.