Tooltips oferecem uma experiência contextual e não disruptiva para educar e engajar os users no seu produto, ajudando a acelerar a adoção. São ideais para destacar novos recursos e mostrar seu outro conteúdo aos users quando eles procuram, como exibir um Article do seu Help Center ou iniciar um Product Tour.
Criar uma Tooltip é rápido e fácil, e não requer código. Veja como começar:
Projete suas Tooltips
Primeiro, vá para Outbound no menu principal e clique em + Nova mensagem no canto superior direito.
Então, escolha Tooltips como seu tipo de conteúdo.
Você também pode escolher começar com um modelo pré-fabricado selecionando este tipo de conteúdo na barra lateral esquerda.
Nota:
Tooltips são projetadas especificamente para funcionar com apps web desktop e não são suportadas em apps móveis nativos. Para educar e engajar os users no seu app móvel, Mobile Carousels.
Você pode adicionar múltiplas Tooltips de uma vez adicionando-as ao mesmo grupo.
Elas terão o mesmo público-alvo, agendamento e metas aplicados. É ótimo para agrupar todas as Tooltips de onboarding para novos customers, ou agrupar Tooltips educacionais para apoiar uma parte particularmente complexa do seu produto.
Você pode criar 100 Tooltips por grupo e 50 grupos no total.
Em seguida, dê às suas Tooltips um título curto e impactante. Por exemplo, se você está anunciando um novo recurso do produto, pode chamá-lo de “Lançamento de recurso”:
Escolha um site para adicionar suas Tooltips
Para começar a projetar uma Tooltip, clique em “Adicionar tooltips”
Uma nova janela será aberta. Aqui, adicione o site onde você gostaria de adicionar suas Tooltips:
Esta URL é apenas para selecionar o site correto - não é a URL alvo onde você mostrará sua Tooltip para os customers. Você pode escolher regras de página e público em uma etapa posterior.
Depois de adicionar uma URL, clique em “Abrir site”.
Escolha onde adicionar sua Tooltip
Você pode navegar para outra página daqui se esta Tooltip for para uma página diferente.
Agora clique em “Adicionar tooltip” para começar a projetar sua Tooltip nesta página:
Escolha um elemento na página onde você gostaria de colocar sua Tooltip:
Adicione conteúdo à sua Tooltip
Você pode usar texto estilizado e adicionar links, imagens, vídeos, código, listas com marcadores e numeradas.
Os seguintes formatos de imagem e vídeo são suportados: PNG, JPG, JPEG, GIF e MP4.
Você também pode usar Smart Links para buscar conteúdo que você já criou no Intercom. Por exemplo, você pode adicionar um Smart Link para um Article no seu Help Center que oferece mais informações, ou adicionar um Product Tour que você gostaria de iniciar a partir desta Tooltip:
Nota:
Smart Links encontram apenas conteúdo ativo (publicado) que você criou no Intercom e ignoram quaisquer regras de público que você definiu para esse conteúdo.
Conteúdo acionado por um Smart Link não será exibido ao visualizar uma Tooltip no editor.
Estilize sua Tooltip
Ícone - Selecione isso se quiser que um ícone apareça ao lado de um elemento na página.
Sem ícone - Selecione isso se quiser que o conteúdo apareça de forma fluida quando um customer passar o mouse sobre um elemento.
Etiqueta - Selecione isso se quiser adicionar uma etiqueta ao lado de um elemento, como “Novo” ou “Beta” para um recurso no seu produto. Note que há um limite de 16 caracteres para etiquetas.
Tipo de ícone - Escolha qual tipo de ícone você gostaria de exibir, como um farol para chamar atenção para um novo recurso.
Cor do ícone - Personalize a cor para combinar com sua marca ou se destacar na página.
Mostrar conteúdo em - Decida quando a Tooltip deve revelar o conteúdo, como quando um customer passar o mouse sobre ela ou clicar nela.
Farol animado - Isso permitirá que a Tooltip pisque lentamente até que um customer interaja com ela, e então permanecerá estática.
É possível definir a cor de fundo e o texto para todas as Tooltips que você adicionar aqui. Gerencie isso em “Configurações do grupo”.
Escolha o layout certo para sua Tooltip
Use esses controles para posicionar ou mover sua Tooltip exatamente onde quiser. Você pode experimentar as seguintes opções:
Sobreposto - Esta Tooltip flutuará sobre o elemento (como o Messenger).
Incorporado - Esta Tooltip será renderizada em linha com seu HTML, podendo ajustar o layout da sua página.
Alinhar a - Mova a Tooltip para ficar alinhada com o texto em um elemento, ao lado do elemento ou próximo ao elemento. Você também pode ajustar se ela fica à esquerda, direita, topo, fundo ou centro do elemento.
Deslocamento - Obtenha ainda mais precisão deslocando os pixels que preenchem a Tooltip.
Configurações de posicionamento
Agora clique em “Posicionamento” e decida se quer que as Tooltips apareçam em todo o site (ex: em cabeçalhos ou rodapés) ou em páginas específicas (ex: apenas nas páginas que você escolher).
Para controlar em quais página(s) as Tooltips aparecerão, selecione “Páginas específicas” e clique em “+ Adicionar nova regra”:
Em seguida, defina a URL da página onde suas Tooltips devem aparecer. Por padrão, esta será a URL do site que você selecionou no início, mas você pode editar essa regra e escolher qualquer página do seu site:
Certifique-se de que a página escolhida tenha o elemento onde você está colocando a tooltip.
Você também pode usar ‘contém’ para ser mais flexível, como segmentar grupos de páginas ou páginas que contenham parâmetros únicos (como ID do user). Por exemplo, você pode escolher segmentar URLs de páginas que contenham ‘project’ para atingir os customers quando estiverem trabalhando em projetos.
Adicione quantas regras de URL de página precisar para segmentar as páginas certas.
É uma boa ideia copiar e colar a URL do seu app ou site diretamente, pois isso capturará quaisquer caracteres ocultos na barra de endereços do seu navegador, como barras finais.
Correspondência de elemento
Aqui você pode alterar o elemento onde sua Tooltip está colocada usando o Seletor CSS, ou se você tem um texto muito específico na sua página onde está tentando colocar a Tooltip, tente buscar “Por Texto” para encontrar o elemento exato que contém esse texto.
Se estiver fazendo correspondência de elemento “Por Texto”, ele encontrará o primeiro elemento na página que contenha esse termo de texto.
Se estiver tendo dificuldade para selecionar o elemento certo na sua página, tente escolher manualmente o Seletor CSS.
Quando terminar de finalizar o posicionamento das suas Tooltips, vá em frente e clique em “Concluído”.
Agora você pode adicionar mais Tooltips a este grupo que terão as mesmas regras e agendamento aplicados.
Se quiser criar Tooltips com regras e agendamento diferentes, será necessário salvar esta e então projetar uma nova Tooltip.
Gerenciando frequência e cores de fundo:
Escolha a frequência com que essas Tooltips devem aparecer e defina cores de fundo consistentes em “Configurações do grupo”:
Frequência:
Escolha se essas Tooltips devem continuar aparecendo toda vez que atenderem às regras do público, ou se devem aparecer até serem interagidas e depois desaparecer. Isso é ótimo para anúncios de recursos ou para aumentar a conscientização.
A frequência é aplicada a todas as Tooltips que você adicionou aqui e não pode ser definida para Tooltips individuais.
O engajamento com a Tooltip é rastreado por cookies do navegador e não pela conta do user, então se seus users fizerem qualquer uma das seguintes ações, eles verão as Tooltips com as quais já interagiram novamente:
Usar um navegador ou dispositivo diferente
Limpar o cache e os cookies
Fazer login em modo anônimo
Cores de fundo:
Você também pode definir uma cor de fundo e texto em HEX para todas as Tooltips que adicionou aqui. Isso é ideal para tooltips que precisam seguir as diretrizes de design do seu produto.
Quando terminar de gerenciar as configurações do grupo, clique em “Salvar e fechar”.
Editando grupos de Tooltip
Quando você estiver editando um grupo de Tooltip, poderá ver na barra de ferramentas inferior:
Todas as Tooltips incluídas no grupo.
Como a Tooltip está marcada - se é um Seletor CSS ou Elemento de Texto
Onde a Tooltip está sendo exibida - em todo o site ou em uma página específica
Se a Tooltip está na página atual.
Se você editar uma Tooltip que não está na página atual, verá a Tooltip flutuar no meio da página com um banner de erro.
Aqui está um exemplo de um grupo de Tooltip exibindo as diferentes configurações para as Tooltips individuais.
Teste em um ambiente ao vivo
Recomendamos testar suas Tooltips das seguintes formas antes de disponibilizá-las para os customers:
1. Teste como um novo user
Se você adicionou Tooltips para novos users, deve se inscrever no seu produto do zero e testar sua Tooltip como um novo user real. Isso garantirá que sua Tooltip funcione quando seu produto estiver completamente novo, sem dados existentes.
2. Teste com todas as suas diferentes permissões de produto
Se seu produto tem diferentes níveis de permissão, por exemplo, básico, admin, super admin; você deve testar sua Tooltip como um user com cada um desses níveis de permissão diferentes. Isso garantirá que sua Tooltip funcione para todos os tipos de user. Também garantirá que sua Tooltip tenha sido adicionada às páginas que todos os users podem acessar.
3. Teste se sua Tooltip funciona com e sem conteúdo do produto
Se seu produto pode ser preenchido com conteúdo gerado pelo user, você deve garantir que suas Tooltips funcionem com e sem conteúdo. Você deve testar estados vazios, assim como seu produto com conteúdo.
Você pode usar regras de segmentação de público para permitir que apenas você ou seus colegas visualizem as Tooltips e garantam que elas estejam funcionando como esperado. Por exemplo, podemos selecionar users onde “Email contém examply”:
Então defina as Tooltips ao vivo e visite a página onde você as adicionou para vê-las em ação:
Resolução de problemas
Se você definiu suas Tooltips ao vivo e elas não estão aparecendo, certifique-se de ter verificado o seguinte:
A página correta está selecionada em Configurações de posicionamento.
A URL da página não mudou.
Elementos dinâmicos não estão alterando o layout da página. Saiba como corrigir isso.
Se uma Tooltip está aparecendo, mas não no lugar certo, você pode editar o layout e o posicionamento.
Se você estiver fazendo correspondência de elemento “Por Texto” e selecionou “Sitewide” em Configurações de posicionamento, provavelmente corresponderá a páginas com esse texto em qualquer lugar. Tente usar um Seletor CSS para correspondência de elemento desta Tooltip em vez disso.
Nota: Se você estiver usando uma aplicação de página única (SPA), Intercom verifica Tooltips apenas quando o Messenger carrega pela primeira vez. Isso pode causar exibição inconsistente das Tooltips após mudanças de rota (quando a URL muda sem recarregar a página inteira).
Nossa equipe de Support pode ativar uma configuração de workspace que reavalia as Tooltips a cada mudança de URL, ajudando a garantir que elas sejam exibidas corretamente em SPAs. Entre em contato conosco se quiser que isso seja ativado para seu workspace.