# 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.

{% hint style="warning" %}
WebView se puede desencadenar durante el flujo de conversación a través del botón de un mensaje de tipo tarjeta.
{% endhint %}

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.

![](https://2181559123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc2f3nzR3RrYwNCudOj%2F-Mjnv0ulXRyxZ7vZvLQ1%2F-MjnvMPNhjHM-xCaCKQM%2FGIF%2017-09-2021%2010-23-39.gif?alt=media\&token=6f2ea9ae-084f-4a68-8ac1-15ba5dd04c74)

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:

![](https://2181559123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc2f3nzR3RrYwNCudOj%2F-Mjnx9JtmST4q6I3WynV%2F-MjnxhQEM4kXKMAUWYeR%2FGIF%2017-09-2021%2010-33-48.gif?alt=media\&token=9ebc82a7-7523-4d3a-aba2-bdd67015dc7e)

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         | <p>Conjunto de botones para la navegación que aparecen al final de la presentación. Obligatorio.</p><p>Los campos son:</p><p><strong>label</strong>: Etiqueta de botón</p><p><strong>next\_id</strong>: Si se encuentra dentro de un conjunto de diseños (layouts), aquí se define el ID del siguiente diseño (layout)</p><p><strong>go\_back</strong>: 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</p><p><strong>required</strong>: Indica si es necesario seleccionar un elemento antes de seguir adelante</p><p><strong>save\_record:</strong> Indica si se debe guardar el registro de los datos de diseño (layout) actuales.</p> |
| options  | Object (JSON) | <p>Opciones de diseño (layout) adicionales:</p><p><strong>min\_select:</strong> Mínimo de elementos a seleccionar (número)</p><p><strong>max\_select:</strong> Máximo de elementos a seleccionar (número)</p><p><strong>min\_item\_quantity:</strong> Cantidad mínima de cada item (número)</p><p><strong>max\_item\_quantity:</strong> Cantidad máxima de cada item (número)</p><p><strong>show\_limit\_select:</strong> Muestra el mensaje sobre el límite de los elementos que se seleccionarán (Boolean)</p><p><strong>show\_limit\_quantity:</strong> Muestra el mensaje sobre el límite de cantidad de cada elemento que se seleccionará Booleana</p>                                                                   |

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

### **Lista y seleccione elemento**

![](https://lh5.googleusercontent.com/DtdX32h36Xx7MnW_Rvne-dCqXYNQoWUh-3fERrurc7WSiZNtplJuDqjqpGezPP4qpHRxRb5p4CAH3tp-HdQgIqF6oM_pWls_hiBrPZffnG7XtBqWarBeTDUdRTO2oK6cikORBKqNmQWbRe9Gwg)

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):

```javascript
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**

![](https://lh6.googleusercontent.com/F9iAmow44rL21Xnz7W9E3KAd0NbeGCg1qYfmIfybrkvvvI9MeB5LuehjeqcrZyDdghlqIK9234-5bkquhD7pXto1czkiyREY7KBT1x3xSsfib_-MP6NVlusvR7QdQjEu5_X6dmJxx9FbwhwNJg)

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:

```javascript
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**

![](https://lh5.googleusercontent.com/Jb1IV1rgvNO3hJ_WvHr8iMHjNdUZfvBBWevJ8m2mBmzYZcexMqpINqpyn2MSOKIIer1tfs_0oY27Bs4u3N56bgU0rK96CMuNqp8rqd4BzojY1_NWc7G89tziXNJP_9oXBHScoT741nkvzC-obw)

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:

```javascript
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**

![](https://lh4.googleusercontent.com/4GunORohSfC28y5KNPd4q9xuNsRiwqt_VeWVLK4HseIxcX29XDJO6VIP2qYSJ5UHO2Qo1d36TxjJc7RxgAtDn5L0KxjdCIex_v4h8XhouR60LzzYXcm63pG4IWVSrrdQb1OMvqetX8F2nUpC4A)

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:

```javascript
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**

![](https://lh3.googleusercontent.com/iFRtZ2OZZH6wQbsKXnOquzLmZd1Gi_5qTcv3fCQI29-LVYYu4l4dvW5nbh628vA-BxSA2l7A3lFL_MTNuoi6aKb3FO5lBJrJlMqmPdrOCbcwNhMfEaUJWYwXN_LOxPzrYeIf4aVq7HSOjnMs5A)

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):

```javascript
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**

![](https://lh5.googleusercontent.com/3diIaAx6eR58Kv8zF3R_iF5sNb_VcAcELvoAnfz6AI-kgTlveb4HOujYr4XSYOuOIowY36Cp-o8D4QtmxNMsR7foPgXiriUlzc2mhHatLAHFVDMQ1LCzg7zJYl1Ay4j_aAh-tku_HGw9m7eAqw)

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):

```javascript
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](https://help.cosmobots.io/pt/plugin_step_webview.html) el orden que desea que aparezcan al usuario.

Siguiendo un ejemplo, donde el escenario aquí sería para finalizar una compra:

```javascript
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.

![](https://lh5.googleusercontent.com/H6YGIcsDB3vBTW8GvDVhW2260PRXt2olxeuXVawsDV2vWO6p9bvEKmF7UE1TwAy4lLqp5ZHK3Nvx143DpkNHKZVP8SADhsfHKV3N4utxBAuSWH39OP880kKen1g0znZdS1CNVp-sLw7FWSh_rw)