Skip to main content

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

Este tópico foi fechado para respostas.

8 comentários

  • Autor
  • Inspiring
  • July 12, 2018

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

  • Blipper
  • September 18, 2018

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.


  • Autor
  • Inspiring
  • September 19, 2018

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?


  • Inspiring
  • October 17, 2018

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.


Victor_Hugo_Goncalve

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:


  • Inspiring
  • October 23, 2018

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