Webview

Para mejorar la interacción del usuario, usamos el Webview, que es responsable de recoger o mostrar información de manera más eficiente durante el flujo de la conversación. La idea aquí es que el usuario tenga la experiencia de estar en una conversación con el bot y al mismo tiempo utilizando las características de una aplicación web o móvil.

WebView se puede desencadenar durante el flujo de conversación a través del botón de un mensaje de tipo tarjeta.

Actualmente estamos poniendo a disposición 3 tipos de webviews: campos de formulario, Avanzada e URL Externa.

Campos de formularios

Aquí tenemos la opción de presentar un formulario con los campos del objeto de usuario que se rellenará. Todo el comportamiento es controlado por la plataforma Cosmobots.

La Altura de WebView define el porcentaje de la pantalla que ocupará WebView. Es interesante utilizar una altura que no cubra 100% de la pantalla, por lo que el usuario se dará cuenta de que todavía está en el Chatbot.

A continuación, se muestra un ejemplo de cómo esta vista Web es para el usuario:

Tras la finalización de WebView todos los datos del formulario se guardarán en la base de datos de Cosmobots.

Avanzada

Este tipo de WebView tiene más características. Y se basa en diferentes diseños para presentar la información al usuario.

Los diseños deben rellenarse y colocarse en la variable denominada webview. Los siguientes son los atributos disponibles para todos los diseños:

Atributo	Tipo	Descrição
id	String	Identificador del diseño (layout). Puede establecer cualquier String. Obligatorio.
header	String	Cabecera de diseño (layout). Obligatorio.
buttons	Array	Conjunto de botones para la navegación que aparecen al final de la presentación. Obligatorio. Los campos son: label: Etiqueta de botón next_id: Si se encuentra dentro de un conjunto de diseños (layouts), aquí se define el ID del siguiente diseño (layout) go_back: Si se encuentra dentro de un conjunto de diseños (layouts), establece si la acción del botón es volver al diseño (layout) anterior required: Indica si es necesario seleccionar un elemento antes de seguir adelante save_record: Indica si se debe guardar el registro de los datos de diseño (layout) actuales.
options	Object (JSON)	Opciones de diseño (layout) adicionales: min_select: Mínimo de elementos a seleccionar (número) max_select: Máximo de elementos a seleccionar (número) min_item_quantity: Cantidad mínima de cada item (número) max_item_quantity: Cantidad máxima de cada item (número) show_limit_select: Muestra el mensaje sobre el límite de los elementos que se seleccionarán (Boolean) show_limit_quantity: Muestra el mensaje sobre el límite de cantidad de cada elemento que se seleccionará Booleana

Y ahora vamos a los detalles de cada diseño, que contiene ejemplos de uso:

Lista y seleccione elemento

A continuación, se detallan los atributos adicionales para este tipo de diseño:

Atributo	Tipo	Descripción
type	String	Tipo de layout: select. Obligatorio.
data	Array	Datos que se utilizarán para armar la lista. Obligatorio.
selected	Array	Elementos ya seleccionados.
response	String	Nombre de la variable que tendrá los elementos seleccionados después de que se complete WebView. Obligatorio.
fields	Object (JSON)	Nombre de los campos utilizados para mostrar información sobre cada elemento. Obligatorio. Las opciones son: title, subtitle, price, currency.

