Uso de dados e contexto do formulário de pré‑engajamento

Ao usar o chat como um canal de comunicação para sua central de contatos, você pode configurar um formulário de pré‐engajamento para coletar informações relevantes do usuário (como nome e e‐mail) antes do início de um chat. Como alternativa, você pode coletar o contexto dos dados que já possui, como o nome de login de um usuário ou referencial HTTP. Você pode usar dados e contexto do formulário de pré‐contratação para encaminhar a tarefa ao agente certo ou exibir informações relevantes do usuário ao agente.

Antes de começar

Para iniciar um bate‐papo, é necessário definir um atributo friendlyName do usuário. O atributo friendlyName está definido como "Anônimo" no objeto context de sua configuração padrão do WebChat. O valor friendlyName é exibido para o agente no Flex UI (IU do Flex). Quando definido no objeto de contexto WebChat e em um formulário de pré‐engajamento, o valor do formulário de pré‐engajamento substitui o valor do objeto de contexto.

Configuração de um formulário de pré-engajamento

O formulário de pré‐engajamento é desativado por padrão. Para exigir detalhes de seus clientes antes que eles se envolvam com seus agentes, ative o formulário de pré‐engajamento definindo o atributo startEngagementOnInit como false no objeto de Configuração.

Na configuração do WebChat, você pode definir o objeto preEngagementConfig para o componente PreEngagementCanvas.

O formulário de exemplo a seguir mostra um campo de entrada obrigatório para o nome de usuário, um campo de área de texto opcional para a pergunta do usuário e um botão de envio com o rótulo "OK, vamos!"

{}

Exemplo de formulário de pré‐engajamento

Tipos e validações de campo suportados

Tipos de campo

• InputItem
• SelectItem
• TextareaItem

Validações de campo

O exemplo a seguir mostra um objeto preEngagementConfig com todos os tipos de campos de formulário suportados e suas propriedades e atributos.

Postar perguntas do usuário como uma mensagem de chat

Você pode usar ações de WebChat para acionar o Flex WebChat Flow e publicar automaticamente perguntas de usuários de um formulário de pré‐envolvimento em uma janela de chat.

O exemplo de código a seguir mostra como você pode passar a pergunta (se houver) do formData enviado e publicá‐la no chat usando o evento pós‐ação StartEngagement.

// post question from pre-engagement into chat

  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);
                  });
          });

Ao postar uma mensagem inicial em nome do cliente, considere alterar a mensagem introdutória ou desativar a predefinedMessage MessagingCanvas prop.

FlexWebChat.MessagingCanvas.defaultProps.predefinedMessage = false;

Para saber mais sobre como usar o React Default Props para configurar seus componentes do WebChat, consulte Configuração do WebChat: API de adereços padrão do React.

Reunir e enviar contexto

O exemplo de código a seguir mostra como você pode definir o objeto context na configuração do WebChat:

const defaultConfiguration: Config = {
  ...
    context: {
        locationOrigin: window.location.origin,
        someContextProp: "ContextProp1",
    }
}

Se contexto estiver definido, a proposta de contexto será salva como um atributo de canal de chat e poderá ser acessada pelo widget Send to Flex do Studio.

Acessar e usar dados e contexto de pré-engajamento

Quando ativado, os dados de contexto e de formulário de pré‐engajamento são salvos automaticamente como atributos de canal de Programmable Chat (ou seja, channel.attributes.pre_engagement_data) quando um chat é iniciado.

Seus dados de formulário e contexto podem ser acessados no WebChat Studio Flow. Consulte a documentação do Twilio Studio para saber mais sobre como o Studio usa variáveis. Você também pode salvar dados de pré‐engajamento e contexto como atributos de canal de chat:

// context set in the WebChat

    context: {
        friendlyName: "Anonymous",
        locationOrigin: "http://someOriginUrl.com",
        someContextProp: "ContextProp1",
    },

// pre-engagement config set in WebChat

preEngagementConfig: {    

    description: "Please provide some information",
    fields: [
        {
            label: "What is your name?",
            type: "InputItem",
            attributes: {
                name: "friendlyName",
                type: "text",
                required: true
            }
        },
        {
            label: "What is your question?",
            type: "TextareaItem",
            attributes: {
                name: "question",
                type: "text",
                placeholder: "Type your question here",
                required: false,
                rows: 5
            }
        }, 
    ],
    submitLabel: "Ok Let's Go!"
}

// Chat channel attributes saved on chat initiation

"attributes": "{\"status\":\"ACTIVE\",\"long_lived\":false,\"pre_engagement_data\":{\"friendlyName\":\"Anonymous\",\"question\":\"Can you help me with my invoice?\",\"location\":\"http://localhost:8081/\",\"locationOrigin\":\"http://someOriginUrl.com\",\"someContextProp\":\"ContextProp1\"},\"from\":\"Bob\",\"channel_type\":\"web\"}"

Dados de pré‐engajamento e contexto no Studio

Uma mensagem recebida enviada para o canal de chat aciona o WebChat Flow para sua instância do Flex, que você pode personalizar no Console do Twilio.

No fluxo do Webchat Studio, você pode:

• Acionar uma conversa de bot com base nos dados coletados de pré‐engajamento
• Usar dados de pré‐engajamento para decisões no fluxo, como quando enviar a conversa a um agente
• Adicionar dados de pré-engajamento aos atributos da tarefa para que a decisão de encaminhamento ou as informações sejam exibidas a um agente no Flex

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

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

E veja como você adicionaria a pergunta inicial do usuário aos atributos da tarefa de chat no widget Send To Flex:

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

Você pode acessar seu formulário de pré‐engajamento e dados de contexto por meio da API REST de Programmable Chat.

Próximas etapas

• Mensagens de Entrada com a Flex WebChat UI
• Integrar um cliente de chat personalizado ao Flex
• Confira o Guia do usuário do Twilio Studio