Webview
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
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:
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:
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:
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:
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:
Segue um exemplo, onde o cenƔrio aqui seria para finalizar uma compra:
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.
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 a ordem que você deseja que as mesmas aparecem para o usuÔrio.