Help Center
SuporteLanguage
  • Help Center šŸš€
  • Introdução
  • Cadastro
  • DefiniƧƵes
  • BOT BUILDER
    • Criar o Bot
      • Importar bot
      • Criando meu primeiro BOT
      • ConfiguraƧƵes do Bot
        • Geral
        • Controle de VersĆ£o
        • Compartilhamento
        • Comportamento
    • Fluxo da Conversa
      • Importador de Q&A
      • Mensagem
        • Encerrar Atendimento
        • Tipos de formatação de Texto
        • O que Ć© uma mensagem template ?
      • Filtro
      • Etapa Existente
      • Rest API
        • Exemplo de utilização da etapa Rest API
      • Javascript
        • Manipulação de Objetos
      • E-mail
      • Controle Humano
      • Webview
      • Encaminha a outro bot
      • Testar Bot
      • Ação de Tempo
    • NLP
      • Intenção
      • Entidade
      • Treinamento
      • Como utilizar o DialogFlow?
    • Canais
      • Microsoft Teams
      • Whatsapp
        • Como utilizar um NĆŗmero de teste da Cosmobots
        • Como posso adquirir o selo de verificação para o meu WhatsApp?
        • Cadastrar templates na plataforma
        • Adicionando botƵes ao canal whatsapp
        • Provedores
          • Twilio
            • Como comprar e configurar um nĆŗmero na Twilio?
            • Inserir webhook em nĆŗmero Twilio
          • Dialog 360
            • Aprovar templates
      • Instagram
        • Como filtrar menƧƵes do Instagram
      • Google Assistant
      • Facebook
        • Como verificar minha empresa no Facebook Business?
        • NĆ£o consigo clicar no botĆ£o de verificar conta. O que fazer?
      • Workplace
      • Chat Widget
        • Landing
        • Publicando Widget
        • Webhook
    • Broadcast
    • Dados
      • Conversas
      • Campos
      • Objetos
      • Como acessar e exportar os Dados coletados pelo Bot?
      • Layouts
        • Cosmo Desk
        • Pesquisa
    • Dashboard
      • Performance dos Atendentes
      • Indicadores
    • Explorer
      • Códigos
      • AlteraƧƵes
    • IntegraƧƵes
      • Pipefy
        • Acessando campos retornados em webhook
      • RD Station
      • AnalĆ­ticos
  • COSMO DESK
    • Live Chat
      • Download Livechat
      • šŸ””Receber notificaƧƵes em Live Chat
    • ConfiguraƧƵes
      • šŸ”„Filas de Atendimento
      • šŸ¤–Regras de atendimento
      • šŸ•SLA
      • šŸ’¬Mensagem RĆ”pidas
      • šŸ“‘Tags
      • šŸ’ØStatus de Ausente
  • CONFIGURAƇƕES
    • Perfil
    • Cadastrar UsuĆ”rios
    • Consumo
    • Feriados
  • API
    • V1 - Records
    • V1 - Index
    • V1 - Send Message
    • V1 - Broadcast Messages
  • Available Languages
  • Outros
    • Saber Mais
      • Utilizando Hyperlink no canal Widget
      • Formatação em negrito e itĆ”lico para canais Widget e Whatsapp
      • Erro 403
      • Pesquisa NPS
      • Gerar URL de arquivos
      • Enviar o usuĆ”rio para um fluxo especĆ­fico caso ele responda 2 ou mais vezes errado.
      • šŸŖAtivar ou Desativar Cookies
      • 🧹Limpeza de Cache
      • šŸ†—Validar idade
      • šŸ†—Validar e-mail
      • šŸ†—Validar CPF
      • šŸ†—Dialog - Validar mensagens do tipo imagem em Filtro.
      • šŸ†—Validar CNPJ
      • šŸ†—Validar arquivos
      • Como visualizar Logs de Atendimento
      • Pular Etapa de Cadastro
    • Exemplos de Códigos JavaScript
      • Envio de Imagens/Anexos/VĆ­deos/Ɓudios
      • Adicionar TAGS pelo fluxo
      • Limpar TAGS pelo fluxo
      • Parar o bot por x tempo
      • Validar data digitada pelo usuĆ”rio
      • Converter arquivos em B64
      • Validador de resposta a templates
      • Validar menção no Instagram
  • FAQ
    • Criar modelos de mensagem para sua conta do WhatsApp Business
    • Como excluir uma mensagem do WhatsApp enviada usando a API?
    • Regra 24 horas do WhatsApp
