Product Tours permite criar uma melhor experiência inicial do produto para seus customers, acelerando a adoção. Você pode criar uma série de mensagens in-app para guiar customers pelo seu produto, para que descubram seu valor mais rápido.
Projetar um tour é rápido e fácil, e não requer código. Veja como começar:
Projete um Tour do Produto
Primeiro, vá para Outbound no menu principal e clique em + Nova mensagem no canto superior direito.
Então, escolha Tour do produto 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: Product Tours são especificamente projetados para funcionar com apps web desktop. Para uma experiência multi-etapas envolvente no seu app móvel, experimente Mobile Carousels.
Para este exemplo, começaremos do zero. Dê ao seu tour um título curto e impactante e uma descrição. Por exemplo, se estiver projetando um tour para onboard new users, você pode chamá-lo de ‘Comece agora’:
Alterar URL do Tour do Produto
Para alterar a URL de um tour do produto:
Vá para Editar Tour
Clique em Criar Seu Tour
Role para baixo e clique em Configurações
Clique no lápis ao lado de Construir o tour em
Digite a URL onde você quer que o tour esteja localizado e clique em Alterar Website
Nota: Certifique-se de clicar em Salvar e Fechar antes de sair da página principal do tour após fazer alterações!
Importante: Customers verão o título e a descrição do seu tour quando você compartilhar um tour em conversas, bots ou mensagens.
Você pode enviar seu tour de qualquer teammate, ou ocultar completamente o remetente:
Dica profissional: Se você usar account-based marketing, também pode enviar seu tour para contas-chave a partir do proprietário delas.
Você também pode definir uma cor personalizada para os botões do seu tour:
Nota: Se você desativar cores personalizadas, o tour combinará com as configurações de cor do Messenger.
Os hiperlinks inseridos nos passos do tour serão pretos por padrão, a menos que clicados. Uma vez clicados, ficarão na cor de ação do seu Messenger (ou cor personalizada, se definida).
Escolha um site para construir seu tour
Para começar a projetar seu tour, clique em ‘Adicionar passos’:
Uma nova janela será aberta. Aqui, adicione o website onde você gostaria de construir seu tour:
Depois de adicionar uma URL, clique em ‘Abrir website’ para começar a construir seu tour.
Nota: Esta URL é apenas para construir seu tour - não é a URL alvo onde você mostrará seu tour para customers. Você pode escolher regras de segmentação de página e público em uma etapa posterior.
Importante: Existe uma limitação conhecida com Material UI e "Focus Trapping" quando se trata de Product Tours e Tooltips.
Escolha a página específica para construir as mensagens do seu tour
Na parte inferior do seu site, você verá uma faixa azul - este é o construtor de tour.
Navegue até a página específica do seu produto onde deseja começar a construir seu tour. Então, clique em ‘Começar o tour aqui’:
Agora, comece a criar suas mensagens.
Crie as mensagens do seu tour
Existem três tipos de mensagens para escolher - um post, um pointer ou um video pointer.
Veja como cada um deles funciona
Apresente um novo recurso com um post
Posts são perfeitos para capturar a atenção dos seus customers no início de um tour.
Um post aparece no meio da página - não aponta para um elemento específico. Você pode ajudar a apresentar seu produto inserindo uma imagem ou incorporando um vídeo. Também pode personalizar sua mensagem com atributos, como cumprimentar customers usando o primeiro nome deles.
Nota: Se você usar atributos de dados da empresa para personalizar seus Tours, precisa garantir que company_id esteja incluído ao iniciar o Messenger no seu website onde o Tour começa.
Se você não incluir company_id, quaisquer atributos de dados da empresa presentes no seu Tour usarão valores padrão que você especificou.
Mostre o caminho para customers com pointers
Pointers são perfeitos para mostrar aos customers como usar seu produto. Você pode guiá-los apontando para um elemento específico do website, como um botão. Basta clicar no elemento que deseja apontar e adicionar conteúdo ao seu pointer:
Se o elemento que você deseja escolher estiver atrás da barra do construtor de tour, basta clicar em ‘Ocultar’ à esquerda para esconder o construtor de tour.
Além de texto, você pode inserir uma imagem, adicionar emojis, incorporar vídeo e adicionar atributos para tornar seus pointers mais envolventes. Quando seu pointer aparecer, ele automaticamente escurecerá o fundo para destacar a mensagem.
Dica: Se você criar pointers em diferentes partes da sua página, a página rolará automaticamente para cada mensagem.
Por padrão, customers clicam em ‘Próximo’ no seu tour para avançar cada mensagem. Se quiser que eles digitem em um campo ou cliquem no elemento do website para prosseguir para a próxima etapa, selecione como o tour deve avançar:
Nota: Para a opção “Preencher o campo” - se você selecionou um elemento que contém vários campos de texto, como ‘título’ e ‘descrição’, por exemplo, seus customers precisarão preencher todos para prosseguir.
“Preencher o campo” funciona com os seguintes elementos HTML:
Elementos <input>
Elementos <textarea>
Elementos <select>
Elementos <div> com contenteditable="true"
Leia este artigo para saber mais sobre como criar Product tours em várias páginas.
Alternativamente, você pode definir texto personalizado para os botões para um tour mais envolvente.
Guie pessoalmente customers com video pointers
Video pointers permitem que você envolva e guie pessoalmente customers, usando vídeos curtos legendados seus ou de um teammate para mostrar o caminho.
Você pode aprender mais sobre como criar video pointers aqui.
Escolha o tamanho e a posição certos para seus pointers
Pointers e video pointers vêm em dois tamanhos. (O video pointer acima ☝️ é grande.) O tamanho padrão do pointer é pequeno. Para alternar entre tamanhos, clique em “Avançado” e selecione o tamanho certo no menu suspenso:
Aqui você também pode definir uma posição ideal para o pointer. Escolha entre auto esquerda, direita, acima ou abaixo:
Nota: Se o tamanho da janela do seu customer não permitir a posição ideal escolhida, o pointer voltará para “Auto” e mudará para uma posição mais adequada.
Crie uma sequência de mensagens
Para oferecer aos seus customers um tour completo, você deve criar uma sequência de mensagens. Você pode usar qualquer combinação de posts, pointers e video pointers para construir o melhor tour para seus customers.
Se precisar reordenar seus passos, basta passar o mouse sobre o passo que deseja mover e arrastá-lo com este ícone:
Depois de terminar de criar seu tour, você pode visualizá-lo facilmente:
Aqui, você verá como seu tour aparecerá para customers:
Comemore a conclusão do tour 🎉
Para finalizar seu tour com estilo, você pode enviar uma chuva de confetes na etapa final.
Basta clicar em ‘Configurações’ e ativar este botão:
É isso que seus customers verão quando completarem seu tour:
Permita que customers adiem ou reiniciem seu tour
Nesta aba de configurações, você pode escolher se os customers poderão adiar seu tour:
Adiar o tour atrasará ele por 24 horas, então o customer o receberá novamente, desde que esteja na página correta onde ele é acionado. Um tour pode ser adiado várias vezes e permite que customers façam o tour no momento certo para eles. Perfeito para mensagens não urgentes. 👌
Nota: Este Tour “adiado” só seguirá certas regras (ex.: tempo na página e regras de URL) e não outras regras de segmentação, horário comercial ou qualquer tipo de agenda ou agenda recorrente. Ele respeitará o estado da mensagem, então a mensagem não será reenviada se não estiver ativa.
Depois que a mensagem for reenviada após o adiamento, marcaremos o registro de adiamento associado como concluído.
A opção “Reiniciar” adiciona um botão em cada etapa do seu tour (após a primeira) que levará seus customers de volta ao início para que possam fazer o tour novamente:
Nota:
Não recomendamos usar esta opção em tours onde seus users digitam para avançar para a próxima etapa, pois a entrada deles não será mantida ao reiniciar o tour.
Tours que são adiados ou reiniciados e depois visualizados novamente não serão registrados como uma visualização adicional nas estatísticas do tour.
Não é possível voltar apenas um passo em um tour.
Quando estiver satisfeito com os passos e configurações do seu tour, clique em ‘Salvar e fechar’:
Posso usar Product Tours no meu app móvel?
Product Tours são especificamente projetados para funcionar com apps web desktop. Para uma experiência multi-etapas envolvente no seu app móvel, experimente Mobile Carousels.
Posso usar Product Tours no meu app desktop?
Intercom não suporta integração com apps desktop (como os construídos usando o framework Electron). Portanto, Product tours estão disponíveis apenas em sites desktop quando visualizados em navegadores web.
Está com problemas para iniciar um tour ou enfrentando problemas com passos de pointer?
Siga este guia para garantir que seu tour sempre seja enviado corretamente.