View a markdown version of this page

Bloco de fluxo no Connect Customer: Mostrar visualização - Amazon Connect Customer
DescriptionCasos de uso deste blocoTipos de contatoTipos de fluxoComo configurar este blocoCenários de erroEntrada de logs de fluxoFluxos de exemploMais atributos

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Bloco de fluxo no Connect Customer: Mostrar visualização

Este tópico define o bloco de fluxo para criar guias de fluxo de trabalho passo a passo a fim de ajudar os atendentes a proporcionar experiências consistentes, bem como guias para proporcionar experiências interativas aos clientes.

Description

  • Use esse bloco de fluxo para:

    • Crie guias passo a passo para agentes que estão usando o espaço de trabalho de agentes do Connect Customer. Esses guias são fluxos de trabalho que fornecem instruções aos atendentes para ajudá-los a interagir de forma consistente com os clientes.

    • Criar formulários para coletar informações dos clientes em uma experiência de chat.

  • Quando um contato é roteado para um fluxo que inclua um bloco Mostrar exibição, uma página de interface de usuário chamada Visualizar é renderizada no espaço de trabalho do atendente ou na interface de usuário do chat do cliente.

Casos de uso deste bloco

Este bloco de fluxo foi projetado para orientar os atendentes nas etapas para:

  • Executar tarefas comuns para clientes, como fazer reservas, gerenciar pagamentos e enviar novos pedidos.

  • Enviar e-mails com base em um modelo que notifica o cliente sobre uma solicitação de reembolso enviada. A estrutura do e-mail é sempre a mesma, mas valores específicos podem variar, como número do pedido, valor do reembolso e conta de pagamento. É possível configurar o bloco Mostrar exibição para que o atendente forneça esses tipos de informações.

  • Criar novas entradas de CRM no espaço de trabalho existente do atendente. Use atributos de contato para preencher previamente o formulário com informações relevantes, como nome e número de telefone do cliente.

E para orientar os clientes nas etapas de uma conversa por chat para:

  • Fazer pagamentos fornecendo as informações do cartão de crédito.

  • Fornecer informações de PII, como um endereço residencial, para atualizar seu perfil.

  • Receber as informações da conta fornecendo o ID da conta do cliente.

Tipos de contato

Você pode usar o bloco Mostrar exibição em um fluxo de guia que é iniciado, pelo bloco Definir fluxo de eventos, a partir de qualquer tipo de contato, incluindo voz, chat, e-mail ou tarefa. Se você planeja apresentar um guia para um cliente, pode usar diretamente o bloco Mostrar exibição no fluxo principal do chat.

Tipo de contato Compatível?

Voz

Sim

Chat

Sim

Tarefa

Sim

E-mail

Sim

Tipos de fluxo

É possível usar esse bloco nos seguintes tipos de fluxo:

Tipo de fluxo Compatível?

Fluxo de entrada

Sim

Customer hold flow (Fluxo de espera do cliente)

Não

Fluxo de sussurro do cliente

Não

Outbound whisper flow (Fluxo de sussurro de saída)

Não

Agent hold flow (Fluxo de espera do agente)

Não

Fluxo de sussurros de agentes

Não

Transfer to agent flow (Transferir para o fluxo do agente)

Não

Transfer to queue flow (Transferir para o fluxo da fila)

Não

Como configurar este bloco

Você pode configurar o bloco Mostrar visualização usando o site do Connect Customer administrador ou usando a ShowViewação na linguagem Connect Customer Flow.

Escolher o recurso de exibição

O Connect Customer inclui um conjunto de visualizações nas quais você pode adicionar ao espaço de trabalho do seu agente. Você especifica a exibição na caixa Visualizar, conforme mostrado na seguinte imagem:

A página de propriedades do bloco Mostrar exibição.

