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

Menu

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

No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.

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.

Loading Code Sample...
        
        

        Enable Pre-Engagement Form

        Loading Code Sample...
              
              

              Enable Pre-Engagement Context

              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

              PreEngagementCanvas

              Loading Code Sample...
                    
                    

                    Webchat configuration with Pre-Engagement Form

                    Tipos e validações de campo suportados

                    Tipos de campo

                    • InputItem
                    • SelectItem
                    • TextareaItem

                    Validações de campo

                    Atributo do campo Descrição
                    requisitos Valida se um campo de formulário é obrigatório ou opcional. Pode ser definido como true ou false.
                    email.value Verifica a validade do atributo de valor de um item de entrada de e‐mail.

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

                    Loading Code Sample...
                          
                          

                          Pre-Engagement Config Field Types

                          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:

                          Send to Flex widget initial question

                          {"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

                          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