Aquí tenemos un ejemplo de cómo rellenar este diseño (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 y selecciona cantidad de artículos

Los siguientes son atributos adicionales para este tipo de diseño:

Atributo	Tipo	Descripción
type	String	Tipo de layout: select_product_quantity. Obligatorio.
data	Array	Datos que se utilizarán para armar la lista. Obligatorio.
selected	Array	Elementos ya seleccionados.
response	String	Nombre de la variable que tendrá los elementos con las cantidades seleccionadas al finalizar la vista Web. Obligatorio.
fields	Object (JSON)	Nombre de los campos utilizados para mostrar información sobre cada elemento. Obligatorio. Las opciones son: title, subtitle, quantity, price, currency.

Aquí tenemos un ejemplo de cómo rellenar este diseño:

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 y selecciona dirección

Los siguientes son atributos adicionales para este tipo de diseño:

Atributo	Tipo	Descripción
type	String	Tipo de layout: select_address. Obligatorio.
data	Array	Datos que se utilizarán para montar la lista. Obligatorio.
selected	Array	Registro de dirección ya seleccionado.
response	String	Nombre de la variable que tendrá el registro de dirección seleccionado al finalizar WebView. Obligatorio.
fields	Object (JSON)	Nombre de los campos utilizados para mostrar información sobre cada registro de dirección. Obligatorio. Las opciones son: street, number, complement, neighborhood, city, state, zipcode.

Aquí tenemos un ejemplo de cómo rellenar este diseño:

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

Los siguientes son atributos adicionales para este tipo de diseño (layout):

Atributo	Tipo	Descripción
type	String	Tipo do layout: list_orders. Obrigatório.
data	Array	Datos que se utilizarán para armar la lista. Obrigatório.
fields	Object (JSON)	Nombre de los campos utilizados para mostrar información sobre cada elemento de la lista. Obligatorio. Las opciones son: order_number, status, confirmation_date, payment_method, subtotal, freight, total, currency.

A continuación, se muestra un ejemplo de cómo rellenar este diseño:

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

Muestra Total

Los siguientes son atributos adicionales para este tipo de diseño (layout):

Atributo	Tipo	Descrição
type	String	Tipo de layout: show_total. Obligatorio.
response	String	Nombre de la variable que tendrá la información sobre los valores totales al finalizar la Webview. Obligatorio.
fields	Object (JSON)	Nombre de los campos de los elementos seleccionados que se utilizarán para calcular los valores totales. Obligatorio. Las opciones son: freight, price, quantity, currency.

A continuación se muestra un ejemplo de cómo rellenar este diseño (layout):

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

Nuevo Registro

Los siguientes son atributos adicionales para este tipo de diseño (layout):

Atributo	Tipo	Descripción
type	String	Tipo de layout: new_record. Obligatorio.
response	String	Nombre de la variable que tendrá la nueva información de registro al finalizar la Webview. Obrigatório.
fields	Object (JSON)	Nombre de los campos del nuevo registro que se creará. Obligatorio. Las opciones dependen de los campos que desea que el usuario rellene. Como ejemplo de creación de una nueva dirección, los campos serían: street, number, complement, neighborhood, city, state, zipcode.

Aquí tenemos un ejemplo de cómo rellenar este diseño (layout):

webview = [{
  id: 'nueva_direccion',
  type: 'new_record',
  object: 'direccion',
  header: 'Nueva Direccion',
  response: 'direccion',
  fields: {
     street: 'calle',
     number: 'numero',
     complement: 'complemento',
     neighborhood: 'barrio',
     city: 'ciudad',
     state: 'estado',
     zipcode: 'cep',
  },
  buttons: [{
     label: 'Volver',
     next_id: 'escoge_direccion',
     go_back: true
  },{
     label: 'Próximo',
     next_id: 'total',
     save_record: true,
     required: true
  }]
}];

Conjunto de Layouts

Y finalmente, tenemos la opción de definir un conjunto de layouts. Sería como un paso a paso que el usuario debe seguir para completar la Webview. Para esto basta adicionar cada layout dentro de la variable webview el orden que desea que aparezcan al usuario.

Siguiendo un ejemplo, donde el escenario aquí sería para finalizar una 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

También existe la opción de WebView para tener su origen en alguna URL externa a los cosmobots. Por lo tanto, el control no estaría en la plataforma de Cosmobots, pero podrías utilizar un paso después de esto para, por ejemplo, llamar a una API para consultar o actualizar la información de contexto de conversación.