Veja a seguir uma breve descrição dessas visualizações AWS gerenciadas. Para obter informações detalhadas sobre cada um, consulteConfigurar AWS visualizações gerenciadas do espaço de trabalho de um agente no Connect Customer. Customer-managed visualizações também são suportadas. Para obter mais informações, consulte a documentação das Customer-managed visualizações.

  • Visualização de detalhes: exibe informações aos atendentes e fornece a eles uma lista de ações que podem ser executadas. Um caso de uso comum da Visualização detalhada é exibir uma tela pop-up para o atendente no início de uma chamada.

  • Exibição em lista: exibe informações como uma lista de itens com títulos e descrições. Os itens podem funcionar como links com ações anexadas. Ela também é compatível com a navegação padrão para voltar e o cabeçalho de contexto persistente (opcional).

  • Visualização do formulário: fornece aos clientes e atendentes campos de entrada para coletar os dados necessários e enviar dados aos sistemas de backend. Essa visualização consiste em várias Seções com um estilo de Seção predefinido com um cabeçalho. O corpo consiste em vários campos de entrada organizados em um formato de layout de coluna ou grade.

  • Visualização de confirmação: página para mostrar aos clientes e atendentes após o envio de um formulário ou a conclusão de uma ação. Neste modelo predefinido, você pode fornecer um resumo do que aconteceu, as próximas etapas e as solicitações. A Exibição de confirmação é compatível com uma barra de atributos persistente, um ícone ou imagem, título e subtítulo, além de um botão de navegação para voltar à página inicial.

  • Visualização de cartões: permite que você oriente os clientes e atendentes, apresentando a eles uma lista de tópicos para escolher quando o contato é apresentado ao atendente.

As propriedades do bloco Mostrar exibição são preenchidas dinamicamente, dependendo do recurso Visualizar escolhido. Por exemplo, se você escolher Formulário, configurará as ações Próximo e Anterior, que serão exibidas. Essas são apenas algumas das ações na exibição.

A Exibição definida como Formulário e a Versão definida como 1.

As seções a seguir explicam como configurar as ações do Formulário manualmente, dinamicamente ou usando a opção JSON.

Como usar a opção Definir manualmente

  1. Na página Propriedades, na seção Visualizar, escolha Formulário no menu suspenso e defina Usar versão como 1, o padrão. A imagem a seguir mostra uma página Propriedades configurada com essas opções.

    A Exibição definida como Formulário e a Versão definida como 1.

  2. A página Propriedades exibe um conjunto de campos com base na exibição Formulário. Escolha Definir manualmente e insira o texto a ser renderizado nos componentes Visualizar da interface de usuário. A imagem a seguir mostra os componentes Próximo e Anterior da interface de usuário. O nome de exibição dos componentes foi definido manualmente como Próximo e Anterior. É isso que aparecerá no espaço de trabalho do atendente quando o guia passo a passo for renderizado.

    Os componentes Próximo e Anterior da interface de usuário definidos manualmente.

Como usar a opção Definir dinamicamente

  1. Na página Propriedades, na seção Visualizar, escolha Formulário no menu suspenso e defina Usar versão como 1, o padrão. A imagem a seguir mostra uma página Propriedades configurada com essas opções.

    A Exibição definida como Formulário e a Versão definida como 1.

  2. A página Propriedades exibe um conjunto de campos com base na exibição Formulário. Escolha Definir dinamicamente. No menu suspenso Namespace, escolha o atributo de contato e, em seguida, escolha a chave. A imagem a seguir mostra um Cabeçalho que será renderizado dinamicamente no guia passo a passo para mostrar o sobrenome do cliente.

    Um cabeçalho no modelo de exibição da interface de usuário.

Como usar a opção Definir JSON

Esta seção mostra um exemplo de como usar a opção Definir JSON.

  1. Na seção Visualizar da página Propriedades do bloco Mostrar exibição, escolha Formulário no menu suspenso e defina Versão como 1, o padrão. Essas opções são mostradas na imagem a seguir.

    A Exibição definida como Formulário e a Versão definida como 1.

  2. Quando você escolhe a exibição Formulário, o esquema de entrada da exibição é exibido na página Propriedades. O esquema tem as seguintes seções nas quais você pode adicionar informações: Seções, Voltar AttributeBar, Cancelar ErrorText, Editar e muito mais.

  3. A imagem a seguir mostra o AttributeBarparâmetro e a opção Definir usando JSON. Para ver todo o JSON que você colou, escolha o canto da caixa e puxe para baixo.

    Os parâmetros de entrada.
    dica

    Corrija os erros se o JSON for inválido. A imagem a seguir mostra um exemplo de mensagem de erro porque há uma vírgula extra.

    Uma mensagem de erro informando que o JSON não é válido.

  4. Ao selecionar uma visualização personalizada, você provavelmente desejará definir os valores das entradas dinâmicas por meio da opção Definir JSON. Ao fazer isso, você pode escolher Aplicar dados de amostra para preencher previamente a entrada com um esquema JSON que contenha dados de amostra.

    Certifique-se de configurar referências dinâmicas para dados dinâmicos (por exemplo, $.Channel) no construtor de interface do usuário para serem preenchidos em tempo de execução.

    A imagem a seguir mostra a opção Aplicar dados de amostra.

    A opção Aplicar dados de amostra no bloco Mostrar exibição.

  5. Escolha Salvar e publique quando tudo estiver pronto.

