# 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. <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).&#x20;

```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: <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"
                }
            ]
        }
    }
}
```

{% endtab %}

{% tab title="Preview no Widget" %}
![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MDWEpoCyl9Vi2GtIjUq%2F-MDWT27dK87szmmeXf9M%2Fcarousel.gif?alt=media\&token=2e4b3517-3f80-4f90-ad87-93b8b6341d5e)
{% 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 %}

* &#x20;Quando for setado true, a mensagem irá bater no cognitivo, mas a mensagem não será enviada para a área de curadoria.
* &#x20;Por default o seu valor é false.
* &#x20;Ele pode ser ativado para todas as opções do componente (**exemplo 1**) ou somente para uma opção em específica (**exemplo 2**).