Usando carrosel dinamico


Boa tarde…


Estou tentando fazer que o meu bot recebe o retorno de uma api e dinamicamente carregue o componente carrossel.


Eu estou usando uma api nossa.


Mas como exemplo podem usar essa do tutorial:

https://api.darksky.net/forecast/18282ab300d4b5c476acc0d959a108dc/-16.4443537,-39.0653656?untis=si&lang=pt


Estou começando agora nessa area de bots e tbm no builder da blip


8 comentários

Esse é um exemplo do retorno da chamada da api que estou usando:


{
"sucesso": true,
"retorno":{
"texto": "%NOME%, encontramos algumas opções de acomodações. \nEscolha o tipo e veja os detalhes e o preço de cada uma:\n\n",
"menus":[
{"tag": "1", "icone": "", "menu": "Standard", "palavras": "Standard",…},
{"tag": "2", "icone": "", "menu": "Luxo", "palavras": "Luxo",…},
{"tag": "3", "icone": "", "menu": "Suíte Family", "palavras": "Suíte Family",…},
{"tag": "4", "icone": "", "menu": "Suíte Superior", "palavras": "Suíte Superior",…},
{"tag": "5", "icone": "", "menu": "Vila La Torre", "palavras": "Vila La Torre",…},
{"tag": "#", "icone": "", "menu": "Voltar ao menu anterior"},
{"tag": "*", "icone": "", "menu": "Voltar ao menu principal"} ] } }

Gostaria de saber como seria o retorno da API também, estava tentando usar os exemplos de content types da documentação porem o carrossel não foi retornado:


{
"to": "[email protected]",
"type": "application/vnd.lime.collection+json",
"content": {
"itemType": "application/vnd.lime.container+json",
"items": [
{
"type": "application/vnd.lime.media-link+json",
"value": {
"text": "Welcome to our store!",
"type": "image/jpeg",
"uri": "http://www.petshoplovers.com/wp-content/uploads/2014/03/CUIDADOS-B%C3%81SICOS-PARA-CRIAR-COELHOS.jpg"
}
},
{
"type": "application/vnd.lime.select+json",
"value": {
"text": "Choose what you need",
"options": [
{
"order": 1,
"text": "See our stock"
},
{
"order": 2,
"text": "Follow an order"
}
]
}
}
]
}
}

Olá,


Para construir um carrossel dinamico utilize a execução de script para montar o documento (json) e o tipo de conteudo “Conteúdo dinâmico” para enviar essa mensagem customizada.

Estou fazendo de uma maneira mais manual digamos… estou transformando o retorno para variaveis e vou fazer outros fluxos conforme a quantidade de itens. Não consigo fazer via conteudo dinamico pois não entendo muito de javascript.

Teria algum exemplo de como fazer isso que vc indicou em sua resposta?

Aguardando um exemplo de como esse conteúdo dinâmico funciona para os outros formatos.

Na verdade não há documentação desse componente Conteúdo dinâmico.

Para montar o carrossel utilizando o conteúdo HTTP, a API deve retornar algo assim:


{
"itemType": "application/vnd.lime.document-select+json",
"items": [
{
"header": {
"type": "application/vnd.lime.media-link+json",
"value": {
"title": "Title",
"text": "This is a first item",
"type": "image/jpeg",
"uri": "http://www.isharearena.com/wp-content/uploads/2012/12/wallpaper-281049.jpg"
}
},
"options": [
{
"label": {
"type": "application/vnd.lime.web-link+json",
"value": {
"title": "Link",
"uri": "http://www.adoteumgatinho.org.br"
}
}
},
{
"label": {
"type": "text/plain",
"value": "Text 1"
},
"value": {
"type": "application/json",
"value": {
"key1": "value1",
"key2": "2"
}
}
}
]
},
{
"header": {
"type": "application/vnd.lime.media-link+json",
"value": {
"title": "Title 2",
"text": "This is another item",
"type": "image/jpeg",
"uri": "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"
}
},
"options": [
{
"label": {
"type": "application/vnd.lime.web-link+json",
"value": {
"title": "Second link",
"text": "Weblink",
"uri": "https://pt.dreamstime.com/foto-de-stock-brinquedo-pl%C3%A1stico-amarelo-do-pato-image44982058"
}
}
},
{
"label": {
"type": "text/plain",
"value": "Second text"
},
"value": {
"type": "application/json",
"value": {
"key3": "value3",
"key4": "4"
}
}
},
{
"label": {
"type": "text/plain",
"value": "More one text"
},
"value": {
"type": "application/json",
"value": {
"key5": "value5",
"key6": "6"
}
}
}
]
}
]
}

A API deve retornar apenas o parâmetro “content” da documentação Blip Docs | API Reference.

Reputação 2

Exatamente @Jonathan_Brendon_Eug

Não cheguei a fazer os testes para descobrir quais tipos que são suportados no conteúdo dinâmico, todavia, apenas inserir no primeiro campo o type conforme a documentação e no conteúdo o content assim como o Jonathan informou.


Conteúdo


{
text: "Choose an option",
options: [
{
text: "First option"
},
{
order: 2,
text: "Second option"
},
{
order: 3,
text: "Third option",
type: "application/json",
value: {
key1: "value1",
key2: 2
}
}
]
}

Saída:

Obrigado pessoal!

Esse editor do conteúdo dinâmico podia ser tipo o de script, pra validar inconsistências.

Comente