Mensagens de Negócios - Componentes

Índice:

1. Introdução
2. Quick Reply
3. Carousel Rich Card
4. Como Criar Seus Componentes JSON
5. Standalone Rich Card
6. Standalone Rich Card com Mídia
7. Ações Sugeridas (Abrir um Link e/ou Discar um Número)
8. Como Personalizar Seus Próprios Componentes

 

Introdução

Os seguintes tipos de mensagens já foram integrados com o Blip, o que significa que você pode simplesmente usar os componentes já incorporados do Blip através do Builder.

 

Quick Reply

Aqui está um exemplo mostrando como você pode usar o recurso de resposta rápida do Blip para criar sugestões no GBM.

O primeiro passo é criar o recurso de Quick Reply através de um bloco no Builder.

 

Edite a Quick Reply como desejar.

 

É isso! Assim sua mensagem será vista ao usar o GBM:

 

 

Carousel Rich Card

Aqui está um exemplo mostrando como você pode usar o recurso de carrossel do Blip para criar carousel rich cards no GBM.

O primeiro passo é criar o recurso de Carousel através de um bloco no Builder.

 

Edite o Carousel como desejar.

 

É isso! Assim sua mensagem será vista ao usar o GBM:

 

Como Criar Seus Componentes JSON

Como Começar

Esta página wiki mostrará como criar o arquivo JSON para muitos tipos diferentes de mensagens GBM de uma maneira fácil de entender, dando um exemplo para cada caso.

Antes de cada um dos exemplos abaixo, você precisará seguir os próximos dois passos:

O primeiro passo é criar um conteúdo dinâmico através de qualquer bloco no builder.

 

Lembre-se de definir o tipo de conteúdo dinâmico para application/json.

 

Notas importantes:

Sua mensagem final só será visível através do GBM, se você estiver tentando testar isso usando qualquer outro canal, como o Blip Chat, ele exibirá "Conteúdo Não Suportado" em vez do conteúdo correto.

Se sua mensagem contiver um campo de sugestão, ou seja, um botão para o usuário pressionar, você também deve criar um comando "aguardando entrada do usuário" no bloco através do Blip.

Image

O arquivo Json para enviar uma imagem é:

{
  "image": {
     "contentInfo": {
        "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
     }
  }
}

 

Isto é como a mensagem final no GBM ficará:

 

Imagem com Sugestões

O campo "postbackData" é o valor que você deve tratar como a resposta do usuário quando ele clicar no botão de sugestão.

O arquivo Json final para criar uma Imagem com Sugestões é:

 

{
  "suggestions": [
          {
             "reply": {
                 "text": "Suggestion 01",
                 "postbackData": "reply1"
             }
          },
          {
             "reply": {
                 "text": "Suggestion 02",
                 "postbackData": "reply2"
             },
          }
    ],
    "image": {
        "contentInfo": {
            "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
        }
  }

}

 

Isto é como a mensagem final no GBM ficará:

 

Standalone Rich Card

O campo "postbackData" é o valor que você deve tratar como a resposta do usuário quando ele clicar no botão de sugestão.

O arquivo Json final para criar um Standalone Rich Card é:

 

{
   "richCard": {
       "standaloneCard": {
           "cardContent": {
               "title": "Título do Standalone Rich Card",
               "description": "Descrição do Standalone Rich Card",
               "suggestions": [
                   {
                       "reply": {
                           "text": "Suggestion 01",
                           "postbackData": "reply1"
                       }
                   },
                   {
                       "reply": {
                           "text": "Suggestion 02",
                           "postbackData": "reply2"
                       }
                   }
               ]
           }
       }
   }
}

 

Isto é como a mensagem final no GBM ficará:

 

Standalone Rich Card com Mídia

O campo "postbackData" é o valor que você deve tratar como a resposta do usuário quando ele clicar no botão de sugestão.

O arquivo Json final para criar um Standalone Rich Card é:

 

{
   "richCard": {
       "standaloneCard": {
           "cardContent": {
               "title": "Título do Standalone Rich Card",
               "description": "Descrição do Standalone Rich Card",
               "media": {
                   "height": "SHORT",
                   "contentInfo": {
                       "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
                   }
               },
               "suggestions": [
                   {
                       "reply": {
                           "text": "Suggestion 01",
                           "postbackData": "reply1"
                       }
                  },
                  {
                       "reply": {
                           "text": "Suggestion 02",
                           "postbackData": "reply2"
                       }
                   }
               ]
           }
       }
   }
}

 

