Ao clicar em Add a New Step (Adicionar uma nova etapa) na criação do guia, você verá os três tipos de etapas com os respectivos modelos: Modal, Tooltip e Input Field.

A partir do texto simples, ao adicionar novos componentes, você pode criar uma etapa com uma combinação de diferentes materiais, como texto, imagens, vídeo etc.

A localização de cada componente pode ser alterada com o recurso de arrastar e soltar (para cima, para baixo e para os lados).

Modal

A opção "Modal" é adequada para criar uma janela pop-up com recursos visuais. Eles podem ser colocados em posições variáveis.  

Durante sua presença, os usuários finais interagem com a página, que pode estar LIGADA ou DESLIGADA. Depois de concluir a etapa, você pode salvar seu trabalho e visualizá-lo.

Tooltip

A "Tooltip" permite destacar um item específico em seu produto. Você pode apontar um elemento da UI e fazer uma declaração sobre ele com um tooltip. Para avançar para a próxima etapa, clique em um botão ou em um elemento necessário.

Observe a imagem abaixo; nas configurações padrão, a interação do usuário com a área destacada é extraída; em outras palavras, a ação de clicar no elemento selecionado é interrompida.

Você pode ativar a interação por meio da extensão.

Além disso, consulte: O que é um seletor CSS e quando devo usá-lo?

Avançado: Visite essa subseção se quiser fazer a etapa esperar até que o elemento destacado esteja presente na UI ou por um tempo específico (segundos).

Você também pode definir um comportamento considerando a possibilidade de o elemento não aparecer, como pular a etapa ou encerrar o guia.

Input Field

O "Input field" é adequado para destacar um campo de entrada em uma UI e incentivar os usuários finais a preencher a área apontada. Você pode projetá-lo como uma ação obrigatória com a opção "O campo é obrigatório", validar as informações fornecidas e definir um valor para preenchimento automático.