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.

The Webview can be triggered during the conversation flow only through the button of a card-type message.

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

Forms Fields

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.

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:

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

Advanced

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	Set of navigation buttons that appear at the end of the layout. Required. The fields are: label: button label next_id: if it is within a Layout Set, define here the id of the next layout go_back: if it is within a Layout Set, it defines if the button action is to go back to the previous layout required: indicates whether you need to select an item before proceeding save_record: indicates whether to save the record of the current layout data.
options	Object (JSON)	Additional layout options: min_select: minimum of items to be selected (Number) max_select: number of items to be selected (Number) min_item_quantity: minimum quantity of each item (Number) max_item_quantity: maximum quantity of each item (Number) show_limit_select: shows message about the limit of items to be selected (Boolean) show_limit_quantity: shows message about the quantity limit of each item to be selected (Boolean)

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

List and Select Item

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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 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:

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.