Webview
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.
A Webview pode ser acionada durante o fluxo da conversa apenas através do botão de uma mensagem do tipo cartão.
Estamos disponibilizando no momento 3 tipos de Webviews: Campos de Formulário, Avançado e URL Externa.
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.
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:
Após a conclusão da Webview todos os dados do formulário serão salvos na base de dados do CosmoBots.
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 | Conjunto de botões para navegação que aparecem ao final do layout. Obrigatório. Os campos são: label: rótulo do botão next_id: caso esteja dentro de um Conjunto de Layouts, define aqui o id do próximo layout go_back: caso esteja dentro de um Conjunto de Layouts, define se a ação do botão é voltar ao layout anterior required: indica se é necessário selecionar algum item antes de seguir adiante save_record: indica se precisa salvar o registro dos dados do layout atual. |
options | Object (JSON) | Opções adicionais do layout: min_select: mínimo de itens a serem selecionados (Número) max_select: máximo de itens a serem selecionados (Número) min_item_quantity: quantidade mínima de cada item (Número) max_item_quantity: quantidade máxima de cada item (Número) show_limit_select: mostra mensagem sobre o limite de itens a serem selecionados (Booleano) show_limit_quantity: mostra mensagem sobre o limite da quantidade de cada item a serem selecionados(Booleano) |
E agora vamos aos detalhes de cada layout, contendo exemplos de uso:
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:
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
}]
}];
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:
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
}]
}];
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:
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
}]
}];
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:
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',
}]
}];
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:
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',
}]
}];
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:
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
}]
}];
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 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:
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
}]
},
];
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.
Last modified 1yr ago