Formulário Central de Ajuda
Discovery
O formulário está disponível para preenchimento na central de ajuda da Kustomer Base de Conhecimento. A versão desse link é o formulário geral que é direcionado para lojista, entregador, cliente final e hub. Ainda existem formulários que são enviados via link no chat de atendimento quando necessário, esses são: “Pagamento entregadores”, “solicitação entregadores”. O formulário “Forms Liveops“ é para uso interno e está em desuso.
A Kustomer não oferece a funcionalidade de condicionais para a estruturação dos formulários. Isso resulta em uma experiência ruim para o usuário ao preencher os campos, como:
- Campos loja e hub: abre uma lista enorme de opções para seleção, atrapalhando na navegação e dificultando a localização da opção desejada.
- O mesmo formulário para todas as situações, apresentando campos desnecessários para o preenchimento dos motivos de chamado e diferentes personas.
- Formulários diponibilizado apenas com o envio de link, pois não é possível adicionar mais de um na central de ajuda.
Criando o formulário
Para adicionar as opções de seleção ao formulário, é necessário ir em: Klasses > Conversation > Attributes. Hoje esse processo é feito de forma manual.
Para adicionar as opções basta selecionar Option List, digitar e adicionar as opções.
Artigo sobre attributes:
Define custom attributes in Kustomer | Kustomer Help Center
Ao criar formulário, basta adicionar os atributos criados. Artigo sobre criar formulários:
Melhorando a experiência
Para melhorar a experiência de seleção dos campos de loja será necessário criar novos atributos em grupos separados entre Estado, Cidade, Hub e Loja.
Com ajuda dos desenvolvedores exportamos uma planilha através do metabase com a lista de lojas agrupadas pelos atributos definidos.
Para adicionar condicionais ao formulário, é preciso adicionar esses novos atributos em um novo formulário e converter para o editor em código. Dessa forma o editor já disponibiliza as informações dos atributos no editor.
- Outra possibilidade é adicionar diretamente ao código, isso agilizaria o trabalho manual.
Exemplo de campo estado em editor de código, em destaque para as novas opções:
<FieldDropdown
hint={`Example Hint`}
placeholder={`Example Placeholder`}
type={`string`}
label={`Cidade`}
name={`conversationCidade`}
id={`conversationCidade`}
description={`This is an example description.`}
className={``}
required={false}
updateAttribute={true}
attributeType={`conversation`}
attributeProperty={`cidadeStr`}
isCustomAttribute={true}
options={[{“label”:”Belo Horizonte”,”value”:”Belo Horizonte”},{“label”:”Canoas”,”value”:”Canoas”},{“label”:”Curitiba”,”value”:”Curitiba”},{“label”:”Porto Alegre”,”value”:”Porto Alegre”},{“label”:”Rio de Janeiro”,”value”:”Rio de Janeiro”},{“label”:”São Bernardo”,”value”:”São Bernardo”},{“label”:”São Caetano”,”value”:”São Caetano”},{“label”:”São Paulo”,”value”:”São Paulo”}]}
componentAttributeId={`gsy0d7zFh`}
/>
Fluxo de preenchimento de formulário padrão
Para melhoria de usabilidade adicionei ao fluxo a seleção para loja como na seguinte imagem, dessa forma a lista com todas as lojas que dificulta na seleção da opção correta, deixa de existir. Para que a configuração seja possível, esses grupos de seleção precisam ser adicionados aos atributos, como dito a cima.
Para melhoria da experiência criei cinco fluxos diferentes de formulário: Fomulário padrão, Lojista, Entregador, Cliente final e Hub Delivery Center. Formulei textos para cada campo de forma que ajude no entendimento do usuário sobre qual grupo de persona ele pertence.