Powered by GitBook
On this page
  • Campos de FormulĆ”rios
  • AvanƧado
  • Lista e Seleciona Item
  • Lista e Seleciona Quantidade do Item
  • Lista e Seleciona EndereƧo
  • Lista Pedidos
  • Mostra Total
  • Novo Registro
  • Conjunto de Layouts
  • URL Externa

Was this helpful?

  1. BOT BUILDER
  2. Fluxo da Conversa

Webview

PreviousControle HumanoNextEncaminha a outro bot

Last updated 3 years ago

Was this helpful?

Para enriquecer a interação com o usuÔrio usamos a Webview, que fica responsÔvel por pegar ou mostrar informações de forma mais eficiente durante o fluxo da conversa. A ideia aqui é que o usuÔrio tenha a experiência de estar numa conversa com o bot e ao mesmo tempo usando recursos de um aplicativo web ou mobile.

A Webview pode ser acionada durante o fluxo da conversa apenas através do botão de uma mensagem do tipo cartão.

Estamos disponibilizando no momento 3 tipos de Webviews: Campos de FormulƔrio, AvanƧado e URL Externa.

Campos de FormulƔrios

Aqui temos a opção de apresentar um formulÔrio com campos do objeto UsuÔrio para serem preenchidos. Todo o comportamento é controlado pela plataforma CosmoBots.

A Altura da Webview define qual a porcentagem da tela serĆ” ocupada pela Webview. Ɖ interessante utilizar uma altura que nĆ£o cubra 100% da tela, assim o usuĆ”rio perceberĆ” que ainda estĆ” no chatbot.

Abaixo segue um exemplo de como fica esta Webview para o usuƔrio:

Após a conclusão da Webview todos os dados do formulÔrio serão salvos na base de dados do CosmoBots.

AvanƧado

Este tipo de Webview possui mais recursos. E se baseia em diferentes layouts para apresentar a informação ao usuÔrio.

Os layouts precisam ser preenchidos e colocados na variƔvel chamada webview. Abaixo seguem os atributos disponƭveis para todos os layouts:

Atributo

Tipo

Descrição

id

String

Identificador do layout. Pode ser definido qualquer String. Obrigatório.

header

String

Cabeçalho do layout. Obrigatório.

buttons

Array

Conjunto de botões para navegação que aparecem ao final do layout. Obrigatório.

Os campos são:

label: rótulo do botão

next_id: caso esteja dentro de um Conjunto de Layouts, define aqui o id do próximo layout

go_back: caso esteja dentro de um Conjunto de Layouts, define se a ação do botão é voltar ao layout anterior

required: indica se Ʃ necessƔrio selecionar algum item antes de seguir adiante

save_record: indica se precisa salvar o registro dos dados do layout atual.

options

Object (JSON)

OpƧƵes adicionais do layout:

min_select: mĆ­nimo de itens a serem selecionados (NĆŗmero)

max_select: mÔximo de itens a serem selecionados (Número)

min_item_quantity: quantidade mĆ­nima de cada item (NĆŗmero)

max_item_quantity: quantidade mÔxima de cada item (Número)

show_limit_select: mostra mensagem sobre o limite de itens a serem selecionados (Booleano)

show_limit_quantity: mostra mensagem sobre o limite da quantidade de cada item a serem selecionados(Booleano)

E agora vamos aos detalhes de cada layout, contendo exemplos de uso:

Lista e Seleciona Item

Abaixo segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: select. Obrigatório.

data

Array

Dados que serão usados para montar a lista. Obrigatório.

selected

Array

Itens jĆ” selecionados.

response

String

Nome da variÔvel que receberÔ a resposta do usuÔrio. Exemplo: Caso seja 'itens', ela poderÔ ser acessada dentro do contexto, usando context.itens. Obrigatório.

fields

Object (JSON)