Isto é como a mensagem final no GBM ficará:

 

Ações Sugeridas (Abrir um Link e/ou Discar um Número)

O campo "postbackData" é o valor que você deve tratar como a resposta do usuário quando ele clicar no botão de sugestão.

O campo "text" tem um máximo de 25 caracteres.

O arquivo Json final para criar um Standalone Rich Card é:

 

{
   "suggestions": [
           {
               "action": {
                   "text": "Título da Ação 01",
                   "postbackData": "link",
                   "openUrlAction": {
                       "url": "https://www.take.net/"
                     }
               }
           },
           {
               "action": {
                   "text": "Título da Ação 02",
                   "postbackData": "dial",
                   "dialAction": {
                       "phoneNumber": "+5531999999999"
                    }
               }
          }
      ],
  "text": "Sugestões de Texto"
}

 

Isto é como a mensagem final no GBM ficará:

 

Se você clicar no botão "Título da Ação 01", ele abrirá a URL especificada no JSON:  "https://www.take.net/", e se você clicar no botão "Título da Ação 02", ele discará o número especificado no campo "phoneNumber": "+5531999999999".

Para uma mensagem contendo apenas um botão que abre um link, você pode usar o JSON abaixo:

 

{
   "suggestions": [
           {
               "action": {
                   "text": "Título da Ação 01",
                   "postbackData": "link",
                   "openUrlAction": {
                       "url": "https://www.take.net/"
                     }
              }
          }
      ],
  "text": "Sugestões de Texto"
}

 

E para uma mensagem contendo apenas um botão que disca um número de telefone, você pode usar o seguinte Json:

 

{
   "suggestions": [
           {
               "action": {
                  "text": "Título da Ação 02",
                  "postbackData": "dial",
                  "dialAction": {
                      "phoneNumber": "+5531999999999"
                   }
               }
           }
      ],
  "text": "Sugestões de Texto"
}

 

Como Personalizar Seus Próprios Componentes

Introdução

Esta página wiki ensinará como criar seus próprios arquivos Json para enviar todos os tipos de mensagens personalizadas do Blip para o GBM como conteúdo dinâmico.

O tutorial nesta página segue um conjunto rígido de regras para fazer com que seu Json final funcione como conteúdo dinâmico no Blip, mas se você quiser saber mais sobre cada componente, você pode visitar a Documentação do GBM. Tenha em mente que o modelo deles pode parecer diferente do desta página e, se você seguir o deles, sua mensagem pode não funcionar. Alguns campos que estão presentes na documentação original não estão presentes nesta wiki porque eles podem ser criados utilizando as próprias ferramentas do Blip, como o Carousel Rich Card, por exemplo, ou porque eles não devem ser usados.

Visão Geral do Modelo

As mensagens que você enviará como conteúdo dinâmico usando este guia precisam ter o tipo application/json.

Todos os seguintes componentes "object ()" são detalhados nesta wiki. Eles são um campo composto de outros campos, mas seu arquivo Json final não deve ter nenhum componente "object ()" escrito nele. Por exemplo, o "object (SuggestedReply)" é composto por um campo "text" e um campo "postbackData", então seu arquivo Json final terá campos "text" e "postbackData" no lugar do campo "object (SuggestedReply)".

O modelo geral é o seguinte:

 

{
   "suggestions": [
       {
           object (Suggestion)
       }
   ],
   "fallback": string,
   "containsRichText": boolean,

   // Union field content can be only one of the following:
   "text": string,
   "image": {
       object (Image)
   },
   "richCard": {
       object (RichCard)
   }
   // End of list of possible types for union field content.
}

 

suggestions[]: object (Suggestion). Uma lista de respostas sugeridas que aparecem como uma lista de chips de sugestão após a mensagem associada. Máximo 13 sugestões.

Tenha em mente que a funcionalidade de sugestões é equivalente ao quick reply da Blip, que já está integrado com o canal GBM, então se você precisar criar uma mensagem composta apenas pelas sugestões e um texto, use o próprio quick reply do Blip, se você precisar misturar sugestões com imagens na mesma mensagem, por exemplo, então você deve usar o conteúdo dinâmico.

fallback: String. Opcional. Texto de fallback que será exibido se o dispositivo do usuário não suportar o tipo de mensagem ou conteúdo.

