Um guia para desenvolvedores sobre a integração do chat Zendesk com React

Se alguma vez tentou enfiar à força uma ferramenta tradicional, baseada em script, numa aplicação de página única (SPA) moderna construída com React, provavelmente conhece a sensação. Deveria ser simples, mas raramente o é. O widget de chat do Zendesk é um exemplo perfeito. À primeira vista, é apenas um trecho de código, mas uma rápida pesquisa no Stack Overflow ou no Reddit conta uma história de programadores a lutar com ciclos de vida de componentes, roteamento e autenticação.

Este guia é para quem já passou por isso. Vamos percorrer as diferentes formas de lidar com uma integração Zendesk Chat React, analisar os prós e contras de cada uma e, depois, falar sobre por que uma alternativa mais poderosa e nativa de IA pode ser o caminho mais inteligente a seguir.

O que é o Zendesk Chat?

O Zendesk Chat é uma ferramenta de chat ao vivo que permite às empresas falar com os clientes diretamente no seu site ou aplicação. De certeza que já o viu, é aquele pequeno widget que aparece no canto, a perguntar se precisa de ajuda.

O seu principal objetivo é abrir uma linha direta para suporte em tempo real, captar leads e interagir com as pessoas que navegam num site. Faz parte do puzzle maior da Zendesk, que inclui sistemas de tickets e centrais de ajuda. No entanto, na sua essência, o Zendesk Chat foi concebido para uma conversa simples, um-para-um, entre um agente humano e um cliente. Esse detalhe torna-se bastante importante mais à frente.

Métodos comuns para a integração Zendesk Chat React

Como a Zendesk não tem um SDK oficial de React para o seu widget web, a comunidade de programadores ficou por sua conta. Com o tempo, surgiram duas abordagens principais: meter as mãos na massa e injetar o script por conta própria, ou recorrer a um pacote criado pela comunidade para fazer o trabalho pesado.

Método 1: A abordagem de injeção direta de script

Esta é a rota do faça você mesmo. Envolve adicionar o trecho de JavaScript do Zendesk diretamente na sua aplicação React. Poderia simplesmente colocá-lo no seu ficheiro "public/index.html", mas para um melhor controlo, é mais inteligente injetá-lo dinamicamente usando um hook como o "useEffect". Fazê-lo dinamicamente é geralmente a forma correta em React, porque permite-lhe decidir exatamente quando o script é carregado e, mais importante, quando é limpo.

Eis como um componente simples para isso poderia ser:

"`javascript

import React, { useEffect } from ‘react’;

const ZENDESK_KEY = ‘A_SUA_CHAVE_DO_WIDGET_ZENDESK’;

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 () => {  

  // Limpar o script e o widget na desmontagem do componente  

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

  const b = document.getElementById(‘launcher’); // O iframe do widget  

  if (a) {  

     a.remove()  

  }  

  if (b) {  

     b.remove()  

  }  

};  

}, []);

return null;

};

export default ZendeskChat;

"`

Isto funciona, mas traz algumas dores de cabeça reais:

• O widget fica confuso com o React Router. O widget do Zendesk não foi construído para SPAs. Pode acabar por permanecer em páginas onde não o quer ou não conseguir reiniciar quando um utilizador navega, o que leva a uma experiência com bugs e inconsistente.

• A autenticação é uma chatice. Como muitos programadores nos fóruns da comunidade Zendesk apontaram, acertar no timing com utilizadores autenticados é uma confusão. Tem de garantir que o script está totalmente carregado e que a sua aplicação confirmou a identidade do utilizador antes de poder pré-preencher as informações dele. Se errar o timing, recebe erros 401.

• Gerir o estado é desajeitado. O widget opera fora do controlo do React, vivendo no objeto global "window". Se quiser controlar o seu estado (como abri-lo ou fechá-lo) a partir dos seus componentes React, acaba por escrever código estranho e difícil de manter que parece deslocado.

Método 2: Usar bibliotecas de terceiros

Para contornar alguns destes problemas, outros programadores criaram bibliotecas wrapper que lhe dão uma forma mais "tipo React" de lidar com o widget. Pacotes como "react-use-zendesk" e "react-zendesk" são escolhas comuns.

Estas bibliotecas geralmente fornecem um componente "Provider" e um hook personalizado, que esconde toda a lógica confusa de carregamento de scripts.

Eis uma rápida olhada em como poderia usar o "react-use-zendesk":

"`javascript

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

const ChatButton = () => {

const { open } = useZendesk();

return Abrir Chat;

};

const App = () => (

);

"`

Esta abordagem é definitivamente mais limpa, mas não é uma solução milagrosa.

Por um lado, limpa o seu código e faz com que a comunicação com o widget pareça mais natural num ambiente React. Não tem de injetar scripts manualmente nem de se preocupar com a limpeza.

Por outro lado, está a adicionar mais uma dependência ao seu projeto. Isso significa que agora depende de um mantenedor de terceiros para manter as coisas atualizadas e seguras. Mais importante, estas bibliotecas são apenas wrappers simpáticos. Elas não corrigem as limitações centrais do próprio widget do Zendesk.

Os limites de uma integração Zendesk Chat React básica

