Tooltips oferecem uma experiência contextual e não intrusiva para educar e engajar os customers no seu produto, ajudando a acelerar a adoção. São ideais para chamar atenção a novos recursos e mostrar seu outro conteúdo aos customers 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 nenhum código. Veja como começar:
Projete suas Tooltips
Primeiro, vá para Outbound no menu principal e clique em + New message 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 customers no seu app móvel, Mobile Carousels.
Você pode adicionar múltiplas Tooltips de uma vez adicionando-as ao mesmo grupo.
Estas 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 “Add 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 “Open website”.
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 “Add 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 só encontram conteúdo ativo (publicado) que você criou no Intercom e ignoram quaisquer regras de segmentação 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 esta opção se quiser que um ícone apareça ao lado de um elemento na página.
Sem ícone - Selecione esta opção se quiser que o conteúdo apareça de forma fluida quando um customer passar o mouse sobre um elemento.
Etiqueta - Selecione esta opção 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 a um novo recurso.
Tamanho - Escolha Pequeno, Médio ou Grande para a âncora da Tooltip. Isso se aplica aos três estilos de âncora — ícone, farol animado e etiqueta. Pequeno é o padrão e corresponde ao tamanho atual da âncora da Tooltip. Escolher Médio ou Grande torna a âncora mais fácil para os customers verem e clicarem.
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 fará com 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 “Group settings”.
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 ao 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 “Placement” 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 “Specific pages” e clique em “+ Add new rule”:
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 que você escolher tenha o elemento onde você está colocando a tooltip.
Você também pode usar 'contains' para ser mais flexível, como direcionar grupos de páginas ou páginas que contenham parâmetros únicos (como user ID). Por exemplo, você pode escolher direcionar URLs de páginas que contenham 'project' para atingir clientes quando estiverem trabalhando em projetos.
Adicione quantas regras de URL de página forem necessárias para direcionar as páginas corretas.
É 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 é colocada usando o Seletor CSS, ou se você tiver um texto muito específico na sua página onde está tentando colocar a Tooltip, tente buscar “By Text” para encontrar o elemento exato que contém esse texto.
Se a correspondência de elemento for “By Text”, ele encontrará o primeiro elemento na página que contenha esse termo de texto.
Se estiver com dificuldade para selecionar o elemento correto na sua página, tente escolher manualmente o Seletor CSS.
Quando terminar de finalizar a colocação das suas Tooltips, vá em frente e clique em “Done”.
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 criar 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 “Group settings”:
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 usuário, 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 janela anônima
Cores de fundo:
Você também pode definir uma cor de fundo e de 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 “Save and close”.
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á aparecendo - no site todo 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 maneiras antes de ativá-las para os clientes:
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 todo tipo de user. Também garantirá que sua Tooltip tenha sido adicionada às páginas que todo user pode acessar.
3. Teste se sua Tooltip funciona com e sem conteúdo do produto
Se seu produto pode ser preenchido com conteúdo gerado por user, você deve garantir que suas Tooltips funcionem com e sem conteúdo. Você deve testar estados vazios, bem 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 contains examply”:
Então ative as Tooltips e visite a página onde as adicionou para vê-las em ação:
Resolução de problemas
Se você ativou suas Tooltips e elas não estão aparecendo, certifique-se de ter verificado o seguinte:
A página correta está selecionada em Configurações de colocação.
A URL da página não mudou.
Elementos dinâmicos não estão mudando 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 “By Text” e selecionou “Sitewide” em Configurações de colocação, provavelmente corresponderá a páginas com esse texto em qualquer lugar. Tente usar um Seletor CSS para corresponder este Tooltip em vez disso.
Nota: Se você estiver usando uma aplicação de página única (SPA), Intercom só verifica as Tooltips 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).
Para corrigir isso, chame Intercom('update') em mudanças significativas de rota na sua aplicação. Isso faz com que o Intercom reavalie as Tooltips para a página atual.
Nossa equipe de Suporte pode ativar uma configuração no workspace que reavalia os Tooltips a cada mudança de URL, garantindo que sejam exibidos corretamente em SPAs. Entre em contato conosco se desejar ativar isso para seu workspace.