containsRichText: Boolean. Opcional. Se verdadeiro, indica que a mensagem contém rich text.

Você deve escolher apenas uma das seguintes opções:

text: String. Uma mensagem de texto.

image: object (Image). Uma mensagem de imagem.

richCard: object (RichCard). Mensagem de rich card.

Sugestão

object (Suggestion)

// Union field option can be only one of the following:
"reply": {
 object (SuggestedReply)
},
"action": {
 object (SuggestedAction)
}
// End of list of possible types for union field option.

 

Você deve escolher apenas uma das seguintes opções:

reply: object (SuggestedReply). Uma sugestão para o usuário responder com o texto especificado.

action: object (SuggestedAction). Uma ação sugerida que inicia uma ação nativa no dispositivo.

object (SuggestedReply)

Quando tocado, envia a resposta de texto de volta para o agente.

"text": string,
"postbackData": string

 

text: String. Texto que é exibido na resposta sugerida e enviado para o agente quando o usuário a toca. Máximo de 25 caracteres.

postbackData: String. A string que o agente recebe quando um usuário toca na resposta sugerida, isso é o que deve ser avaliado ao validar a entrada do usuário.

object (SuggestedAction)

Quando tocado, inicia a ação nativa correspondente no dispositivo.

 

"text": string,
"postbackData": string,

// Union field action can be only one of the following:
"openUrlAction": {
 {
   "url": string
 }
},
"dialAction": {
 {
   "phoneNumber": string
 }
}

// End of list of possible types for union field action.

 

text: String. Texto exibido na ação sugerida. Máximo de 25 caracteres.

postbackData: String. A string que o agente recebe quando um usuário toca na ação sugerida.

url: String. A URL que será aberta na openUrlAction.

phoneNumber: String. Obrigatório. O número de telefone especificado que será discado.

Você deve escolher apenas uma das seguintes opções:

dialAction: Abre o aplicativo de discagem padrão do usuário.

openUrlAction: Abre a URL especificada.

Image

object (Image)

"image": {
 "contentInfo": {
   object (ContentInfo)
 }
}

 

contentInfo: object (ContentInfo). Informações sobre uma imagem, incluindo a URL da imagem e a URL da miniatura da imagem.

object (ContentInfo)

"fileUrl": string,
"thumbnailUrl": string,
"forceRefresh": boolean,
"altText": string

 

fileUrl: String. URL publicamente acessível do arquivo. Máximo 5 MB.

Supported types: image/jpeg, image/jpg, image/png.

thumbnailUrl: String. Opcional. URL publicamente acessível da miniatura. Máximo 25 KB.

Supported content types: image/jpeg, image/jpg, image/png.

forceRefresh: Boolean. Se definido, a plataforma busca o arquivo e a miniatura das URLs especificadas, mesmo que a plataforma tenha cópias em cache do arquivo (e/ou da miniatura).

altText: String. Texto descrevendo os detalhes sobre a mídia para fins de acessibilidade.

RichCard

object (RichCard)

Um standalone rich ou um carousel of rich cards enviados do agente para o usuário.

"standaloneCard": {
 object (StandaloneCard)
}

 

standaloneCard: object (StandaloneCard). Standalone card.

object (StandaloneCard)

"cardContent": {
   object (CardContent)
}

 

cardContent: object (CardContent). O conteúdo do cartão, como título, descrição, etc.

object (CardContent)

"title": string,
"description": string,
"media": {
  object (Media)
},
"suggestions": [
 {
  object (Suggestion)
 }
]

 

title: String. Opcional. Título do cartão. Máximo de 200 caracteres.

description: String. Opcional. Descrição do cartão. Máximo de 2000 caracteres.

media: object (Media). Opcional. Mídia a ser incluída no cartão.

suggestions[]: object (Suggestion). Opcional. Lista de sugestões para incluir no cartão. Máximo de 4 sugestões.

object (Media)

Um arquivo de mídia dentro de um rich card.

 

"height": enum (Height),
"contentInfo": {
   object (ContentInfo)
}

 

height: enum (Height). A altura da mídia dentro de um rich card.

contentInfo: object (ContentInfo). Informações sobre uma imagem, incluindo a URL da imagem e a URL da miniatura da imagem.

 

 

Para mais informações, visite a discussão sobre o assunto em  nossa comunidade ou vídeos em nosso canal. 😃