O exemplo de código a seguir mostra como essa mesma configuração seria representada pela ShowViewação na linguagem Flow:

{
      "Parameters": {
        "ViewResource": {
          "Id": "arn:aws:connect:us-west-2:aws:view/form:1"
        },
        "InvocationTimeLimitSeconds": "2",
        "ViewData": {
          "Sections": "Sections",
          "AttributeBar": [
            {
              "Label": "Example",
              "Value": "Attribute"
            },
            {
              "Label": "Example 2",
              "Value": "Attribute 2"
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "123456",
              "Copyable":true
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "https:example.com"
            }
          ],
          "Back": {
            "Label": "Back"
          },
          "Cancel": {
            "Label": "Cancel"
          },
          "Edit": "Edit",
          "ErrorText": "ErrotText",
          "Heading": "$.Customer.LastName",
          "Next": "Next",
          "Previous": "Previous",
          "SubHeading": "$.Customer.FirstName",
          "Wizard": {
            "Heading": "Progress tracker",
            "Selected": "Step Selected"
          }
        }
      },
      "Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66",
      "Type": "ShowView",
      "Transitions": {
        "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
        "Conditions": [
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Back"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Next"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Step"
              ]
            }
          }
        ],
        "Errors": [
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "NoMatchingCondition"
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "ErrorType": "NoMatchingError"
          },
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "TimeLimitExceeded"
          }
        ]
      }
    }

Essa visualização tem dados sensíveis

É recomendável habilitar Essa visualização tem dados sensíveis ao coletar dados de cartão de crédito, endereços residenciais ou qualquer outro tipo de dados sensíveis dos clientes. Ao habilitar essa opção, os dados enviados por um cliente não serão registrados em transcrições nem registros de contato nem estarão visíveis para os atendentes (por padrão). Lembre-se de desativar o registro em log se a opção Definir comportamento de log estiver ativada em seu fluxo de contatos, para garantir que dados sensíveis do cliente não sejam incluídos em seus logs de fluxo.

A caixa de seleção de visualização de dados sensíveis.
dica

Crie um módulo de fluxo com um bloco Mostrar visualização que tenha a opção Essa visualização tem dados sensíveis habilitada, uma função do Lambda e prompts para criar um módulo de experiência de pagamento reutilizável que pode ser colocado em um fluxo de contato de entrada existente.

Ramificações do bloco de fluxo

A imagem a seguir mostra um exemplo de um bloco Mostrar exibição configurado. Esse bloco é compatível com ramificações condicionais, ou seja, as ramificações dependem da exibição selecionada. Ele também é compatível com as ramificações Erro e Tempo limite.

Um bloco Mostrar exibição configurado.

  • Ramificações condicionais: estas ramificações são baseadas na exibição selecionada no bloco Mostrar exibição. A imagem anterior mostra que o bloco está configurado para a exibição Formulário e as seguintes ações: Voltar, Próximo e Sem correspondência.

    • Para essa configuração específica, no runtime, o contato do chat é roteado para as ramificações Voltar ou Próximo, dependendo do que o atendente clicar na exibição. Sem correspondência só será possível se o usuário tiver um componente de ação com um valor de ação personalizado.

  • Erro: a falha na execução (ou seja, falha na renderização da exibição no espaço de trabalho do atendente ou na captura da ação de saída da exibição) resulta na obtenção da ramificação Erro.

  • Tempo limite: especifica quanto tempo essa etapa no guia passo a passo deve levar para ser concluída pelo atendente. Se demorar mais do que o tempo limite para que o atendente conclua a etapa (por exemplo, o atendente não forneceu as informações necessárias no período especificado), a etapa entrará na ramificação Tempo limite.

    Quando uma etapa atinge o tempo limite, o guia passo a passo pode seguir a lógica definida no fluxo para determinar a próxima etapa. Por exemplo, a próxima etapa pode ser tentar solicitar informações novamente ou interromper a experiência do guia.

    O cliente está conectado ao atendente nesse momento, portanto, não há mudança na experiência do cliente devido ao Tempo limite.

Dicas de configurações adicionais

Crie um módulo de fluxo com essa configuração de registro em log, esse bloco e o Lambda para criar um módulo de experiência de pagamento reutilizável que mantenha o registro em log desativado e possa ser colocado em qualquer fluxo de entrada existente.

