# Webview

To enrich user interaction we use **Webview**, which is responsible for picking up or displaying information more efficiently during the conversation flow. The idea here is for the user to have the experience of being in a conversation with the bot and at the same time using features of a web or mobile application.

{% hint style="warning" %}
The Webview can be triggered during the conversation flow only through the button of a card-type message.
{% endhint %}

We are currently providing 3 types of Webviews: **Form Fields**, **Advanced**, and **External URLs**.

## **Forms Fields** <a href="#campos-de-formularios" id="campos-de-formularios"></a>

Here we have the option to present a form with fields of the User object to be filled. All behavior is controlled by the CosmoBots platform.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-LTwFTW6k6WstNX8tCyR%2F-LTwFUuDQKL05W7h1TvW%2Fimage.png?alt=media\&token=2a701785-1e10-45b8-b562-cc44ed5faef9)

The **Webview Height** defines which percentage of the screen will be occupied by Webview. It is interesting to use a height that does not cover 100% of the screen, so the user will realize that he is still in chatbot.

Here is an example of how this Webview looks to the user:

![](https://lh3.googleusercontent.com/JLslKRDsmwqJTGr83AyKkI40LIJ6R1Vei3YSmAC4M46_xPztjCH1V0aRVVEbiqFJx9SjlXdN7PanBJAjKbEFCPCUEfzOwWFTV5ARP3y5rr2XgLAkVugk2FF92KgbuRFOH-f0W7Ac)

Upon completion of Webview all form data will be saved to the CosmoBots database.

## **Advanced** <a href="#avancado" id="avancado"></a>

This type of Webview has more features. And it relies on different layouts to present information to the user.

Layouts need to be populated and placed in the variable called **webview**. The following are the attributes available for all layouts:

| Atributo | Tipo          | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id       | String        | Identifier of the layout. Any String can be defined. **Required**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| header   | String        | Layout header. **Required**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| buttons  | Array         | <p>Set of navigation buttons that appear at the end of the layout. Required.</p><p>The fields are:</p><p><strong>label:</strong> button label</p><p><strong>next\_id:</strong> if it is within a Layout Set, define here the id of the next layout</p><p><strong>go\_back:</strong> if it is within a Layout Set, it defines if the button action is to go back to the previous layout</p><p><strong>required:</strong> indicates whether you need to select an item before proceeding</p><p><strong>save\_record:</strong> indicates whether to save the record of the current layout data.</p>        |
| options  | Object (JSON) | <p>Additional layout options:</p><p><strong>min\_select:</strong> minimum of items to be selected (Number)</p><p><strong>max\_select:</strong> number of items to be selected (Number)</p><p><strong>min\_item\_quantity:</strong> minimum quantity of each item (Number)</p><p><strong>max\_item\_quantity:</strong> maximum quantity of each item (Number)</p><p><strong>show\_limit\_select:</strong> shows message about the limit of items to be selected (Boolean)</p><p><strong>show\_limit\_quantity:</strong> shows message about the quantity limit of each item to be selected (Boolean)</p> |

And now we go to the details of each layout, containing examples of use:

### List and Select Item <a href="#lista-e-seleciona-item" id="lista-e-seleciona-item"></a>

![](https://lh3.googleusercontent.com/O8ikfYzlyN43bkPFpMvZ25MqQ3FinQelYm_CNpUEjUVMKaJENbTX6oftjdB6nrJ5GyAOc9CKRwe-PUeG_2OdKqw_wiETWeqb1anfYP10M4fkmLzcVTmYYvtAxcok_X5E-FpdTApf)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                    |
| -------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| type     | String        | Layout type: select. **Required**.                                                                                           |
| data     | Array         | Data that will be used to assemble the list. **Required**.                                                                   |
| selected | Array         | Items already selected.                                                                                                      |
| response | String        | Name of the variable that will have the items selected after Webview is completed. **Required**.                             |
| fields   | Object (JSON) | Name of the fields used to display information about each item. Required. The options are: title, subtitle, price, currency. |

Here's an example of how to fill out this 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
   }]
}];
```

### List and Select Item Quantity <a href="#lista-e-seleciona-quantidade-do-item" id="lista-e-seleciona-quantidade-do-item"></a>

![](https://lh4.googleusercontent.com/wOGz-meXUmAGN5Azyk66KUdr9XFHodr__Bw_8oQH59j5zuvJ4j62BqQeKAc_5RmBzzAq8x5yBoE7nVMmoBXXufB-dJ5q3CxNJsB7cd_zVNe2mUT3LMmgn4j0rbPsTUTb4Ff2pIzq)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                                  |
| -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| type     | String        | Layout type: select\_product\_quantity. **Required**.                                                                                      |
| data     | Array         | Data that will be used to assemble the list. **Required**.                                                                                 |
| selected | Array         | Items already selected.                                                                                                                    |
| response | String        | Name of the variable that will have the items with the quantities selected after Webview is completed. **Required**.                       |
| fields   | Object (JSON) | Name of the fields used to display information about each item. **Required**. The options are: title, subtitle, quantity, price, currency. |

Here's an example of how to fill out this layout:

```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
   }]
}];
```

## List and Select Adress

![](https://lh4.googleusercontent.com/TWTHgBWFNLsL7j03zaFqLx24H14oEZEHmFmiONhY6X_Fh6FTDaHPeSlFVu9Xm9UfJ6tWCqmUHspJB4d6TWiz33Wviv9rTtaUN6lopDt7oVdvlLfF2YMVw5R_Pl-i-dFcGt_DYuv6)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                                                                |
| -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type     | String        | Layout type: select\_address. **Required**.                                                                                                                              |
| data     | Array         | Data that will be used to assemble the list. **Required**.                                                                                                               |
| selected | Array         | Address record already selected.                                                                                                                                         |
| response | String        | Name of the variable that will have the address record selected after Webview is completed. **Required**.                                                                |
| fields   | Object (JSON) | Name of the fields used to display information about each address record. **Required**. The options are: street, number, complement, neighborhood, city, state, zipcode. |

Here's an example of how to fill out this layout:

```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
   }]
}];
```

### List of Orders <a href="#lista-pedidos" id="lista-pedidos"></a>

![](https://lh6.googleusercontent.com/-ITuld7RJg6gabyrMIswygQ35uMF7qnnT4jJQL1EtSqHpWoq9O_kRHCuguXzhmEDlr0iyXhah5jNiv08oXzDbkVZ2npPmUjF6uTEwFUoa-B5MnExY5xZlu-E8lezV1FH20_QAthp)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                                                                                                  |
| -------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type     | String        | Layout type: list\_orders. **Required**.                                                                                                                                                                   |
| data     | Array         | Data that will be used to assemble the list. **Required**.                                                                                                                                                 |
| fields   | Object (JSON) | Name of the fields used to display information about each item in the list. **Required**. The options are: order\_number, status, confirmation\_date, payment\_method, subtotal, freight, total, currency. |

Here's an example of how to fill out this layout:

```javascript
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',
   }]
}];
```

## Total

![](https://lh6.googleusercontent.com/JyMvXgRqiDtCLDtE3UhgQC5WRhH7jF_iQgG1IgaCKTCBJNXyQzJ3G6c4JIwpwsGH3o5fmuyB0oD3r_YoOZCIpIjCURoQJm2KgkA86duLI2zHHCOrrwSkqiySJ-FOfvN8W5R0elfc)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                                                    |
| -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type     | String        | Layout type: show\_total. **Required**.                                                                                                                      |
| response | String        | Name of the variable that will have the information about the total values after Webview completes. **Required**.                                            |
| fields   | Object (JSON) | Name of the fields of the selected items that will be used to calculate the total values. **Required**. The options are: freight, price, quantity, currency. |

Here's an example of how to fill out this layout:

```javascript
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',
   }]
}];
```

## New Record

![](https://lh3.googleusercontent.com/q0wDD2tuKi0oC2b5OUNm2WuC2DfurwdoL7o6CasEZGlccEPXY__ZjLsb7Pn-k8te14aBJBV7s6smw9_dgKBe1YMzeDZtj4imy3XcphabeUZO_WJDqZPqpPHuDuGokO2lQS4C2XsH)

Here are the additional attributes for this type of layout:

| Atributo | Tipo          | Descrição                                                                                                                                                                                                                                                  |
| -------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type     | String        | Layout type: new\_record. **Required**.                                                                                                                                                                                                                    |
| response | String        | Name of the variable that will have the new record information after Webview is completed. **Required**.                                                                                                                                                   |
| fields   | Object (JSON) | Name the fields of the new record to be created. **Required**. The options depend on which fields you want the user to fill. As an example of creating a new address, the fields would be: street, number, complement, neighborhood, city, state, zipcode. |

Here's an example of how to fill out this layout:

```javascript
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
   }]
}];
```

## Layouts Set

And finally, we have the option of defining a Layout Set. It would be like a step by step that the user needs to follow to complete the Webview. To do this simply add each layout inside the [webview](/bot-builder/conversation-flow/webview.md) variable to the order that you want them to appear to the user.

Here is an example where the scenario here would be to finalize a purchase:

```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
   }]
},
];
```

## External URL

There is also the option of having Webview originated in some external URL to CosmoBots. So the control would not be on the CosmoBots platform but could use a step following it to, for example, call an API to query or update information from the context of the conversation.[<br>](https://help.cosmobots.io/help/bot-builder/fluxo-da-conversa/pessoa-no-chat)

![](https://lh6.googleusercontent.com/91_X22tJHUH5NWSVAkyk0Sdcs5TlB9ji3j7goTnBnY9qRMLuXwEa2pkaQXjtGA2TXqduEl5hdWPE2gtRqtKTfGJ7u_ARGHdo7jFnUAg5PJhCdjQcUu67iyL2AjLEYf-At1vur0kO)


---

# Agent Instructions: 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:

```
GET https://help-en.cosmobots.io/bot-builder/conversation-flow/webview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.