Instalar e usar o Flex WebChat

O que é o Flex WebChat?

Flex Webchat é um widget de chat que você pode incorporar ao site. O widget ajuda os clientes a conversar com um agente sem precisar deixar o site. Ele é originalmente integrado ao Flex Contact Center.

O que você pode fazer com o WebChat?

A experiência Flex WebChat é totalmente personalizável. O WebChat pode ser personalizado das seguintes maneiras:

• Alterando a configuração básica do WebChat
• Alterando a aparência do WebChat
• Personalização de formulários e coleta de informações contextuais
• Personalizar a interface de usuário adicionando, substituindo ou removendo componentes
• Personalizando o comportamento do WebChat tocando nas ações do usuário

Introdução ao WebChat

Atualmente, existem duas maneiras de consumir o Flex WebChat:

• CDN
• npm

Pré‐requisitos

Para obter acesso e configurar o Flex WebChat, você precisará concluir primeiro o Início rápido do Flex.

Consumo do CDN

Há 2 maneiras de adicionar o Flex WebChat a partir do CDN:

Opção 1

As etapas a seguir são a maneira mais rápida de adicionar o Flex WebChat ao seu aplicativo. No entanto, uma configuração de CDN não permitirá uma programação mais avançada do fluxo de inicialização para o Flex WebChat.

1. Adicione a seguinte tag script à tag head do index.html para incluir o pacote WebChat do CDN.

Opcionalmente, você pode incluir um token de integridadepara verificar se o Flex WebChat é entregue sem a manipulação inesperada. Em caso afirmativo, certifique‐se de incluir as chaves "integrity" e "crossorigin" no script.

<script src="https://assets.flex.twilio.com/releases/flex-webchat-ui/2.9.1/twilio-flex-webchat.min.js" integrity="sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==" crossorigin></script>

A tabela a seguir exibe os tokens de integridade das versões anteriores (a partir da v2.2.0).

2. Adicione a seguinte tag script à tag body do index.html para inicializar o WebChat.

          <script>
            const appConfig = {
                accountSid:"AC...",
                flexFlowSid:"FO..."
            };
            Twilio.FlexWebChat.renderWebChat(appConfig);
        </script>

Opção 2

As etapas a seguir permitirão que você personalize o fluxo de inicialização do Flex WebChat antes de processar o WebChat, pois ele consiste em duas partes: inicializar e renderizar. Essa opção permite que você toque na personalização antes que o método de renderização seja executado.

Twilio.FlexWebChat.createWebChat(appConfig).then(webchat => {
    const { manager } = webchat;
    
//Posting question from preengagement form as users first chat message
    Twilio.FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
        const { question } = payload.formData;
        if (!question)
            return;

        const { channelSid } = manager.store.getState().flex.session;
        manager
            .chatClient.getChannelBySid(channelSid)
            .then(channel => channel.sendMessage(question));
    });
// Changing the Welcome message
    manager.strings.WelcomeMessage = "New text for welcome message";

// Render WebChat
    webchat.init();
  });

Enquanto estiver conectado ao Flex como administrador, você pode encontrar o flexFlowSid e o accountSid no Flex admin (https://flex.twilio.com/admin/developers). Você pode saber mais sobre Projetos na Documentação de Suporte do Twilio.

Consumindo do NPM e executando localmente

Para que você comece a consumir o pacote @twilio/flex-webchat-ui do npm, fornecemos um projeto de amostra baseado no create-react-app.

Execute as seguintes etapas para começar a usar o projeto de exemplo:

1. Clonar o projeto de amostra do GitHub.

git clone https://github.com/twilio/flex-webchat-ui-sample.git

2. Entre no diretório flex-webchat-ui-sample e instale as dependências.

cd flex-webchat-ui-sample
npm install

3. Copie o exemplo de configuração e edite o arquivo webchat-appConfig.js de acordo com sua conta Twilio.

cp public/assets/webchat-appConfig.sample.js public/assets/webchat-appConfig.js

4. Inicie o servidor de teste.

npm start

5. Seu Flex UI (IU do Flex) local será executada no http://localhost:8081.

Comportamento padrão do WebChat

Fora da caixa, o WebChat é configurado para iniciar o chat (acionar a ação startEngagement) no clique do ponto de entrada do usuário. As seguintes etapas acontecem no início do projeto:

• O token foi emitido
• O canal de chat é criado
• O usuário de chat programável é criado com o padrão friendlyName e adicionado como membro ao canal
• MessagingCanvas é carregado com o channelSid criado
• Uma mensagem predefinida é exibida ao usuário como uma chamada para ação.

Webchat é um dos canais que está integrado ao Flex fora da caixa. Quando uma mensagem recebida é enviada para o canal de chat, ela aciona um Studio Flow. Por padrão, esse é o WebChat Flow, que pode ser personalizado no Twilio Console.

A primeira mensagem recebida no canal de chat acionará uma nova execução no Studio Flow. Aqui, você pode automatizar uma conversa usando o widget Send & Wait for Reply (Enviar e aguardar para Responder) antes de passar a conversa diretamente para um agente com o widget Send to Flex (Enviar para Flex).

O widget Send to Flex (Enviar para Flex) cria uma tarefa do TaskRouter com os atributos fornecidos e remove o webhook do canal de chat para que as mensagens recebidas futuras não disparem novamente o fluxo do Studio.

Os dados de pré-compromisso podem ser acessados pela sintaxe Liquid do Studio. Por exemplo, você pode incluir no widget Send to Flex (Enviar para Flex):

{"question": "{{trigger.message.ChannelAttributes.pre_engagement_data.question}}"}

O que vem a seguir?

Agora que você está com tudo configurado e conseguiu executar o WebChat, você pode:

• Altere a aparência para o estilo do site
• Personalize o comportamento do chat com a configuração básica ou o framework Actions
• Adicione um formulário de pré‐compromisso para solicitar ao usuário dados adicionais antes de iniciar o chat
• Reunir e enviar dados contextuais do usuário a ser usado no roteamento do chat para o e o agente ou exibi‐los para um agente

e muito mais!