Atribua a seguinte permissão de perfil de segurança aos atendentes para que eles possam usar os guias passo a passo:

  • Solicitações do atendente - Visualizações personalizadas - Tudo: esta permissão permite que os atendentes vejam guias passo a passo no espaço de trabalho do atendente.

Atribua a seguinte permissão de perfil de segurança aos gerentes e analistas de negócios para que eles possam criar os guias passo a passo:

  • Canais e fluxos - Visualizações: esta permissão permite que os gerentes criem guias passo a passo.

Para obter informações sobre como adicionar mais permissões a um perfil de segurança existente, consulte Atualizar perfis de segurança no Connect Customer.

Dados gerados por este bloco

No runtime, o bloco Mostrar exibição gera dados que são a saída quando o recurso Visualizar é executado. As exibições geram dois dados principais:

  • Actionobtidos na renderização View-UI (no espaço de trabalho do agente) e ViewResultData quais são os Output dados.

    Ao usar um bloco Mostrar exibição, Ação representa uma ramificação e é definida como atributo de contato $.Views.Action no namespace Visualizações.

  • Os dados de Output são definidos como atributo de contato $.Views.ViewResultData no namespace Visualizações.

    Os valores de Action e os dados de Output são determinados pelos componentes com os quais o atendente interagiu durante o uso do recurso de exibição.

Como usar os dados em diferentes partes de um fluxo

  • Quando o bloco receber uma resposta da aplicação cliente, para fazer referência aos dados de saída nos fluxos, use `$.Views.Action e $.Views.ViewResultData.

  • Ao usar uma exibição com o bloco Mostrar exibição, Action representa uma ramificação que é capturada no atributo de contato no namespace Visualizações como $.Views.Action, e os dados de saída de exibição são definidos como o atributo de contato $.Views.ViewResultData.

  • É possível consultar os dados gerados pelo bloco Mostrar exibição usando o caminho JSON nos atributos de contato (você pode especificar atributos de contato nas opções Definir manualmente ou Definir JSON) ou usando o menu suspenso do seletor de atributos ao escolher Definir dinamicamente.

Cenários de erro

nota

Quando o bloco ShowView assume uma ramificação de erro (sem correspondência, tempo limite ou erro), convém rotear o fluxo de volta para um ponto anterior no fluxo. Se você criar um loop no fluxo como esse, o fluxo de contato poderá ser executado indefinidamente até que o contato do chat atinja o tempo limite. Recomendamos usar o bloco de fluxo de contato Loop para limitar o número de novas tentativas para um bloco ShowView específico.

Um contato é roteado pela ramificação Erro nas seguintes situações:

  • Connect Customer não consegue capturar a ação do usuário em um componente View UI no espaço de trabalho do agente. Isso pode ser devido a um problema intermitente na rede ou no lado do serviço de mídia.

Entrada de logs de fluxo

Os registros de fluxo do Connect Customer fornecem detalhes em tempo real sobre eventos em seu fluxo à medida que os clientes interagem com ele. Para obter mais informações, consulte Use registros de fluxo para rastrear eventos nos fluxos do Connect Customer.

Seguinte exemplo ShowView de entrada (registro de entrada)

{
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:26.945Z",
  "Parameters": {
    "Parameters": {
      "Cards": [
        {
          "Summary": {
            "Id": "See",
            "Heading": "See cancel options"
          }
        },
        {
          "Summary": {
            "Id": "Change",
            "Heading": "Change Booking"
          }
        },
        {
          "Summary": {
            "Id": "Get",
            "Heading": "Get Refund Status"
          }
        },
        {
          "Summary": {
            "Id": "Manage",
            "Heading": "Manage rewards"
          }
        }
      ],
      "NoMatchFound": {
        "Label": "Do Something Else",
        "type": "bubble"
      }
    },
    "TimeLimit": "300",
    "ViewResourceId": "cards"
  }
}

Exemplo de ShowView saída a seguir (registro de saída)

{
  "Results": "string",
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:35.201Z"
}

Fluxos de exemplo

É possível baixar um exemplo de fluxo da Etapa 2 no seguinte blog: Getting started with step-by-step guides. Recomendamos realizar as etapas no blog para aprender como criar fluxos configurados com exibições gerenciadas pela AWS e como executar esses fluxos para contatos de mídia de entrada.

Mais atributos

Consulte os tópicos a seguir para saber mais sobre guias passo a passo e exibições.