Company Logo
Conselhos e respostas da equipe UserGuiding
Usuários
Engajamento
Configurações
Casos de Uso e Boas Práticas
Alterando o Z-index do beacon do Hotspot
Saiba como ajustar a ordem de empilhamento de um beacon de hotspot.

Visão geral

A UserGuiding utiliza a propriedade z-index do CSS para sobrepor os beacons de Hotspot em sua plataforma web. Essa propriedade controla a ordem vertical de empilhamento dos elementos da UI: quando a ordem da pilha de um beacon é mais alta do que qualquer outro elemento sobreposto, ele se torna o elemento mais alto da página.

 

Na UserGuiding, o valor padrão do z-index do beacon do hotspot é “9999”. Às vezes, esse valor alto pode entrar em conflito com um elemento existente em sua plataforma web. Neste artigo, explicaremos como modificar o índice z do beacon para superar esse conflito e exibir a página como deveria.

 

Alteração do z-index do beacon do hotspot

Você pode alterar o valor padrão do z-index do beacon na nossa extensão do Chrome. Vá até o painel da UserGuiding, navegue até Hotspots na seção Content e selecione o que deseja ajustar. Em seguida, clique em Open in Extension.

 

Como alternativa, você pode ir diretamente à sua plataforma web e clicar no ícone da UserGuiding na barra de ferramentas do navegador para acessar a extensão do Chrome. Quando ela for aberta, clique em Hotspots, selecione o grupo desejado e, em seguida, edite um Hotspot individual dentro do grupo.

 

 

Ao abrir o Hotspot, navegue até a aba Beacon. Você pode aumentar ou diminuir esse número de acordo com suas especificações.

 

 

Qual deve ser o novo valor de z-index do beacon?

Para evitar conflitos entre um beacon e um elemento de UI existente e para que sua página tenha a aparência desejada, você pode ajustar o valor do índice z do beacon para ser maior ou menor do que o valor atual do z-index dos elementos de UI existentes.

 

Se não tiver certeza do valor do z-index dos elementos da UI, compartilhe este artigo com a sua equipe de desenvolvimento.

 

Quando terminar, clique em Save and Publish Changes. Isso fará com que os elementos de UI existentes apareçam atrás ou na frente do beacon.