ALTU
Search…
Carrossel de Opções

Estrutura

Recurso disponível apenas no canal Widget
1
{
2
"default": {
3
"type": "carousel",
4
"payload": {
5
"pick": "Escolha uma opção abaixo",
6
"options": [
7
{
8
"image": "https://image.com/img.jpg",
9
"title": "Meu titulo 1",
10
"description": "Descrição do item 1. <br> Essa descrição pode ser longa e conter html",
11
"btnLabel": "Selecionar",
12
"label": "label1",
13
"value": "option1"
14
},
15
{
16
"image": "https://image.com/img.jpg",
17
"title": "Meu titulo 2",
18
"description": "Descrição do item 2. <br> Essa descrição pode ser longa e conter html",
19
"btnLabel": "Selecionar",
20
"label": "label2",
21
"value": "option2"
22
},
23
{
24
"image": "https://image.com/img.jpg",
25
"title": "Meu titulo 3",
26
"description": "Descrição do item 3. <br> Essa descrição pode ser longa e conter html",
27
"btnLabel": "Selecionar",
28
"label": "label3",
29
"value": "option3"
30
}
31
],
32
"hideArrows": true|false,
33
"showTextInput": true|false
34
}
35
}
36
}
Copied!

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 Altu 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).
1
{
2
"valid": true|false
3
}
Copied!

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.
Exemplo
Preview no Widget
Workspace
1
{
2
"default": {
3
"type": "carousel",
4
"payload": {
5
"pick": "Qual a forma de pagamento você prefere??",
6
"options": [
7
{
8
"image": "https://source.unsplash.com/random",
9
"title": "Cartão de crédito",
10
"description": "Você pode: <ul><li>Fazer compras pela internet parceladas.</li><li>Obter um prazo a mais para pagar a compra.</li></ul>",
11
"label": "Pagamento com Cartão de Crédito",
12
"value": "credito"
13
},
14
{
15
"image": "https://source.unsplash.com/random",
16
"title": "Boleto",
17
"btnLabel": "Eu quero!!",
18
"label": "Pagamento com Boleto",
19
"value": "boleto"
20
},
21
{
22
"image": "https://source.unsplash.com/random",
23
"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.",
24
"label": "Pagamento em espécie",
25
"value": "espécie"
26
},
27
{
28
"description": "Não tenho interesse em realizar essa compra nesse momento.",
29
"label": "Nenhuma forma de pagamento escolhida",
30
"value": "nenhum",
31
"cognitive": false
32
},
33
{
34
"title": "Debito",
35
"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.",
36
"label": "Pagamento com Cartão de Débito",
37
"value": "debito"
38
}
39
]
40
}
41
}
42
}
Copied!

Skip Curatorship

Envie uma flag para indicar que a mensagem recebida naquele nó não deve ser enviada para a curadoria.
Exemplo 1
Exemplo 2
1
{
2
"default": {
3
"type": "select",
4
"payload": {
5
"pick": "pergunta",
6
"options": [
7
{
8
"title": "opção 1",
9
"value": "valor da opção 1"
10
},
11
{
12
"title": "opção 2",
13
"value": "valor da opção 2"
14
},
15
{
16
"title": "opção 3",
17
"value": "valor da opção 3"
18
}
19
],
20
“skip_curatorship”: true
21
}
22
}
23
}
Copied!
1
{
2
"default": {
3
"type": "select",
4
"payload": {
5
"pick": "pergunta",
6
"options": [
7
{
8
"title": "opção 1",
9
"value": "valor da opção 1",
10
“skip_curatorship”: true
11
},
12
{
13
"title": "opção 2",
14
"value": "valor da opção 2",
15
“skip_curatorship”: true
16
},
17
{
18
"title": "opção 3",
19
"value": "valor da opção 3"
20
}
21
]
22
}
23
}
24
}
Copied!
  • 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).