Visão geral

Neste artigo, você lerá sobre diferentes componentes que podem ser adicionados a Guias e Hotspots. A utilização de cada componente também é explicada com imagens de exemplo.

O que é um componente?

Os componentes são unidades diferentes na UserGuiding que podem ser usadas nas etapas do Guia e nos Hotspots.

• Abra a extensão do Chrome da UserGuiding e comece a criar um novo Guia.
• Se você clicar em +Step no editor de etapas, verá que precisa escolher um tipo de etapa.
• Em cada tipo de etapa, você encontrará etapas ou modelos padrão que consistem em componentes separados.

Deste ponto em diante, explicaremos os componentes em uma etapa básica dos Guias com Tooltip.

• Depois de selecionar uma etapa, localize-a na página e clique no ícone "+" para abrir o menu do componente.
• Abaixo, o Tooltip padrão já tem um componente de texto e botões de requisitos padrão.

• No menu de componentes, há sete componentes diferentes.

Text, Image, Hero, Video, Button, HTML e Guide List são os componentes que você pode usar nas etapas do Guia e nos Hotspots.

Depois que um componente é adicionado, você pode arrastar e soltar seu local a qualquer momento.

Seções

• Text
• Image
• Hero
• Video
• Button
• HTML
• Guide List

Text

Text é o componente padrão de todos os tipos de etapas, modelos e Hotspots. Portanto, as instruções para os usuários finais são digitadas dentro dos componentes de texto.

• Clique na área de texto para abrir as configurações de texto. Aqui, você pode projetar e gerenciar seu componente de texto.

Aqui, da esquerda para a direita, respectivamente, você pode encontrar:

1. Estilos de caracteres
2. Alinhamento
3. Preenchimentos circundantes
4. Inserir link
5. Menu de emoji
6. Personalização por meio da inserção de atributos do usuário
7. Excluir

Image

Você pode selecionar o componente Image para adicionar imagens às etapas do Guia e aos Hostpots.

• Depois de clicar no componente de imagem, a unidade será adicionada automaticamente.
• Para carregar uma imagem de seu computador, clique na área de imagem branca recém-adicionada.
• Ou você pode clicar no ícone de imagem para abrir as configurações de imagem. Aqui, você pode projetar e gerenciar seu componente de imagem.

Aqui, da esquerda para a direita, respectivamente, você pode encontrar:

1. Carregamento de imagens
2. Altura máxima da imagem
3. Alinhamento
4. Inserir link ou acionar um Guia
5. Preenchimentos circundantes
6. Excluir

Inserir um link ou acionar um Guia a partir de uma imagem

Quando você adiciona um componente de imagem a uma etapa do Guia ou a um Hotspot, também pode inserir um link para essa imagem ou usá-la como um meio para acionar outro Guia.

• Iniciar um Guia: Você pode definir uma ação para acionar um Guia específico clicando na imagem.
• Ir para URL: Essa ação permite que você configure uma imagem para iniciar uma URL relativa ou um link externo.

Hero

Um Hero é simplesmente um componente de texto que pode ter uma imagem de fundo. Você obterá uma imagem e um texto padrão se clicar em Hero para adicioná-lo como um novo componente.

• Clique na área do Hero para abrir as configurações. Aqui, você pode projetar e gerenciar seu componente Hero.

Aqui, da esquerda para a direita, respectivamente, você pode encontrar:

1. Carregamento de imagens
2. Altura máxima da imagem
3. Alinhamento do texto
4. Tipos de blocos de texto: Corpo, Cabeçalho1, Cabeçalho2, Cabeçalho3
5. Cor do texto
6. Excluir

Video

Você pode selecionar o componente Video para adicionar vídeos às etapas do Guia e aos Hotspots.

• Depois de clicar no componente de vídeo, a unidade será adicionada automaticamente.
• Basta clicar na área de vídeo branca recém-adicionada para inserir o código de incorporação do vídeo que deseja compartilhar.
• Será aberta a seção na qual é possível colar o código de incorporação.

Button

O componente Button é um botão personalizado que aciona ações específicas de um Guia ou de um Hotspot. Você também pode redirecionar seus usuários finais para outra URL por meio deles.

• Para adicionar um novo botão, passe o mouse sobre a etapa do Guia ou Hotspot que está editando no momento, clique no ícone "+" e, em seguida, em Button.

• Depois de clicar no componente do botão, ele será adicionado automaticamente.
• Clique no botão recém-adicionado e comece a digitar para editar seu texto.

• Você pode alterar o local de seus botões arrastando e soltando.

• Clique no botão personalizado para abrir as configurações. Aqui, você pode projetar e gerenciar o componente do botão.

Aqui, da esquerda para a direita, respectivamente, você pode encontrar:

1. Estilo do botão (herdado do tema escolhido);
2. Alinhamento
3. Preenchimentos
4. Propriedades do botão
5. Ação
6. Excluir

Ao usar botões personalizados com Guias, em alguns casos, os botões Requisite não serão necessários; você pode removê-los desmarcando essa opção no editor.

Você pode saber mais sobre como definir ações de clique para botões personalizados neste artigo.

HTML

Você pode selecionar o componente HTML para adicionar elementos HTML às etapas do Guia e aos Hotspots.

Você pode usar um snippet de HTML para inserir uma tabela formatada, um formulário da Web ou um bloco de texto nos seus Guias.

• Depois de clicar no componente HTML, a unidade será adicionada automaticamente.
• Clique na área branca de HTML recém-adicionada para inserir o snippet de HTML.
• Será aberta a seção na qual você pode digitar o snippet de HTML.

Guide list

Você pode selecionar o componente Guide List no menu de novos componentes para adicionar Guias às etapas do Guia e aos Hotspots.

Dessa forma, você pode usar a etapa de um Guia ou um Hotspot como meio para acionar outro Guia. Essa ação permite que os usuários finais decidam qual Guia desejam acionar.

• Depois de clicar no componente Guide List, a unidade será adicionada automaticamente.
• Para selecionar um Guia a ser adicionado, clique na área em branco.
• Isso abrirá a seção na qual você pode selecionar e adicionar Guias.

Certifique-se de marcar a opção "Hide if segments don't match" para evitar que os Guias adicionados sejam mostrados aos usuários finais que não atendem às suas regras de segmento.

Itens da Lista de Guias: Aqui, você pode adicionar novos Guias à sua lista ou extrair os existentes da lista.

Aqui, da esquerda para a direita, respectivamente, você pode encontrar:

1. Itens da Lista de Guias
2. Propriedades do item da lista: arredondamento, altura, tamanho da fonte
3. Preenchimentos circundantes
4. Excluir

Quando o seu Guia ou Hotspot for publicado e um usuário clicar em um Guia na lista, o Guia ou Hotspot atual será automaticamente descartado e o Guia listado será ativado.

Se você escolher um Guia que não possa ser ativado na página atual, o Guia atual será apenas descartado.