You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Integração do app Twilio WebChat React ao Flex

Visão geral

O app Twilio WebChat React é um projeto de open source desenvolvido com o SDK JS Conversations da Twilio, a Twilio Paste Design Library e o app Create React, que fornece um exemplo de como criar um widget de webchat básico, integrá‐lo à plataforma Flex e usá‐lo como um canal de comunicação entre os visitantes do seu site e o seu contact center com tecnologia Flex.

Com este guia, você pode saber mais sobre os recursos do app Twilio Webchat React, como trabalhar com ele localmente, implantar seu próprio app de webchat para produção e muito mais. Você pode acessar o código‐fonte do app Webchat React visitando o Repositório GitHub oficial.

O que você recebe

Este repositório de open source inclui:

  • Recursos básicos de chat, como indicadores de digitação, recibos de leitura e suporte a anexos
  • Integração com o centro de suporte ao cliente Flex para ter agentes que respondem a chats recebidos em minutos
  • Acessibilidade na Web com o Paste Design System
  • Instruções fáceis de executar localmente ou implantar em seu site
  • Não é necessária nenhuma alteração de código para começar. Você pode usar como recebe ou clonar para personalizar de acordo com suas necessidades

O diagrama a seguir ilustra uma maneira potencial de integrar seu aplicativo de Chat ao Flex:

potential integration diagram

  • O Twilio Flex vem com um serviço padrão do Conversations. Saiba mais sobre o serviço do Conversations e a API do Conversations para o Flex aqui.
  • O serviço do Conversations aponta para um Studio Flow (fluxo do Studio), onde é possível definir um fluxo de trabalho para conversas de chat recebidas, como enviar uma mensagem de boas‐vindas ou chamar uma interação de bot mais abrangente.
  • Quando deve‐se encaminhar a conversa para uma pessoa, o widget do Studio Send to Flex (Enviar para o Flex) criará uma tarefa no TaskRouter (mecanismo de roteamento do Flex) e a encaminhará para um agente adequado. Saiba mais sobre o widget Send to Flex (Enviar para o Flex) e o roteamento do Flex.
  • Uma conversa recebida é então apresentada ao agente por meio do Flex UI (IU do Flex) e, depois de aceitar a tarefa, o agente e o consumidor podem iniciar o chat. Saiba mais sobre a experiência do Flex Messaging (Mensagens do Flex) para agentes aqui.
  • Quando a conversa terminar e puder ser concluída, o agente pode encerrá‐la e o consumidor será informado.

Esta página aborda os princípios básicos de como o app Webchat React se integra ao Flex.

Iniciar uma conversa

ETAPA 1: O usuário deseja iniciar uma nova conversa

O app Webchat React demonstra um caso de uso em que um widget de chat flutuante persistente está visível no canto inferior direito do seu site.

Ele também inclui um formulário de pré‐engajamento simples que permite que você reúna informações sobre quem é o usuário e com que tópico ele precisa de ajuda para um serviço mais personalizado antes de iniciar uma conversa. O Twilio Conversations usa o friendlyName do participante da conversa para exibir o nome do cliente no chat. Se o campo estiver vazio, o app retornará à propriedade do autor da Conversation Message (Mensagem da conversa).

Você também pode substituir o nome amigável do participante atualizando a propriedade memberDisplayOptions do Flex WebChat. Para ver um exemplo, consulte a configuração do Flex WebChat aqui.

Após preencher o formulário e clicar em "Start chat" (Iniciar o chat), o usuário invoca uma nova conversa.

O app de webchat implementa um servidor back‐end local que é chamado quando uma nova conversa é iniciada, que por sua vez chama a API REST v2/WebChannels do Flex e passa os seguintes parâmetros:

{

  "address_sid": "string",

  "chat_friendly_name": "string",

  "customer_friendly_name": "string",

  "pre_engagement_data": "string"

}

Para uso na produção, é preciso implementar seu próprio servidor (nós o referiremos como Seu servidor back‐end de webchat na documentação) que lidará com a comunicação com os serviços Flex.

STEP 2: O Flex orquestra a criação de uma nova conversa

  • Crie uma conversa com o pre_engagement_data passado
  • Crie um usuário e adicione‐o como um participante com nome chat_friendly passado
  • Invoque o fluxo do Studio com o address_sid fornecido
  • Retorne o participant_sid e o conversation_sid

