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

# Webview

{% embed url="<https://drive.google.com/file/d/1pQb-aAj_7Dk6oZJ-2yqQudS73Ba_U0tV/view?usp=sharing>" %}

Para enriquecer a interação com o usuário usamos a **Webview**, que fica responsável por pegar ou mostrar informações de forma mais eficiente durante o fluxo da conversa. A ideia aqui é que o usuário tenha a experiência de estar numa conversa com o bot e ao mesmo tempo usando recursos de um aplicativo web ou mobile.

{% hint style="warning" %}
A Webview pode ser acionada durante o fluxo da conversa apenas através do botão de uma mensagem do tipo cartão.
{% endhint %}

Estamos disponibilizando no momento 3 tipos de Webviews: **Campos de Formulário**, **Avançado** e **URL Externa**.

## **Campos de Formulários**

Aqui temos a opção de apresentar um formulário com campos do objeto Usuário para serem preenchidos. Todo o comportamento é controlado pela plataforma CosmoBots.

![](/files/-LTwFUuDQKL05W7h1TvW)

A **Altura da Webview** define qual a porcentagem da tela será ocupada pela Webview. É interessante utilizar uma altura que não cubra 100% da tela, assim o usuário perceberá que ainda está no chatbot.

Abaixo segue um exemplo de como fica esta Webview para o usuário:

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

Após a conclusão da Webview todos os dados do formulário serão salvos na base de dados do CosmoBots.

## **Avançado**

Este tipo de Webview possui mais recursos. E se baseia em diferentes layouts para apresentar a informação ao usuário.

Os layouts precisam ser preenchidos e colocados na variável chamada **webview**. Abaixo seguem os atributos disponíveis para todos os layouts:

| Atributo |      Tipo     | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| :------: | :-----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|    id    |     String    | Identificador do layout. Pode ser definido qualquer String. **Obrigatório**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
|  header  |     String    | Cabeçalho do layout. **Obrigatório**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
|  buttons |     Array     | <p>Conjunto de botões para navegação que aparecem ao final do layout. Obrigatório.</p><p>Os campos são:</p><p><strong>label:</strong> rótulo do botão</p><p><strong>next\_id:</strong> caso esteja dentro de um Conjunto de Layouts, define aqui o id do próximo layout</p><p><strong>go\_back:</strong> caso esteja dentro de um Conjunto de Layouts, define se a ação do botão é voltar ao layout anterior</p><p><strong>required:</strong> indica se é necessário selecionar algum item antes de seguir adiante</p><p><strong>save\_record:</strong> indica se precisa salvar o registro dos dados do layout atual.</p>                 |
|  options | Object (JSON) | <p>Opções adicionais do layout:</p><p><strong>min\_select:</strong> mínimo de itens a serem selecionados (Número)</p><p><strong>max\_select:</strong> máximo de itens a serem selecionados (Número)</p><p><strong>min\_item\_quantity:</strong> quantidade mínima de cada item (Número)</p><p><strong>max\_item\_quantity:</strong> quantidade máxima de cada item (Número)</p><p><strong>show\_limit\_select:</strong> mostra mensagem sobre o limite de itens a serem selecionados (Booleano)</p><p><strong>show\_limit\_quantity:</strong> mostra mensagem sobre o limite da quantidade de cada item a serem selecionados(Booleano)</p> |

E agora vamos aos detalhes de cada layout, contendo exemplos de uso:

### **Lista e Seleciona Item**

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

Abaixo segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                                                                    |
| :------: | :-----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   type   |     String    | Tipo do layout: select. **Obrigatório**.                                                                                                                                                     |
|   data   |     Array     | Dados que serão usados para montar a lista. **Obrigatório**.                                                                                                                                 |
| selected |     Array     | Itens já selecionados.                                                                                                                                                                       |
| response |     String    | Nome da variável que receberá a resposta do usuário. *Exemplo: Caso seja 'itens', ela poderá ser acessada dentro do contexto, usando context.itens.* **Obrigatório**.                        |
|  fields  | Object (JSON) | Nome dos campos usados para mostrar informações sobre cada item. Os campos devem ser valores presentes nos itens exibidos. **Obrigatório**. As opções são: title, subtitle, price, currency. |

Aqui temos um exemplo de como preencher este 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 e Seleciona Quantidade do Item**

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

Segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                    |
| :------: | :-----------: | -------------------------------------------------------------------------------------------------------------------------------------------- |
|   type   |     String    | Tipo do layout: select\_product\_quantity. **Obrigatório**.                                                                                  |
|   data   |     Array     | Dados que serão usados para montar a lista. **Obrigatório**.                                                                                 |
| selected |     Array     | Itens já selecionados.                                                                                                                       |
| response |     String    | Nome da variável que terá os itens com as quantidades selecionadas após a conclusão da Webview. **Obrigatório**.                             |
|  fields  | Object (JSON) | Nome dos campos usados para mostrar informações sobre cada item. **Obrigatório**. As opções são: title, subtitle, quantity, price, currency. |

Aqui temos um exemplo de como preencher este 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
   }]
}];
```

### **Lista e Seleciona Endereço**

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

Segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                                                        |
| :------: | :-----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   type   |     String    | Tipo do layout: select\_address. **Obrigatório**.                                                                                                                                |
|   data   |     Array     | Dados que serão usados para montar a lista. **Obrigatório**.                                                                                                                     |
| selected |     Array     | Registro de endereço já selecionado.                                                                                                                                             |
| response |     String    | Nome da variável que terá o registro de endereço selecionado após a conclusão da Webview. **Obrigatório**.                                                                       |
|  fields  | Object (JSON) | Nome dos campos usados para mostrar informações sobre cada registro de endereço. **Obrigatório**. As opções são: street, number, complement, neighborhood, city, state, zipcode. |

Aqui temos um exemplo de como preencher este 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
   }]
}];
```

### **Lista Pedidos**

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

Segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                                                                                 |
| :------: | :-----------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   type   |     String    | Tipo do layout: list\_orders. **Obrigatório**.                                                                                                                                                            |
|   data   |     Array     | Dados que serão usados para montar a lista. **Obrigatório**.                                                                                                                                              |
|  fields  | Object (JSON) | Nome dos campos usados para mostrar informações sobre cada item da lista. **Obrigatório**. As opções são: order\_number, status, confirmation\_date, payment\_method, subtotal, freight, total, currency. |

Aqui temos um exemplo de como preencher este 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',
   }]
}];
```

### **Mostra Total**

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

Segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                                    |
| :------: | :-----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|   type   |     String    | Tipo do layout: show\_total. **Obrigatório**.                                                                                                                |
| response |     String    | Nome da variável que terá as informações sobre os valores totais após a conclusão da Webview. **Obrigatório**.                                               |
|  fields  | Object (JSON) | Nome dos campos dos itens selecionados que serão usados para calcular os valores totais. **Obrigatório**. As opções são: freight, price, quantity, currency. |

Aqui temos um exemplo de como preencher este 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',
   }]
}];
```

### **Novo Registro**

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

Segue os atributos adicionais para este tipo de layout:

| Atributo |      Tipo     | Descrição                                                                                                                                                                                                                                                     |
| :------: | :-----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   type   |     String    | Tipo do layout: new\_record. **Obrigatório**.                                                                                                                                                                                                                 |
| response |     String    | Nome da variável que terá as informações do novo registro após a conclusão da Webview. **Obrigatório**.                                                                                                                                                       |
|  fields  | Object (JSON) | Nome dos campos do novo registro a ser criado. **Obrigatório**. As opções dependem quais campos você deseja que o usuário preencha. Como exemplo de criar um novo endereço, os campos seriam: street, number, complement, neighborhood, city, state, zipcode. |

Aqui temos um exemplo de como preencher este 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
   }]
}];
```

### **Conjunto de Layouts**

E finalmente, temos a opção de definir um Conjunto de Layouts. Seria como um passo a passo que o usuário precisa seguir para concluir a Webview. Para isso basta adicionar cada layout dentro da variável [webview](/help/bot-builder/fluxo-da-conversa/webview.md) a ordem que você deseja que as mesmas aparecem para o usuário.

Segue um exemplo, onde o cenário aqui seria para finalizar uma 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**

Existe a opção também de a Webview ter sua origem em alguma URL externa ao CosmoBots. Portanto o controle não estaria na plataforma do CosmoBots mas poderia usar uma etapa seguinte a esta para, por exemplo, chamar uma API para consultar ou atualizar informações do contexto da conversa.

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