# 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](https://help-en.cosmobots.io/bot-builder/conversation-flow/webview) 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)