> For the complete documentation index, see [llms.txt](https://help-es.cosmobots.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help-es.cosmobots.io/bot-builder/flujo-de-conversacion/webview.md).

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

![](/files/-MjnvMPNhjHM-xCaCKQM)

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:

![](/files/-MjnxhQEM4kXKMAUWYeR)

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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help-es.cosmobots.io/bot-builder/flujo-de-conversacion/webview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.