Ao criar um Product Tour, você pode escolher elementos específicos do site, como botões ou cabeçalhos, para apontar suas mensagens. O Intercom usa seletores CSS para permitir que você escolha esses elementos.

Quando você escolhe um elemento, o tour gera automaticamente um Seletor CSS que indica como apontar para o elemento. Você pode ver o CSS para o elemento selecionado no canto inferior esquerdo:

Você pode querer adicionar manualmente o seletor CSS por alguns motivos, que abordaremos mais adiante neste artigo. Se quiser editar manualmente o seletor CSS que foi escolhido automaticamente, clique em ‘Avançado’ depois de selecionar o elemento do site.

Aqui, você pode inserir manualmente o Seletor CSS que deseja selecionar:

Por que eu editaria o CSS de um tour?

Existem alguns motivos pelos quais você pode querer editar o CSS ao escolher um elemento do site:

Seu produto mudou

Se seu produto ou site mudou desde que você publicou seu tour, pode ser que o CSS original não funcione mais. Isso pode acontecer porque o elemento referenciado não existe mais ou foi movido para um lugar significativamente diferente. Nesse caso, você pode escolher um novo elemento usando o construtor de tours ou inserir manualmente um novo seletor.

Seu produto usa classes geradas dinamicamente

O CSS é usado para aplicar estilos aos elementos do seu site. Alguns frameworks web geram dinamicamente as classes CSS para aplicar esses estilos. Isso significa que os seletores CSS podem mudar toda vez que um usuário acessa seu produto ou site. Nesse caso, você não poderá usar o seletor CSS automático para construir seu tour. Você pode editar alguns seletores para usar um curinga para ignorar a parte gerada dinamicamente do seletor CSS. Isso significa editar o CSS para que o seletor identifique apenas as partes estáticas/genéricas que estariam presentes para todos os users. No exemplo abaixo, editamos o seletor para procurar por button__ em vez de button__2kbli, pois essa parte do CSS aparece para todos os users.

Como posso garantir que meu tour seja enviado corretamente?

A melhor forma de garantir que seus tours sejam enviados corretamente é anotar o HTML do seu site com um atributo especial que o Intercom pode identificar.

Nota: Você precisará editar o HTML para fazer isso.

Se você sabe quais elementos do seu site quer usar em um tour, pode adicionar um atributo data especial a esses elementos no formato: data-intercom-target=”...”.

<div data-intercom-target="Login button">

 ...

</div>

Por exemplo, se quiser apontar para o botão de login em um tour, você pode adicionar data-intercom-target=”Login button” a esse elemento. Ao anotar seu HTML dessa forma, é muito mais provável que pequenas mudanças no seu produto não afetem seus tours.

Se você anotar o HTML como mostrado acima, o construtor de tours poderá destacar os elementos com a anotação data-intercom-target, para que você possa selecioná-los usando o construtor de tours:

Soluções Avançadas Orientadas por Desenvolvedores

Para questões complexas, como menus suspensos e navegação lateral:

Menus suspensos: Em vez de direcionar itens individuais do menu suspenso, destaque o próprio menu suspenso e forneça instruções para os users. Faça um novo tour após a seleção.
Navegação lateral: Atualize o CSS da sua página para incluir o atributo data-intercom-target. Por exemplo:
<div data-intercom-target="Side navigation button">Texto do Botão</div> Isso proporciona estabilidade aos alvos de navegação, garantindo que o Product Tour esteja alinhado com os elementos pretendidos.
Anote os Elementos HTML: Adicione atributos data-intercom-target aos elementos-chave para garantir estabilidade e compatibilidade com os tours do Intercom.
Garanta a Visibilidade do Elemento: Verifique se os elementos direcionados pelo tour estão visíveis e não ocultos por padrão.

Problemas Comuns com o Alvo de Elementos em Product Tours

Ao configurar Product Tours, você pode encontrar problemas com o alvo de elementos. Aqui estão alguns problemas comuns e suas causas:

Seletores quebrando devido a mudanças no site: Mudanças estruturais no site podem invalidar seletores CSS existentes, fazendo com que parem de funcionar. O Intercom usa uma biblioteca chamada Finder para gerar esses seletores, que podem ficar desatualizados quando o layout ou os elementos do seu site mudam.
Seletores dinâmicos ou genéricos: Usar seletores genéricos, como .d-xl-inline, ou dinâmicos pode causar falhas no direcionamento porque podem não apontar consistentemente para os elementos corretos em diferentes sessões ou carregamentos de página.
Elementos ausentes ou ocultos: Se um elemento direcionado não estiver visível ou não tiver sido renderizado quando uma etapa do tour começar, isso pode fazer a etapa falhar ou exibir a mensagem "element isn’t visible here." Sempre garanta que todos os elementos direcionados estejam presentes e visíveis durante suas respectivas etapas do tour.
Elementos Dinâmicos ou Ocultos: Garanta que os elementos direcionados sejam estáticos e estejam consistentemente presentes no DOM. Para elementos dinâmicos, considere redesenhar o fluxo do tour ou atrasar a etapa até que o elemento seja carregado.
Seletores CSS Incorretos ou Genéricos: Substitua seletores genéricos como nth-child por seletores únicos e específicos, como o atributo data-intercom-target, para um direcionamento preciso.
Elementos Ausentes ou Removidos: Atualize os seletores CSS para apontar para elementos universais e consistentes em todas as versões do seu site. Evite seletores como [href='#/sheets/...'] e use alternativas mais estáveis.

Etapas para Solução de Problemas

Quando você encontrar problemas com o alvo de elementos em Product Tours, siga estas etapas de solução de problemas:

Verifique a Visibilidade do Elemento

Se você vir a mensagem "element isn’t visible here":

Salve a etapa novamente no construtor de Product Tours. Isso pode atualizar o direcionamento.
Verifique se o elemento está presente em todas as versões do seu site, incluindo diferentes tamanhos de tela e estados dos users.
Adicione o atributo data-intercom-target ao elemento. Isso torna o elemento significativamente mais fácil para o Intercom direcionar com confiabilidade.
Verifique o Seletor: Confira se o seletor CSS corresponde a um elemento que está sempre presente quando o tour deve ser acionado.
Edite o Seletor: Modifique o seletor para apontar para um elemento visível e estável, como "Adicionar Linha de Fatura."
Trate Elementos Dinâmicos: Garanta que elementos que aparecem após interação do user estejam presentes no DOM ou redesenhe o fluxo do tour.

Resolva Erros de Direcionamento

Revise e atualize os seletores CSS para consistência. Seletores genéricos ou dinâmicos são frequentemente a causa da instabilidade.
Substitua seletores quebrados por referências a elementos estáticos e universais. Por exemplo, atualize seletores como [href='#/sheets/...'] para apontar de forma confiável para elementos persistentes que têm menos probabilidade de mudar.
Use Direcionamento Avançado: Adicione um atributo data-intercom-target aos elementos e insira manualmente o seletor no Construtor de Tours.
Colabore com Desenvolvedores: Trabalhe com sua equipe de desenvolvimento para atualizar o CSS e o HTML da sua página para um direcionamento melhor.

Teste e Visualize

Após aplicar quaisquer correções, sempre visualize o tour para confirmar que todas as etapas estão funcionando conforme o esperado e que os elementos estão sendo direcionados corretamente.

Tem dúvidas?

Se você tiver mais dúvidas sobre como editar CSS em Product Tours, basta conversar conosco no Messenger e nós ajudaremos você. Aqui estão mais recursos para garantir que seus tours funcionem bem:

Edite o CSS para apontar seu tour para os elementos corretos do site