Lista de opções com rolagem. Exibe uma lista de opções que ocupa uma parte da tela.

Se a lista ultrapassar o tamanho de visualização de itens por vez, é possível que o usuário use a rolagem para visualizar os demais.

Estrutura

{
  "default": {
    "type": "select",
    "payload": {
       "pick": "pergunta",
       "tries": 3,
       "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"
        }
      ],
      "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"
      ],
      "showTextInput": true
    }
  }
 }

Atributos

• type: select.
• payload:
  

• pick: mensagem que será exibido no cabeçalho da lista de opções.
• showTextInput (opcional): se passado o valor true, exibe o input de texto junto com a lista de opções, permitindo ao usuário escolher um item da lista ou digitar o que desejar.
• accentSensitive (opcional): Considera acentuações.
• hideArrows (opcional): se passado o valor true, esconde as setas de scroll para cima e para baixo.
  

• 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:
  

 {
   "text": "option1,option2,option3",
   "values": [
     "option1",
     "option2",
     "option3"
    ]
  }

• (default: true): Determinará o numero de campos a serem selecionados
  

max (opcional): Quantidade máxima de opções que podem ser selecionadas
min (opcional): Quantidade mínima de opções que podem ser selecionadas

{ 
    "multiple": true,
      "max": 2,
      "min": 1
}

• 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
• cognitive (default: true): determina se a opção ao ser selecionada será enviada para curadoria ou não. Este atributo pega como referência o texto do value

 

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

{
 "valid": true|false
}

Exemplo

{
  "default": {
    "type": "select",
    "payload": {
    "pick": "Por favor, escolha uma das opções:",
    "options": [
      {
        "title": "Como eu consulto minha conta de energia?",
        "value": "Como eu consulto minha conta de energia?"
     },
    {
       "title": "Como eu faço para religar minha energia?",
       "value": "Como eu faço para religar minha energia?"
    },
   {
      "title": "Como eu peço uma nova ligação de energia?",
      "value": "Como eu peço uma nova ligação de energia?"
   },
  {
     "title": "Outras",
     "value": "Outras",
     "cognitive": false
  },
  {
     "title": "Quero encerrar a conversa",
     "value": "Quero encerrar a conversa",
     "cognitive": false
    }
   ]
  }
 }
}

Preview no Widget

 

Inverter Lista

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

{
   "default": {
     "type": "select",
     "payload": {
        "pick": "Qual destes sabores você gostaria de experimentar hoje:",
        "options": [
           {
             "title": "1 - Calabresa",
             "value": "calabresa"
        },
        {
           "title": "2 - Portuguesa",
           "value": "portuguesa"
       },
       {
          "title": "3 - Palmito",
          "value": "palmito"
      },
      {
         "title": "4 - Escarola",
         "value": "escarola"
     },
     {
        "title": "5 - Peperoni",
        "value": "peperoni"
      }
    ],
    "reverse": true
   }
  }
 }

Atributos

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

Exemplo



💡 Dica: 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 Live Person,
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.

{
  "default": {
     "type": "select",
     "payload": {
        "pick": "seleciona ai",
        "options": [
          {
           "title": "opção 1",
           "value": "1",
           "image": "url da imagem 1"
      },
      {
          "title": "opção 2",
          "value": "2"
          "image": "url da imagem 2"
        }
      ]
    }
  }
 }

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.
  

⚠️Atenção: 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 select com um 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:

{
  "default": {
    "type": "select",
    "payload": {
      "pick": "Qual item deseja escolher?",
      "button": "Escolhas",
      "sectionTitle": "Escolha um:",
      "options": [
        {
           "title": "opção 1",
           "value": "row1",
           "description": "Descrição item 1"
       },
       {
          "title": "opção 2",
          "value": "row2",
          "description": "Descrição item 2"
      },
      {
         "title": "opção 3",
         "value": "row3",
         "description": "Descrição item 3"
     },
     {
        "title": "opção 4",
        "value": "row4",
        "description": "Descrição item 4"
     },
     {
        "title": "opção 5",
        "value": "row5",
        "description": "Descrição item 5"
      }
    ]
  }
 }
}

Preview 

 

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

{
   "default": {
     "type": "option_list",
     "payload": {
        "pick": "Escolha algo:",
        "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"
          },
          {
             "title": "opção 4",
             "value": "valor da opção 4"
          },
          {
             "title": "opção 5",
             "value": "valor da opção 5"
         }
       ]
     }
   }
 }

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

Qual item deseja escolher?
1 - opção 1
2 - opção 2
3 - opção 3
4 - opção 4
5 - opção 5
6 - opção 6
7 - opção 7
8 - opção 8
9 - opção 9
10 - opção 10
11 - opção 11
12 - opção 12

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

• button: 10 caracteres
• sectionTitle: 24 caracteres
• description: 72 caracteres
• value: string de no máximo 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.

{
  "default": {
    "type": "select",
    "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"
          }
       ],
      "skip_curatorship": true
    }
  }
}

{
   "default": {
      "type": "select",
      "payload": {
        "pick": "pergunta",
        "options": [
          {
            "title": "opção 1",
            "value": "valor da opção 1",
                 “skip_curatorship”: true
          },
          {
            "title": "opção 2",
            "value": "valor da opção 2",
                “skip_curatorship”: true
          },
          {
            "title": "opção 3",
            "value": "valor da opção 3"
        }
      ]
    }
  }
}

 

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