Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Imagine o seguinte: alguém que usa um de seus produtos encontra um problema. Existem alguns canais que eles podem usar para relatar o problema e tentar resolvê-lo.

Entre eles, eles poderiam optar por e-mail ou uma ligação. Mas esses canais de comunicação não garantem respostas rápidas, muito menos em tempo real. Mas um bate-papo ao vivo e interativo com um profissional de suporte ao cliente pode ser inestimável.

Um recurso de bate-papo ao vivo provou ser uma ferramenta de comunicação muito útil. Isso porque permite que você se envolva melhor com os usuários, melhore a experiência do usuário e solucione problemas rapidamente e em tempo real.

O que é chat ao vivo e por que é importante?

Um recurso de bate-papo ao vivo geralmente é incluído como um widget na lateral de uma página da Web ou uma janela pop-up que aparece após o carregamento do site. Ele fornece comunicação em tempo real entre usuários e representantes de atendimento ao cliente ou equipes de suporte, diretamente no aplicativo.

Os usuários do recurso de bate-papo ao vivo podem fazer perguntas urgentes sobre o produto, perguntar sobre áreas que não entendem ou relatar um problema e solicitar soluções. Enquanto isso, suas equipes de suporte ao cliente podem fornecer feedback detalhado e em tempo real, personalizado para o usuário.

Os benefícios de integrar um recurso de bate-papo ao vivo

Integrar um recurso de chat ao vivo pode trazer vários benefícios:

  • Melhorar os esforços de atendimento ao cliente. Um ótimo produto é tão bom quanto seu uso. A integração de um recurso de bate-papo ao vivo ajuda a melhorar significativamente a experiência do usuário, fornecendo uma maneira fácil de obter ajuda e respostas rapidamente. Em última análise, isso ajudará você a oferecer melhores serviços que simplificam o uso do seu produto.
  • Aumentar o engajamento do cliente. Um chat ao vivo permite que os usuários interajam com seu aplicativo em tempo real, fazendo com que se sintam valorizados. Isso os leva a se envolver mais, se inscrever e testar mais recursos.
  • Gere mais leads e aumente as vendas. Este canal de comunicação fornece um meio para interagir com seus usuários pessoalmente. Você pode aproveitar essa oportunidade para captar leads e transformá-los em clientes. Você também pode fornecer recomendações de produtos e vendê-los em pacotes específicos de seu produto.
  • Origem dos dados do usuário. Na economia digital, ter acesso a dados precisos sobre os usuários pode colocá-lo significativamente à frente da concorrência. Quando os usuários informam sobre bugs ou outros problemas do produto, esse feedback é altamente valioso. Você pode aprender mais sobre como eles interagem com seu serviço e usá-lo para melhorar seu produto.

O que é Chatwoot?

O Chatwoot é uma plataforma de atendimento ao cliente de código aberto que fornece uma maneira personalizada de interagir com seus usuários. Ele também fornece uma plataforma simplificada para você responder às perguntas dos usuários e fornecer feedback em vários canais em tempo real.

Você pode usar suas ferramentas de automação, análise e relatórios para analisar o envolvimento do usuário e gerenciar operações de atendimento ao cliente de maneira fácil e eficaz.

Usando este guia, você pode integrar o Chatwoot ao seu aplicativo e testar seu recurso de bate-papo ao vivo com um cliente React e um painel de suporte ao cliente.

Configuração do Projeto Chatwoot

O Chatwoot fornece um plug-in de bate-papo ao vivo personalizável que você pode integrar facilmente ao seu aplicativo. Você pode personalizá-lo o máximo possível para atender às suas necessidades de atendimento ao cliente.

Depois de incorporar o código do plug-in em seu aplicativo, um usuário pode se comunicar com suas equipes de suporte ao cliente e gerenciar essas conversas no painel do agente do Chatwoot.

  1. Dirija-se a Site do Chatwoot, inscreva-se em uma conta e navegue até o painel do usuário.
  2. Para gerenciar as conversas de seus usuários, você precisa primeiro configurar uma caixa de entrada e personalizá-la com base no que você precisa. Clique no Nova caixa de entrada botão para começar.
  3. Agora, selecione o canal no qual deseja integrar o Chatwoot. Para este guia, selecione Local na rede Internet desde que você o esteja integrando a um aplicativo React.
  4. Em seguida, preencha os detalhes do seu site. Para desenvolvimento local, você pode testar o recurso com um URL de domínio de host local, no entanto, depois de implantar na produção, lembre-se de atualizar o domínio com o URL ativo.
  5. Por fim, adicione um(s) agente(s) para gerenciar as conversas nesta caixa de entrada. Pode ser um membro da equipe de suporte ao cliente.

