# 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" %} ![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MDWEpoCyl9Vi2GtIjUq%2F-MDWRM_IEcs55XSBmG3g%2Fmodal_option_list.gif?alt=media\&token=c13af7cd-4a8c-46c7-b68a-b76163f77efb) {% 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" %} ![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MfgdsJ3zmiqT5Dd8ry5%2F-MfghV3baVmX5UT7X5j8%2Fagdsf.gif?alt=media\&token=3c93e723-0da2-4af5-a2ec-edf608f7d74a) {% 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" %} ![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MfgdsJ3zmiqT5Dd8ry5%2F-MfgiGwiYrBoQ6m_FmaJ%2FScreenshot%20from%202021-07-23%2017-02-19.png?alt=media\&token=410ccf05-e22e-410e-af65-efa909f5d92a) ![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MfgdsJ3zmiqT5Dd8ry5%2F-MfgiVzeuEwT1jVXpjCh%2FScreenshot%20from%202021-07-23%2017-02-27.png?alt=media\&token=0e139e1a-26ff-4073-902e-375e69406be4) {% 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**).