O componente Carrossel de opções permite exibir várias opções de forma interativa e organizada, facilitando a escolha do usuário.
Disponível exclusivamente no canal Widget, o carrossel apresenta as opções em formato deslizante, proporcionando uma experiência mais fluida e intuitiva.
Este componente é ideal para situações em que você deseja oferecer até 13 opções ao usuário, como listas de produtos, menus ou serviços.
Caso esse limite seja excedido, as opções serão automaticamente convertidas para o formato de lista, garantindo que todas sejam exibidas de maneira clara.
Este artigo irá guiá-lo pelo processo de configuração dessa ação no Builder de maneira simples e prática.
Passos para configurar no Builder
- Abra o Builder: No Zenvia NLU, acesse a área de construção de fluxos.
- Adicione e configure : No ponto do fluxo onde deseja adicionar o carrossel, clique em Input > Escolha Carrossel de opções no ícone de interrogação > Siga as instruções a seguir.
- Salve e publique: Após configurar, salve as alterações e publique o fluxo para que a nova configuração entre em vigor.
Estrutura da Ação
A estrutura da ação é a seguinte:
{ "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. <br> 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. <br> 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. <br> 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).
{ "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.
{ "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: <ul><li>Fazer compras pela internet parceladas.</li><li>Obter um prazo a mais para pagar a compra.</li></ul>", "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 <b>pagamento em espécie</b> é 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.<br><br>Você pode trocar pontos por prêmios, milhas, bônus, descontos e muito mais.", "label": "Pagamento com Cartão de Débito", "value": "debito" } ] } } }
Skip Curatorship
Envie uma flag para indicar que a mensagem recebida naquele nó não deve ser enviada para a curadoria.
Exemplo 1
{ "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 } } }
Exemplo 2
{ "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).