Zenvia Docs

Lista modal

Exibe um lista de opções que ocupa, por completo, a tela do chat.

Estrutura

{
    "default": {
        "type": "option_list",
        "payload": {
            "pick": "pergunta",
            "options": [
                {
                    "title": "opção 1",
                    "value": "valor da opção 1"
                },
                {
                    "title": "opção 2",
                    "value": "valor da opção 2"
                },
                {
                    "title": "opção 3",
                    "value": "valor da opção 3"
                }
            ],
            "tries": 3,
            "mandatory": true,
            "error_message": [
                "Você errou, tente novamente",
                "Por favor tente uma última vez",
                "Não consegui validar o seu cpf, tente novamente mais tarde"
            ]
        }
    }
}

Atributos

  • type: option_list

  • payload:

    • pick: mensagem que será exibido no cabeçalho da lista de opções

    • multiple (default: false): se passado o valor true, o usuário poderá selecionar uma ou mais opções

      • Com múltipla seleção o input que é passado para o builder possui as opções selecionadas separadas por vírgula no text e um array no values. Ex:

    • accentSensitive (opcional): Considera acentuações.

    • mandatory (default: true):booleano, determina se o usuário precisa escolher uma nota para avançar ou não.booleano

      • tries:(opcional) inteiro > 0, corresponde à quantidade de tentativas que queremos

      • error_message:(opcional) array de strings, corresponde as mensagens que serão exibidas sequencialmente após cada erro

    • error_message (default: Por favor, selecione uma opção da lista): mensagem de erro para quando o nó for obrigatório e o input não for válido.

    • fuzzyThreshold (default: 0.3): determina o quão próximo da opção da lista o usuário precisará digitar. Aceita valores de 0 a 1.

      • Para usar esse atributo é necessário setar o fuzzy: true.

      • Se 0, somente inputs exatos serão aceitos. Se 1, qualquer input será aceito.

      • A opção será considerada somente se o que o usuário digitar, tiver uma reconhecimento abaixo do threshold (maior precisão). Cabe a quem estiver programando o fluxo definir o melhor valor, na situação em que está trabalhando.

    • fuzzyMinMatchCharLength (default: 5): define a quantidade mínima de caracteres digitados para que possa retornar uma busca.

    • fuzzy (default: false): determina se irá utilizar a busca por aproximação, para detecção do input do usuário.

      • A busca difusa (fuzzy searching) é a técnica de encontrar strings que são aproximadamente iguais a um determinado padrão (em vez de exatamente).

      • Se true, o considerado em cada option, na busca pela aproximação, é o valor do title ou do value, e o que mais se aproximar daquilo que foi digitado pelo usuário será o resultado escolhido.

      • Para tanto, utilizamos a lib Fuse.js. O playground deles disponível aqui, permitirá que os programadores de fluxos testem as opções que disponibilizamos como, fuzzyMinMatchCharLength (minMatchCharLength, na Fuse.js) e fuzzyThreshold (threshold, na Fuse.js)

    • delay (opcional): tempo (milissegundos) de atraso antes da próxima opção aparecer.

    • options: opções que serão exibidas ao usuário a medida que ele digita

      • title: título (label) da opção que estará visível ao usuário

      • value: valor que será enviado ao Zenvia NLU ao escolher a opção. Se não for definido, será passado o próprio title

A validação do input que é passado para o builder possui um valor boolean (true ou false).

Exemplo

Inverter Lista

Permite a inversão da ordem das opções, por exemplo:

Atributos

  • reverse: por padrão está definido como false, deve ser definido como true para alterar a sequência.

Exemplo:

Caso o reverse não seja adicionado no payload ou seja definido um valor diferente de true , a ordem não será afetada.

Conversão para o canal ABC

Para utilizar, deve acessar as opções avançadas presente na edição de integrações da LivePerson. Lá terá um campo onde poderá ser feito o cadastro de um metadata, após isso é só utilizar o componente no builder que a conversão será feita automaticamente.

Atributos:

  • title: título (label) da opção que estará visível ao usuário

  • value: valor que será enviado ao Zenvia NLU ao escolher a opção. Se não for definido, será passado o próprio title

  • image: será inserido uma url de uma imagem que aparecerá no componente de ABC.

Essa funcionalidade serve apenas para canais ABC, os demais canais não utiliza o atributo image dos componentes option_list.

WhatsApp Zenvia

Para input do tipo Lista Modal com a quantidade de options menores ou iguais a 10, será usado o componente de lista que possui alguns campos extras que podem ser editados como o botão e o Título da lista, também é possível atrelar uma descrição para cada item.

Segue um exemplo de payload cujo botão e título da lista estão personalizados:

Caso os campos button e sectionTitle não forem usados, um texto padrão será exibido.

  • Para o button o texto padrão é: Opções

  • Para o sectionTitle o texto padrão é: Escolha uma opção

Caso a quantidade de opções ultrapasse o limite de 10, uma lista numérica será exibida.

Pontos de atenção, os campos da lista tem tamanhos limitados:

  • button: 10 caracteres

  • sectionTitle: 24 caracteres

  • description: 72 caracteres

  • value: 24 caracteres

  • title: 24 caracteres

Caso o limite de algum desses for ultrapassado, o texto será cortado para o limite máximo esperado.

Skip Curatorship

Envie uma flag para indicar que a mensagem recebida naquele nó não deve ser enviada para a curadoria.

  • Quando for setado true, a mensagem irá bater no cognitivo, mas a mensagem não será enviada para a área de curadoria.

  • Por default o seu valor é false.

  • Ele pode ser ativado para todas as opções do componente (exemplo 1) ou somente para uma opção em específica (exemplo 2).

PreviousLista inlineNextQuick Replies

Last updated

Was this helpful?