Nome dos campos usados para mostrar informações sobre cada item. Os campos devem ser valores presentes nos itens exibidos. Obrigatório. As opções são: title, subtitle, price, currency.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   id: 'escolhe_item',
   type: 'select',
   header: 'Item',
   data: itens,
   selected: itens,
   response: 'itens',
   fields: {
      title: 'nome_produto',
      subtitle: 'descricao_produto',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 1,
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'total',
      go_back: true,
   },{
      label: 'Confirmar',
      required: true
   }]
}];

Lista e Seleciona Quantidade do Item

Segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: select_product_quantity. Obrigatório.

data

Array

Dados que serão usados para montar a lista. Obrigatório.

selected

Array

Itens jĆ” selecionados.

response

String

Nome da variÔvel que terÔ os itens com as quantidades selecionadas após a conclusão da Webview. Obrigatório.

fields

Object (JSON)

Nome dos campos usados para mostrar informações sobre cada item. Obrigatório. As opções são: title, subtitle, quantity, price, currency.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   type: 'select_product_quantity',
   header: cabecalho,
   data: lista_produtos,
   selected: context['itens_pedido'] | [],
   response: 'itens_pedido',
   fields: {
      title: 'nome',
      subtitle: 'descricao',
      image_url: 'url_da_imagem',
      quantity: 'quantidade',
      price: 'valor',
      currency: 'BRL',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 2,
      show_limit_quantity: false,
      min_item_quantity: 1,
      max_item_quantity: 5,
   },
   buttons: [{
      label: 'Confirmar',
      required: true
   }]
}];

Lista e Seleciona EndereƧo

Segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: select_address. Obrigatório.

data

Array

Dados que serão usados para montar a lista. Obrigatório.

selected

Array

Registro de endereƧo jƔ selecionado.

response

String

Nome da variÔvel que terÔ o registro de endereço selecionado após a conclusão da Webview. Obrigatório.

fields

Object (JSON)

Nome dos campos usados para mostrar informações sobre cada registro de endereço. Obrigatório. As opções são: street, number, complement, neighborhood, city, state, zipcode.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   id: 'escolhe_endereco',
   type: 'select_address',
   header: '2. Escolhe EndereƧo',
   data: enderecos,
   selected: context ? context['endereco'] : [],
   response: 'endereco',
   fields: {
      street: 'rua',
      number: 'numero',
      complement: 'complemento',
      neighborhood: 'bairro',
      city: 'cidade',
      state: 'estado',
      zipcode: 'cep',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 1,
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'itens_pedido',
      go_back: true
   },
   {
      label: 'Novo EndereƧo',
      next_id: 'novo_endereco'
   },{
      label: 'Próximo',
      next_id: 'total',
      required: true
   }]
}];

Lista Pedidos

Segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: list_orders. Obrigatório.

data

Array

Dados que serão usados para montar a lista. Obrigatório.

fields

Object (JSON)

Nome dos campos usados para mostrar informações sobre cada item da lista. Obrigatório. As opções são: order_number, status, confirmation_date, payment_method, subtotal, freight, total, currency.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   type: 'list_orders',
   header: 'Meus Pedidos',
   data: pedido__s,
   fields: {
      order_number: 'codigo',
      status: 'status',
      confirmation_date: 'data_confirmacao',
      payment_method: 'forma_de_pagamento',
      subtotal: 'valor_subtotal',
      freight: 'valor_frete',
      total: 'valor_total',
      currency: 'BRL'
   },
   buttons: [{
      label: 'Ok',
   }]
}];

Mostra Total

Segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: show_total. Obrigatório.

response

String

Nome da variÔvel que terÔ as informações sobre os valores totais após a conclusão da Webview. Obrigatório.

fields

Object (JSON)

Nome dos campos dos itens selecionados que serão usados para calcular os valores totais. Obrigatório. As opções são: freight, price, quantity, currency.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   id: 'total',
   type: 'show_total',
   response: 'total',
   header: '3. Total',
   fields: {
      freight: 15,
      price: 'valor',
      quantity: 'quantidade',
      currency: 'BRL',
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'escolhe_endereco',
      go_back: true
   },
   {
      label: 'Próximo',
      next_id: 'escolhe_pagamento',
   }]
}];

Novo Registro

Segue os atributos adicionais para este tipo de layout:

Atributo

Tipo

Descrição

type

String

Tipo do layout: new_record. Obrigatório.

response

String

Nome da variÔvel que terÔ as informações do novo registro após a conclusão da Webview. Obrigatório.

