Visão geral

Checklists são conteúdos de onboarding que contêm uma lista de Guias organizados. Geralmente, são colocadas em painéis para auxiliar e dar suporte aos usuários finais. Este artigo mostrará como criar um Checklist de Onboarding para seu aplicativo web.

Como criar Checklists?

Antes de começar a criar Checklists, é preciso fazer o seguinte:

• Faça login em panel.userguiding.com e faça o download da extensão do Chrome da UserGuiding;
• Crie os Guias que deseja exibir em um Checklist;
• Certifique-se de definir o mesmo container para os Guias e o Checklist;
• Os métodos de acionamento dos Guias são definidos como o Launcher personalizado e seu status está ativo.

Importante: se o Guia que você colocou dentro de um Checklist não estiver ativo, ele não ficará visível na versão em tempo real do Checklist até que você o ative também.

Criando uma Checklist de Onboarding

Para criar uma nova Checklist, vá até a página de criação de Checklist no menu lateral esquerdo, dentro da seção Widgets.

Configuração

1. Nomeie sua Checklist

Dê um nome claro e fácil de reconhecer para sua Checklist, assim você poderá identificá-la com facilidade no futuro.

2. Defina a Página de Destino

Especifique em quais páginas a Checklist deve aparecer. No exemplo, a Checklist está configurada para ser exibida em todas as páginas do dashboard do playground.

3. Defina o Público (Segmento de Usuários)

Escolha qual segmento de usuários verá a Checklist. Por exemplo, você pode torná-la visível para todos os usuários ou apenas para um grupo específico.

4. Personalize a Aparência

• Open by Default: a Checklist será exibida já aberta quando o usuário acessar a página de destino.
• Hide as Completed: assim que todos os objetivos da Checklist (geralmente a conclusão de guias) forem alcançados, ela será automaticamente escondida.
• Dismiss Option: você pode permitir que os usuários fechem a Checklist e personalizar o texto do botão de dispensar.

5. Configurações de Disparo

Por padrão, as Checklists são exibidas automaticamente. Se preferir que ela fique disponível apenas pelo Centro de Recursos, ative a opção "Trigger Only from Resource Centers".

6. Agendamento

Você pode definir data e hora de início e término para exibir a Checklist.
Importante: o agendamento só funciona se a Checklist estiver com o status Ativa.

7. Configurações Avançadas

Selecione o container onde a Checklist será inserida. Isso permite controlar exatamente onde ela será exibida dentro da estrutura da página.

Editor

Content

Nesta seção, você define como a Checklist será exibida para os usuários e como eles irão interagir com ela.

1. Título e Subtítulo

• Checklist Title: Adicione um título claro e específico que ajude o usuário a entender o objetivo da Checklist.
• Checklist Subtitle: Campo opcional para fornecer contexto extra ou instruções abaixo do título.

2. Opção de Progresso

• Ative esta opção para que os usuários acompanhem seu avanço por meio de uma barra de progresso visível e possam marcar os itens conforme forem concluindo.
• Se desativada, a barra de progresso e as caixas de seleção não serão exibidas.

3. Configuração da Opção de Dispensar

• Permitir que os usuários dispensem a Checklist oferece mais controle sobre a experiência deles. Ao ativar essa opção, você pode personalizar os textos de cada parte do modal de confirmação da dispensa.

4. Itens na Checklist

Nesta etapa, você define quais conteúdos vão aparecer na Checklist — podem ser Guias ou URLs.

• Abra o menu suspenso para visualizar a lista de Guias disponíveis.
• Clique no nome de um Guia para adicioná-lo à Checklist.
• Depois de adicioná-lo, você poderá visualizar como cada item será exibido na lista para os usuários.
  

• Você pode alterar o nome exibido de um Guia dentro da Checklist. Isso não modifica o título original do Guia — apenas a forma como ele aparece para os usuários na interface da Checklist.
• Para mudar a ordem dos itens, use o ícone de seta à esquerda do nome de cada Guia para arrastá-los e organizá-los na sequência que preferir.

5. Lógica de Conclusão dos Itens da Checklist

Como a Checklist é feita para mostrar o progresso do usuário, cada item precisa de uma condição para ser marcado como "concluído" (e exibir o check).

• Por padrão, um Guia é marcado como concluído quando o usuário o finaliza — ou seja, quando o objetivo interno do Guia é atingido.
• Para personalizar esse momento de conclusão:
• • Clique em “Guide is Completed”.
  • No menu suspenso, altere para a opção“Goal is Reached”.
  • A partir daí, você pode definir uma condição específica que determina a conclusão.

Dica: é possível usar atributos do usuário ou do navegador para definir condições de objetivo, como visitar uma determinada página ou realizar uma ação específica. Para saber como enviar atributos personalizados para o UserGuiding, consulte este artigo.

Style

A aba Estilo permite personalizar completamente a aparência da sua Checklist, alinhando-a com a identidade visual da sua marca e a experiência do usuário. Todas as mudanças podem ser visualizadas em tempo real.

1. Cores e Tipografia

• Header Color: Defina a cor de fundo do cabeçalho da Checklist.
• Header Text Color: Escolha uma cor para o texto que garanta boa legibilidade.
• Header Style: Personalize o tamanho da fonte, o peso (negrito) e o espaçamento interno (padding) conforme necessário.
• Checklist Height: Ajuste a altura do contêiner da Checklist.
• Checklist Width: Defina a largura com que ela será exibida na tela.
• Select Font: Selecione uma fonte personalizada que combine com o estilo visual da sua marca.

2. Configurações do Lançador

• Launcher Type: Escolha se o botão de abertura da Checklist será exibido como imagem, texto ou uma combinação dos dois.
• Launcher Image: Envie ou selecione uma imagem que represente sua Checklist.
• Launcher Color: Defina a cor de fundo do Launcher.
• Size: Ajuste o tamanho do Launcher
• Position: Controle em qual área da tela o Launcher será exibido.

3. Animação de Conclusão

Melhore a experiência do usuário exibindo uma animação visual quando todos os itens da Checklist forem concluídos. Isso reforça a sensação de progresso e conquista.

Ativação da Checklist

• Salve suas alterações no Editor antes de voltar para a personalização.
• Ative o status da Checklist, salve novamente e publique na sua plataforma.
• Vá até seu app web, na página onde a Checklist foi configurada.
• Atualize a página e você verá a Checklist ativa.
• Dispare o primeiro Guia da Checklist e conclua-o.
• Veja como a barra de progresso da Checklist é preenchida conforme os itens são completados.