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


---

# 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.cosmobots.io/help/bot-builder/fluxo-da-conversa/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.