# Lista modal Exibe um lista de opções que ocupa, por completo, a tela do chat. ## Estrutura ```javascript { "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: ```javascript { "text": "option1,option2,option3", "values": [ "option1", "option2", "option3" ] } ``` * **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](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` 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": "option_list", "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/-MDWRM_IEcs55XSBmG3g) {% endtab %} {% endtabs %} ## Inverter Lista Permite a inversão da ordem das opções, por exemplo: ```javascript { "default": { "type": "option_list", "payload": { "pick": "Pergunta do Modal", "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" } ], "reverse": true } } } ``` ### Atributos * **reverse:** por padrão está definido como `false`, deve ser definido como `true` para alterar a sequência. #### **Exemplo:** ```javascript 5 - opção 5 4 - opção 4 3 - opção 3 2 - opção 2 1 - opção 1 ``` {% 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 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. ```javascript { "default": { "type": "option_list", "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 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: {% tabs %} {% tab title="Estrutura" %} ```json { "default": { "type": "option_list", "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: 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**). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.altu.d1.cx/build/assistentes/builder/componentes/input/option_list.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.