# Carrossel de Opções ## Estrutura {% hint style="warning" %} Recurso disponível apenas no canal **Widget** {% endhint %} ```javascript { "default": { "type": "carousel", "payload": { "pick": "Escolha uma opção abaixo", "options": [ { "image": "https://image.com/img.jpg", "title": "Meu titulo 1", "description": "Descrição do item 1.
Essa descrição pode ser longa e conter html", "btnLabel": "Selecionar", "label": "label1", "value": "option1" }, { "image": "https://image.com/img.jpg", "title": "Meu titulo 2", "description": "Descrição do item 2.
Essa descrição pode ser longa e conter html", "btnLabel": "Selecionar", "label": "label2", "value": "option2" }, { "image": "https://image.com/img.jpg", "title": "Meu titulo 3", "description": "Descrição do item 3.
Essa descrição pode ser longa e conter html", "btnLabel": "Selecionar", "label": "label3", "value": "option3" } ], "hideArrows": true|false, "showTextInput": true|false } } } ``` ## Atributos * **type:** carousel * **payload:** * **pick:** mensagem que será exibido no cabeçalho do carrossel de opções. * **options:** itens que comporão o carrossel. * **image (opcional):** URL da imagem a ser destacada. * **title (opcional):** título do item. * **description (opcional):** texto descritivo do item, pode ser longa e conter HTML. * **btnLabel (default: "Selecionar"):** label do botão para escolher o item. * **label:** texto que entrará como mensagem do usuário após a escolha do item. O carrossel "some" e a mensagem, referente ao item escolhido, é exibida como mensagem de texto. * **value:** valor que será enviado ao Zenvia NLU ao escolher a opção. Pode ser utilizado em um direcionamento de fluxo. * **cognitive (default: true):** determina se a mensagem será enviada para curadoria ou não. * **hideArrows (default: false):** se passado o valor true, esconde as setas de scroll para esquerda e direita. * **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. A validação do `input` que é passado para o builder possui um valor boolean (true ou false). ```javascript { "valid": true|false } ``` ## Exemplos É possível fazer várias combinações com os atributos opcionais `image`, `title` e `description`. Isso garante uma visível personalização do componente, adequando a sua necessidade. Segue as possíveis combinações: * imagem, título e descrição; * imagem e título; * imagem e descrição; * título e descrição;- * apenas imagem, título ou descrição. {% tabs %} {% tab title="Exemplo" %} ```javascript { "default": { "type": "carousel", "payload": { "pick": "Qual a forma de pagamento você prefere??", "options": [ { "image": "https://source.unsplash.com/random", "title": "Cartão de crédito", "description": "Você pode: ", "label": "Pagamento com Cartão de Crédito", "value": "credito" }, { "image": "https://source.unsplash.com/random", "title": "Boleto", "btnLabel": "Eu quero!!", "label": "Pagamento com Boleto", "value": "boleto" }, { "image": "https://source.unsplash.com/random", "description": "Uma vantagem do pagamento em espécie é ser conveniente em pequenas compras, já que a maioria dos estabelecimentos não aceita cartões nesse caso.", "label": "Pagamento em espécie", "value": "espécie" }, { "description": "Não tenho interesse em realizar essa compra nesse momento.", "label": "Nenhuma forma de pagamento escolhida", "value": "nenhum", "cognitive": false }, { "title": "Debito", "description": "Nas compras com cartão de débito não incorrem encargos.

Você pode trocar pontos por prêmios, milhas, bônus, descontos e muito mais.", "label": "Pagamento com Cartão de Débito", "value": "debito" } ] } } } ``` {% endtab %} {% tab title="Preview no Widget" %} ![](/files/-MDWT27dK87szmmeXf9M) {% endtab %} {% tab title="Workspace" %} {% endtab %} {% endtabs %} ## **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/carousel.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.