[Aguardando exemplo] Usando carrosel dinamico


#1

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


[Aguardando exemplo] Como enviar um carrossel para o Facebook Messenger
#2

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”} ] } }


#3

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”: "553199990000@0mn.io",
“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ÁSICOS-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”
}
]
}
}
]
}
}


#4

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.


#5

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?


#6

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.


#7

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ástico-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 https://docs.blip.ai/#carousel.


#8

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:


#9

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