Visão geral

Depois de fazer o download da extensão da UserGuiding para o Chrome, você estará pronto para criar seu primeiro Guia. Neste artigo, mostraremos a você todas as possibilidades ao criá-los.

Como criar um Guia

Você tem duas opções para começar:

1. Você pode ir para uma página do aplicativo em que deseja criar guias e abrir a extensão do Chrome por meio de seu ícone.
   

2. Ou faça login em panel.userGuiding.com.

• Clique em Guides na seção ENGAGEMENT no menu à esquerda.
• Em seguida, clique no botão + New Guide, que você pode ver abaixo.

• Na janela pop-up de abertura, digite o nome do seu Guia e a URL onde deseja criá-lo. Em seguida, clique no botão Start.
• Por fim, sua página web deve ser aberta em uma nova aba com a extensão da UserGuiding funcionando.

Criação de um Guia

Criaremos o seguinte Guia usando todos os tipos de etapa da extensão, que são chamados respectivamente de Modal, Tooltip e Input Field. Para saber mais sobre eles, consulte este artigo.

• In the example below, we're creating a new Guide directly from the Chrome Extension (option one from the section above).
  

Nosso Guia de exemplo se chamará "How to Start Right Away".

• Agora, vamos adicionar a primeira etapa ao nosso Guia recém-criado por meio do botão + Step.
  

• Selecione um tipo de etapa (nossa primeira opção é um Modal). Você pode começar com um modelo ou criá-lo do zero.
• No meio da página, você verá sua etapa vazia. Você pode criar as etapas que desejar adicionando textos, imagens, vídeos etc.
  

• Você pode definir uma posição para o seu Modal (1). Nossa etapa tem uma imagem e um texto. Usamos os botões padrão de requisitos. Você também tem a opção de usar botões personalizados.
  

Observação: Os botões de requisito são usados para avançar e retroceder entre as etapas de um Guia ou para descartar uma delas.

• Salve (2) e visualize (3) sua etapa. Clique em Back para criar a segunda etapa.
  

• Ao voltar, podemos ver as etapas que criamos. Acoplamos a extensão enquanto criávamos a segunda etapa. E clicamos em + Step.
• Em seguida, você pode continuar adicionando mais etapas com o botão + Step.

Nosso segundo tipo de etapa será um Tooltip. Os Tooltips apontam para um elemento na página e fornecem informações sobre ele.

• Você pode escolher um modelo ou começar do zero. Em seguida, você precisará destacar um elemento para o qual o Tooltip apontará. 
• Pesquise a página com o cursor e selecione o elemento com um clique.
  

Veja como a aba Users, logo abaixo de Dashboard, é destacada.

• Em seguida, você pode digitar dentro do Tooltip.
• Abaixo, escolheremos ir para a próxima etapa clicando no botão Requisite.

Se tivéssemos selecionado o Elemento, o Guia passaria para a próxima etapa clicando na área destacada, que, nesse caso, é a aba Users.

• Salve e visualize sua etapa. Clique em Back para criar uma terceira etapa.

• Nossa terceira etapa é um Input Field. Como os Tooltips, ele aponta para um elemento na página e fornece informações sobre ele. 
• Elas são úteis quando o elemento destacado é um campo em que você pode digitar a entrada.
• Elas contêm configurações extras de comportamento específicas para campos de entrada. Por exemplo: a conclusão de uma etapa pode ser obrigatória com a opção "Field is Required".

Abaixo, destacamos a barra de pesquisa na qual é possível digitar informações do usuário.

• Salve e visualize sua terceira etapa. Essa é a etapa final de nosso Guia de exemplo.
• Clique em Back para ver seu Guia com as etapas listadas e visualizá-lo em conjunto.
  

Observação: os Guias são experiências de usuário previamente pensadas. Ao criar Guias com várias etapas e vários comportamentos e designs, você pode criar experiências personalizadas.

Como publicar um Guia?

• Se tiver terminado de criar um Guia, retorne à seção Guides no painel da UserGuiding e encontre o Guia criado.
• Clique em seu nome ou no ícone de engrenagem e vá para a página de configurações.

• Aqui, certifique-se de que o container correto foi escolhido para o seu Guia.
  

Importante: um container é o código JavaScript que deve ser incorporado à sua plataforma web para concluir a instalação da UserGuiding. As páginas nas quais você deseja mostrar o conteúdo de onboarding, como os Guias, devem conter esse código.

• Por fim, altere o status para ativo, salve e clique em publicar alterações.
  

Dica: para iniciar este Guia em uma ou mais páginas diferentes do seu aplicativo, utilize a seção Page Targeting nas configurações do Guia.