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.
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
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.
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
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.