Você configurou com sucesso o bate-papo ao vivo do Chatwoot com seu site definido como um canal de comunicação. O Chatwoot gerará o código que você precisa incorporar em seu aplicativo para adicionar o widget de recurso de bate-papo ao vivo. Esse código é muito flexível, pois você o integra facilmente a um cliente da Web criado com qualquer um dos Estruturas de front-end JavaScript.

Se você quiser personalizar ainda mais a configuração, clique no botão Mais configurações botão.

Reagir configuração do projeto

Crie um aplicativo React e incorpore o plug-in de bate-papo ao vivo do Chatwoot para testar o recurso. Criar um aplicativo React e crie um arquivo ENV no diretório raiz da pasta do seu projeto para manter o token do seu site.

REACT_APP_WEBSITE_TOKEN = símbolo

A seguir, no origem diretório, crie uma nova pasta e nomeie-a como components. Nesta pasta crie um novo arquivo: livechat.js.

Adicione o seguinte código a este arquivo:

importar Reagir, {useEffect} de'reagir'
funçãoBate-papo ao vivo () {
 useEffect(() => {
janela.chatwootSettings = {
 hideMessageBubble: falso,
 posição: "certo", 
 localidade: "en", 
tipo: "padrão"
 };

 (função(d, t) {
var BASE_URL = " https://app.chatwoot.com";
var g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 g. adiar = verdadeiro;
 g.async = verdadeiro;
s.parentNode.inserirAntes(g, s);


 g.onload = função() {
janela.chatwootSDK.correr({
websiteToken: processo.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(documento, "roteiro");
 }, []);


retornarnulo;
};
exportarpadrão Bate-papo ao vivo;

Este código integra o recurso de bate-papo ao vivo do Chatwoot em seu aplicativo React. O gancho useEffect executa o código dentro do retorno de chamada uma vez quando o componente é montado. Primeiro, ele inicializa as configurações do Chatwoot para o recurso. Em seguida, ele executa a função de plug-in, fornecida pelo Chatwoot, que configura o widget de bate-papo ao vivo na página.

Ele passa o websiteToken como parâmetro para a função chatwootSDK.run que conecta o aplicativo à sua conta do Chatwoot. Por fim, a função de bate-papo ao vivo retorna nulo, pois não é necessário renderizar nenhum elemento HTML.

Teste o recurso de bate-papo ao vivo

  1. Importe este componente em seu app.js arquivo e ative o servidor de desenvolvimento para atualizar as alterações feitas. Você deve ver o widget de bate-papo ao vivo em seu React em execução no navegador.
  2. Para testar o recurso de bate-papo ao vivo, clique no widget para abrir o mural de bate-papo e digite uma mensagem.
  3. Agora, vá para o painel de usuário do Chatwoot e navegue até sua caixa de entrada, você verá uma nova mensagem. Por padrão, o Chatwoot gerará algumas mensagens e responderá automaticamente imediatamente após o usuário enviar uma mensagem, como as que você vê abaixo. Digite uma resposta para a mensagem e clique em enviar. Volte para o mural de bate-papo do widget em seu aplicativo para ver a resposta.

Você integrou com sucesso um recurso de bate-papo ao vivo em seu aplicativo com poucas linhas de código.

Vale a pena usar um recurso de bate-papo ao vivo?

Um recurso de bate-papo ao vivo é uma ótima maneira de fornecer atendimento ao cliente, aumentar a satisfação do cliente e melhorar a experiência do usuário.

Ele fornece um canal de comunicação com potencial para aumentar o engajamento, reduzir o tempo de resposta e personalizar o atendimento ao cliente. Em última análise, deve ajudá-lo a melhorar as operações de atendimento ao cliente com pouco esforço.