fields

Object (JSON)

Nome dos campos do novo registro a ser criado. Obrigatório. As opções dependem quais campos você deseja que o usuÔrio preencha. Como exemplo de criar um novo endereço, os campos seriam: street, number, complement, neighborhood, city, state, zipcode.

Aqui temos um exemplo de como preencher este layout:

webview = [{
   id: 'novo_endereco',
   type: 'new_record',
   object: 'endereco',
   header: 'Novo EndereƧo',
   response: 'endereco',
   fields: {
      street: 'rua',
      number: 'numero',
      complement: 'complemento',
      neighborhood: 'bairro',
      city: 'cidade',
      state: 'estado',
      zipcode: 'cep',
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'escolhe_endereco',
      go_back: true
   },{
      label: 'Próximo',
      next_id: 'total',
      save_record: true,
      required: true
   }]
}];

Conjunto de Layouts

Segue um exemplo, onde o cenƔrio aqui seria para finalizar uma compra:

webview = [{
   id: 'itens_pedido',
   type: 'select_product_quantity',
   header: '1. Itens do Pedido',
   data: context['itens_pedido'] | [],
   selected: context['itens_pedido'] | [],
   response: 'itens_pedido',
   fields: {
      title: 'nome',
      subtitle: 'descricao',
      image_url: 'url_da_imagem',
      quantity: 'quantidade',
      price: 'valor',
      currency: 'BRL',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 10,
      show_limit_quantity: false,
      min_item_quantity: 0,
      max_item_quantity: 5,
   },
   buttons: [{
      label: 'Próximo',
      next_id: 'escolhe_endereco',
      required: true
   }]
},
{
   id: 'escolhe_endereco',
   type: 'select_address',
   header: '2. Escolhe EndereƧo',
   data: enderecos,
   selected: context['endereco'] | [],
   response: 'endereco',
   fields: {
      street: 'rua',
      number: 'numero',
      complement: 'complemento',
      neighborhood: 'bairro',
      city: 'cidade',
      state: 'estado',
      zipcode: 'cep',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 1,
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'itens_pedido',
      go_back: true
   },
   {
      label: 'Novo EndereƧo',
      next_id: 'novo_endereco'
   },{
      label: 'Próximo',
      next_id: 'total',
      required: true
   }]
},
{
   id: 'novo_endereco',
   type: 'new_record',
   object: 'endereco',
   header: '2. Novo EndereƧo',
   response: 'endereco',
   fields: {
      street: 'rua',
      number: 'numero',
      complement: 'complemento',
      neighborhood: 'bairro',
      city: 'cidade',
      state: 'estado',
      zipcode: 'cep',
   },
   options: {
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'escolhe_endereco',
      go_back: true
   },{
      label: 'Próximo',
      next_id: 'total',
      save_record: true,
      required: true
   }]
},
{
   id: 'total',
   type: 'show_total',
   response: 'total',
   header: '3. Total',
   fields: {
      freight: 15,
      price: 'valor',
      quantity: 'quantidade',
      currency: 'BRL',
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'escolhe_endereco',
      go_back: true
   },
   {
      label: 'Próximo',
      next_id: 'escolhe_pagamento',
   }]
},
{
   id: 'escolhe_pagamento',
   type: 'select',
   header: '4. Pagamento',
   data: forma_de_pagamentos,
   selected: context['pagamento'] | [],
   response: 'pagamento',
   fields: {
      title: 'label',
   },
   options: {
      show_limit_select: false,
      min_select: 1,
      max_select: 1,
   },
   buttons: [{
      label: 'Voltar',
      next_id: 'total',
      go_back: true,
   },{
      label: 'Confirmar',
      required: true
   }]
},
];

URL Externa

Existe a opção também de a Webview ter sua origem em alguma URL externa ao CosmoBots. Portanto o controle não estaria na plataforma do CosmoBots mas poderia usar uma etapa seguinte a esta para, por exemplo, chamar uma API para consultar ou atualizar informações do contexto da conversa.

E finalmente, temos a opção de definir um Conjunto de Layouts. Seria como um passo a passo que o usuÔrio precisa seguir para concluir a Webview. Para isso basta adicionar cada layout dentro da variÔvel a ordem que você deseja que as mesmas aparecem para o usuÔrio.

webview