> For the complete documentation index, see [llms.txt](https://docs.altu.d1.cx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.altu.d1.cx/build/assistentes/builder/componentes/input/select.md). # Lista inline 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 ```javascript { "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: ```javascript { "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](https://fusejs.io/). O playground deles disponível [aqui](https://fusejs.io/demo.html), 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). ```javascript { "valid": true|false } ``` ## Exemplo {% tabs %} {% tab title="Exemplo" %} ```javascript { "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 } ] } } } ``` {% endtab %} {% tab title="Preview no Widget" %} ![](/files/-MDWQmQOtHLyLs4N5SLJ) {% endtab %} {% endtabs %} ## Inverter Lista Permite a inversão da ordem das opções, por exemplo: ```javascript { "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** ![](/files/-MQloSqH5LJ8tESa1Tf5) {% hint style="info" %} Caso o `reverse` não seja adicionado no `payload` ou seja definido um valor diferente de `true` **,** a ordem não será afetada. {% endhint %} ## 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. ```javascript { "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. {% hint style="info" %} Essa funcionalidade serve apenas para canais ABC, os demais canais não utiliza o atributo image dos componentes option\_list. {% endhint %} ## 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: {% tabs %} {% tab title="Estrutura" %} ```json { "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" } ] } } } ``` {% endtab %} {% tab title="Visualização" %} ![](/files/-MfghV3baVmX5UT7X5j8) {% endtab %} {% endtabs %} 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` {% tabs %} {% tab title="Estrutura" %} ```json { "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" } ] } } } ``` {% endtab %} {% tab title="Visualização" %} ![](/files/-MfgiGwiYrBoQ6m_FmaJ) ![](/files/-MfgiVzeuEwT1jVXpjCh) {% endtab %} {% endtabs %} 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 {% hint style="info" %} Caso o limite de algum desses for ultrapassado, o texto será cortado para o limite máximo esperado. {% endhint %} ## **Skip Curatorship** Envie uma flag para indicar que a mensagem recebida naquele nó não deve ser enviada para a curadoria. {% tabs %} {% tab title="Exemplo 1" %} ```javascript { "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 } } } ``` {% endtab %} {% tab title="Exemplo 2" %} ```javascript { "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" } ] } } } ``` {% endtab %} {% endtabs %} * 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**).