STEP 3: O app de webchat inicializa e inicia uma nova conversa

Seu servidor back‐end de webchat receberá uma identidade e um conversation_sid e os usará para gerar um token e transmiti‐lo de volta para o app de webchat junto com o conversation_sid para inicializar o SDK do Conversations e carregar a conversa com o conversation_sid fornecido.

Acionar um fluxo do Studio e encontrar um agente

A orquestração do Flex Conversations foi projetada de forma que um evento, como uma mensagem publicada na conversa, acione o Studio Flow (Fluxo do Studio). No app de webchat, implementamos um exemplo de como isso pode ser feito:

O formulário de pré‐engajamento pergunta ao cliente: "Como podemos ajudar?" . A resposta é então publicada pelo servidor local (e pode ser publicada pelo Seu servidor back‐end de webchat) como uma conversationMessage usando a API do Conversations.

O servidor local também publica uma mensagem de boas‐vindas do "Concierge" como um autor que segue a mensagem do cliente, informando‐o de que um agente estará com ele em breve. Essa mensagem não aciona um fluxo do Studio porque é publicada com a propriedade xTwilioWebhookEnabled definida como false. O fluxo do Studio é acionado apenas após o usuário enviar a sua primeira mensagem (saiba mais sobre isso aqui). Como em nosso fluxo padrão do Studio o primeiro widget é o widget SendToFlex, a próxima ação será localizar um agente e adicioná‐lo à conversa.

Esse é um dos exemplos de como iniciar uma conversa com o cliente. Em vez de chamar o widget SendToFlex imediatamente, você também pode continuar com uma conversa de bot até que um ser humano seja necessário para lidar com a conversa.

Encerrar a conversa

O app de webchat também demonstra como uma conversa pode ser encerrada pelo agente. Os agentes do Flex podem marcar a conversa como encerrada quando estiverem finalizando e concluindo a tarefa. Ao fazer isso, o Flex altera o status da conversa, o que aciona um evento para o SDK do Conversations.

Para saber mais sobre o ciclo de vida de uma conversa, consulte Ciclo de vida de uma conversa.

O app de webchat ouve este evento e atualiza a visualização para refletir que a conversa foi encerrada. Uma vez encerrada, o cliente pode iniciar uma nova conversa.

Como passar e usar os dados de pré-engajamento?

A propriedade de dados de pré‐engajamento é disponibilizada na API REST para passar qualquer informação contextual que você possa reunir a partir das interações de seus usuários no site (identidade dos usuários, páginas visitadas etc.) que possam ser relevantes para as conversas de chat. Ela pode ser usada no fluxo do Studio como contexto para interações de bot ou no widget Send to Flex (Enviar para o Flex) para um roteamento mais preciso.

Neste app de demonstração, reunimos as informações dos usuários no formulário de pré‐engajamento e as passamos para a criação de uma nova conversa.

Esses dados são salvos nos atributos conversations.attributes.pre_engagement_data da conversa e podem ser acessados diretamente usando a API REST do Conversations ou no fluxo do Studio.

O Studio usa a sintaxe Liquid para acessar os dados de pré‐engajamento em um widget do Studio. Por exemplo, veja como você pode acessar o atributo da pergunta a partir dos dados do formulário de pré‐engajamento:

{{trigger.conversation.ChannelAttributes.pre_engagement_data.question}}

E veja como você pode adicionar a pergunta inicial do usuário aos atributos da tarefa de chat no widget Send to Flex (Enviar para o Flex):

{"initial_question": "{{trigger.conversation.ChannelAttributes.pre_engagement_data.question}}"}

Como usar agentes public_identity?

Depois que um agente do Flex for encontrado e ingressar na conversa, seu nome (worker.FriendlyName) será exibido como o autor da mensagem. Se você quiser manter o nome real de seus agentes privado e, em vez disso, exibir um nome mais adequado para uso público, poderá usar o recurso de identidade pública.

Para fazer isso, você precisa configurá‐lo nos atributos do worker do TaskRouter: worker.attributes.public_identity=”Public Name” e este "Public Name" (Nome público) será exibido como autor das mensagens que seu cliente usando o Webchat verá.

Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

thanks-feedback-gif