Fazer com que o widget apareça na sua aplicação é uma coisa. Mas a questão maior é se uma simples caixa de chat ao vivo realmente dá aos clientes o que eles esperam hoje. E, na maioria das vezes, a resposta é não.

Ferramentas como o Zendesk Chat foram construídas para uma era diferente e têm algumas limitações claras.

Tudo depende de um ser humano. O widget é apenas uma linha direta para um agente. Se a sua equipa estiver offline ou sobrecarregada, o utilizador vê apenas um formulário de "deixe uma mensagem", que é basicamente um e-mail sofisticado. Essa não é a ajuda instantânea que as pessoas procuram.

O conhecimento está preso em silos. O widget em si não consegue responder a nada. Depende completamente de um agente humano a procurar informações numa base de conhecimento, num documento interno ou no seu próprio cérebro. Não tem como aceder à informação valiosa que tem armazenada em locais como o Confluence, Google Docs ou mesmo em resoluções de tickets passados.

A automação é rígida. Embora a Zendesk esteja a adicionar mais funcionalidades de IA, os seus bots nativos podem parecer desajeitados e exigir muita configuração manual. Eles têm dificuldade em lidar com tarefas complexas, aprender com as conversas automaticamente ou adaptar-se à voz única da sua empresa sem um grande trabalho inicial.

Estes são exatamente os problemas que estão a levar as equipas a olhar para além do chat ao vivo básico e em direção a soluções de IA que são construídas para a forma como trabalhamos hoje.

A alternativa moderna: Um agente de IA

É aqui que uma ferramenta como o eesel AI muda o jogo. Não é apenas mais um widget de chat; é uma plataforma de IA construída para se conectar com as ferramentas que já utiliza, incluindo o Zendesk. Foi concebida para resolver os mesmos problemas que fazem o chat tradicional parecer tão datado.

Eis como o eesel AI aborda o problema de forma diferente:

A configuração é realmente rápida. Esqueça a luta com hooks "useEffect" e carregadores de scripts. O eesel AI é completamente self-service. Pode conectar as suas fontes de conhecimento e ter um chatbot de IA genuinamente útil a funcionar em minutos, sem escrever código de integração complicado.

Todo o seu conhecimento, num só lugar. O Chatbot de IA do eesel AI pode ser treinado na sua central de ajuda do Zendesk e em tickets passados, mas aqui está a chave: ele também se conecta a todas as suas outras fontes de conhecimento. Ligue-o ao Confluence, Google Docs, às suas wikis internas, o que quiser. Isto significa que ele dá respostas instantâneas e precisas 24/7, recorrendo a todo o cérebro da sua empresa, não apenas a uma única central de ajuda.

Este infográfico mostra como o eesel AI se conecta a várias fontes de conhecimento para fornecer respostas abrangentes, uma alternativa moderna a uma integração básica Zendesk Chat React.

Implemente com confiança. Um dos maiores medos com a IA é simplesmente deixá-la à solta com os clientes. O eesel AI oferece um modo de simulação que lhe permite testar a IA em milhares dos seus tickets históricos antes que ela fale com uma pessoa real. Pode ver exatamente como teria respondido, o que lhe permite implementá-la de forma gradual e confiante, em vez da abordagem de "ligar e esperar pelo melhor" das ferramentas mais antigas.

Esta imagem mostra o modo de simulação do eesel AI, onde pode testar o desempenho da IA com dados históricos antes de a implementar na sua configuração Zendesk Chat React.

Uma olhada nos preços do Zendesk

Para lhe dar uma visão completa, ajuda saber quanto custa o ecossistema Zendesk. Embora os planos de entrada sejam acessíveis, as funcionalidades de que precisa para uma configuração de suporte moderna, como chat ao vivo e IA básica, só estão disponíveis nos planos Suite mais caros.

Nota: Os preços podem mudar. Consulte a página oficial de preços da Zendesk para obter as informações mais recentes.

Trata-se de inteligência, não apenas de integração

Pode absolutamente pôr uma integração Zendesk Chat React a funcionar. Quer injete o script você mesmo ou use uma biblioteca de terceiros, é exequível. Mas ambos os caminhos vêm com dores de cabeça técnicas e não alteram o facto de que a ferramenta em si tem limites funcionais.

O verdadeiro desafio para as equipas de suporte e de produto hoje não é apenas fazer um widget aparecer numa página. É sobre fornecer a ajuda inteligente, instantânea e automatizada que os clientes realmente querem. Uma simples janela de chat ao vivo já não é suficiente.

Para as equipas que atingiram o limite do que uma ferramenta de chat básica pode fazer, o eesel AI é o próximo passo lógico. Ele melhora o investimento que já fez no Zendesk, adicionando uma plataforma de IA poderosa e fácil de gerir por cima. Transforma um simples botão de contacto num motor de resolução que funciona 24 horas por dia.

Se está cansado de lutar com a forma antiga de fazer as coisas, veja o que um chatbot verdadeiramente inteligente pode fazer pela sua configuração Zendesk. Experimente o eesel AI gratuitamente e pode ter um agente de IA treinado no seu próprio conhecimento em menos de 5 minutos.