Módulo opcional — fale com a OctaSend para ativar. Sem o módulo, o item Tours não aparece no menu, e quem abre o endereço direto vê o aviso Módulo não liberado. Se o módulo for desativado depois, os tours já publicados deixam de aparecer no site.
Antes de começar
- Tag instalada. Os tours aparecem no site pela tag do OctaSend. Veja OctaTag ou a aba Configuração da própria tela de Tours.
- Quem pode usar. Qualquer usuário com acesso ao painel da conta pode criar, editar e publicar tours.
- Onde fica. Menu lateral Tours. A tela tem duas abas: Tours (a lista e o botão de publicar) e Configuração (instalação, identificação de usuários e aparência).
Formatos
Cada tour tem um formato, escolhido ao criar e que pode ser trocado depois na aba Configuração do editor. A tela de criação mostra uma prévia de como cada formato aparece.Criar um tour
1
Abrir o formulário
Em Tours, clique em Novo tour.
2
Preencher os dados
- Nome — só aparece no painel, para você reconhecer o tour na lista.
- Páginas onde abre — o caminho da página, sem o domínio. Vem preenchido com
*(o site inteiro). As regras estão em Páginas onde abre, mais abaixo. - Formato — um dos quatro formatos acima.
3
Criar
Clique em Criar tour. O botão só libera com o nome preenchido e as páginas válidas. O tour nasce como Rascunho e o editor abre em seguida.
4
Montar os passos e publicar
No editor, adicione os passos, escolha os elementos e publique. As seções abaixo explicam cada parte.
Editor do tour
O topo do editor tem o bloco Dados do tour e, abaixo, três abas: Passos, Configuração e Métricas. O botão Salvar grava tudo o que está na tela.Dados do tour
Páginas onde abre
O tour compara o padrão só com o caminho da página (o que vem depois do domínio). Parâmetros depois de? e âncoras depois de # são ignorados, assim como a barra no final.
O
* no meio do padrão substitui qualquer trecho dentro de um mesmo segmento, mas não atravessa uma /. Um padrão que termina em /* vale para o próprio caminho e para qualquer página abaixo dele.
Aba Configuração
O que cada repetição significa no site:
Em Boas-vindas, com o usuário identificado, a repetição escolhida não vale: a janela volta a abrir (na primeira etapa pendente) na próxima página que casar até todas as etapas serem marcadas como concluídas — ou até a pessoa recusar, se o tour for obrigatório. Isso vale mesmo com Uma vez por visitante. Fechar no X ou com Esc não encerra. Depois de concluída, a janela não abre mais para essa pessoa. Sem identificação, vale a regra da repetição escolhida.
- Obrigatório sempre abre sozinho — ao escolher essa repetição, Quando abre fica fixo em Sozinho, ao abrir a página.
- Dicas não têm conclusão, então não podem ser obrigatórias — a opção some da lista, e trocar para Dicas um tour que estava como Obrigatório muda a repetição para Uma vez por visitante.
Aba Passos
À esquerda fica a lista de passos, com os botões para mover para cima, mover para baixo e remover, e o botão Adicionar passo. Ao lado, o conteúdo e a configuração do passo selecionado. Um passo com pendência que impediria a publicação ganha um ícone de alerta na lista, mesmo que não esteja aberto. Nas etapas de Boas-vindas, adicionar, remover ou reordenar seções também grava na hora, mas o texto ainda não salvo das outras seções da etapa é mantido. Remover uma seção pede confirmação.Conteúdo do passo
- Título — texto simples.
- Corpo — obrigatório em todos os formatos. Aceita HTML simples: parágrafo, quebra de linha, negrito, itálico, sublinhado, listas, código e links. Scripts, estilos, iframes e links com endereço perigoso são removidos ao publicar. Links podem apontar para
http,https,mailto:,tel:, um caminho do próprio site (começando com/) ou uma âncora (#).
Como encontrar o elemento
Nos formatos Passo a passo, Destaque único e Dicas, cada passo aponta para um elemento da página. Em vez de um seletor só, o passo guarda uma lista de jeitos de encontrar o elemento. No site, o tour tenta um jeito por vez, de cima para baixo, e usa o primeiro que encontrar exatamente um elemento visível. Nenhum ou mais de um elemento faz o tour passar para o próximo jeito da lista.
Os valores não aceitam os caracteres
<, crase nem quebras de linha.
Escolher o elemento na tela
Em vez de preencher os jeitos à mão, você pode clicar no elemento na própria página do seu site.1
Gerar o link
No passo, clique em Escolher na tela e informe o Endereço do seu site (por exemplo
minhaloja.com.br/checkout). O painel monta o link; use Copiar link.2
Clicar no elemento
Abra o link no navegador. Uma faixa aparece no topo da página e o elemento sob o cursor fica contornado. Clique no elemento que o passo deve destacar. Para desistir sem enviar nada, aperte Esc — o link continua valendo.
3
Revisar e aceitar
Volte ao painel. Os jeitos de encontrar aparecem na ordem em que o tour vai tentar, e nada é preenchido antes de você aceitar. Clique em Usar estes jeitos (ou Descartar) e depois em Salvar.
- A tag do OctaSend precisa estar instalada na página que você abrir. Sem ela, o link abre o site normalmente e nada volta para o painel. Funciona mesmo antes da primeira publicação.
- O link vale 15 minutos e serve para um clique só. Depois disso, use Gerar novo link.
- Só uma captura por vez: enquanto uma estiver aberta, o botão Escolher na tela fica desativado. Use Cancelar captura para desistir.
- Se só chegar o Caminho CSS, a tela avisa que ele é frágil. Vale pedir um
data-testidnesse elemento a quem cuida do site, ou aceitar e acrescentar outro jeito à mão. - Se não chegar nenhum jeito, o elemento clicado não tem nada estável para apontar (sem identificador, sem texto e sem papel acessível). Tente um elemento vizinho.
Como o passo avança
No último passo, o clique ou a digitação concluem o tour. Clique e digitação exigem o elemento alvo preenchido.
Posição e espera
- Lado do balão — Automático, Acima, À direita, Abaixo ou À esquerda.
- Alinhamento — Automático, Início, Centro ou Fim.
- Esperar o elemento (ms) — de 0 a 120.000 milissegundos.
- Pular o passo se o elemento não existir — liga ou desliga a opção para este passo.
Seções (formato Boas-vindas)
No formato Boas-vindas, cada passo é uma etapa da janela. O título do passo vira o nome da etapa na lista lateral. No conteúdo, a janela mostra o corpo do passo e, abaixo dele, as seções da etapa. Cada etapa precisa de pelo menos uma seção. Cada seção tem:- Título e Corpo (obrigatório, com as mesmas regras de HTML do corpo do passo).
- Vídeo (URL) — opcional, precisa começar com
http://ouhttps://. Aparece como um link para assistir ao vídeo, que abre em nova aba. - Texto do botão e Link do botão — opcionais, mas um exige o outro. O link aceita
http,https,mailto:,tel:, um caminho começando com/ou uma âncora#, e abre em nova aba.
Avisos antes de publicar
O editor mostra em destaque o que impediria a publicação: páginas em branco ou fora dos limites, Destaque único com mais ou menos de um passo, tour sem passos, passo sem corpo, passo sem jeito de encontrar o elemento, avanço por clique ou digitação sem elemento alvo, etapa de boas-vindas sem seção, seção sem corpo e botão de seção sem texto ou sem link. Os avisos do passo aberto aparecem junto dele, e os outros passos com pendência são indicados na lista de passos. As seções das etapas de Boas-vindas só são conferidas no passo aberto.Publicar
Publicar leva ao site todos os tours da conta que estão com Situação Publicado, de uma vez. Cada publicação gera uma nova versão numerada, e o site passa a receber sempre a mais recente. Há dois jeitos de publicar:- Botão Publicar, na aba Tours da lista.
- Salvar e publicar, no editor: quando a Situação está em Publicado, o botão Salvar muda para Salvar e publicar e publica logo depois de gravar — junto com os outros tours publicados da conta.
Se a sua conta também usa Avaliações, as pesquisas publicadas vão para o site na mesma publicação — e um problema numa pesquisa também impede a publicação dos tours.
Acompanhar o que está no ar
- O topo da tela de Tours mostra No ar: versão N, publicada em (data), ou Nada no ar ainda quando a conta nunca publicou.
- A coluna No ar da lista mostra Alterações não publicadas quando o tour ou os passos dele mudaram depois da última publicação, e Em dia quando não.
- A lista também mostra Formato, Quando abre (Automático ou Manual), Repetição, Páginas e Situação de cada tour.
Tirar um tour do ar
Mude a Situação para Rascunho ou Arquivado, clique em Salvar e depois em Publicar na lista. Só salvar não tira o tour do site: ele continua na versão publicada até a próxima publicação. O painel não tem botão de excluir tour — use Arquivado para os que não vai mais usar. Para desfazer uma publicação, corrija o tour e publique de novo; isso gera uma nova versão.O que é conferido na publicação
O que é conferido na publicação
- Páginas onde abre preenchidas, com até 5 asteriscos, até 200 caracteres e sem domínio.
- Nome da rota, se usado, com até 200 caracteres.
- Tour obrigatório com abertura automática; Dicas nunca obrigatórias.
- Pelo menos um passo; Destaque único com exatamente um.
- Todo passo com corpo (até 50.000 caracteres) e título de até 500 caracteres.
- Fora do formato Boas-vindas: pelo menos um jeito de encontrar o elemento, cada um com os campos que o tipo exige e sem caracteres proibidos; avanço por clique ou digitação com elemento alvo.
- Esperar o elemento entre 0 e 120.000 ms.
- Boas-vindas: toda etapa com pelo menos uma seção; toda seção com corpo; botão com texto (até 200 caracteres) e link permitido; vídeo com
httpouhttps. - Aparência padrão com cores e números válidos (veja abaixo) e textos de até 200 caracteres.
- Tamanho total do que é publicado (todos os tours e pesquisas da conta) de até 300 KB.
Mensagens de erro ao publicar
Mensagens de erro ao publicar
- Corrija antes de publicar (na lista) ou Salvo, mas não foi publicado (no editor) — painel com tudo o que falta corrigir, uma linha por problema, com o nome do tour e os mesmos nomes de campo da tela (por exemplo, Tour “Checkout”: Páginas onde abre passa de 200 caracteres.).
- Outra publicação aconteceu ao mesmo tempo. Publique de novo. — duas pessoas publicaram juntas; basta publicar outra vez.
- Esta conta não tem acesso ao Product Tours. — o módulo não está ativo na conta.
- Não foi possível publicar. Tente novamente. — falha temporária.
Aparência
Em Tours → Configuração → Aparência padrão você define o visual dos balões de todos os tours da conta. Campo em branco usa o padrão. A prévia ao lado mostra o balão com as escolhas atuais, sobre um site claro ou escuro, antes de salvar.
As cores aceitam
#rgb, #rrggbb, #rrggbbaa, rgb() ou rgba() — você também pode escolher pelo seletor de cor ao lado do campo. No contador, {{current}} vira o número do passo atual e {{total}} o total de passos (por exemplo, Passo {{current}} de {{total}}).
As cores, os números e os textos valem para os formatos Passo a passo e Destaque único. Dicas e Boas-vindas têm visual próprio e não usam essas configurações.
Identificar quem está navegando
Por padrão, o tour reconhece o visitante só pelo navegador. Tours obrigatórios e de boas-vindas só retomam de onde a pessoa parou — e as boas-vindas só marcam as etapas já concluídas — se souberem quem ela é. Em Tours → Configuração → Identificar quem está navegando há um trecho de código pronto. Cole-o em todas as páginas, perto do fim, antes do fechamento do</body>. Ele pode ficar depois da tag. O trecho descobre sozinho o ID de quem fez login no seu site, procurando nestas fontes:
- Nuvemshop, Shopify, Segment e Intercom;
- Google Tag Manager, pelo
dataLayercomuserIdouuser_id; - os globais
window.userewindow.currentUser.
window.meuApp.usuario.id) — só nomes separados por ponto. Esse caminho é lido antes das outras fontes e vai dentro do trecho copiado; ele não fica salvo no painel.
Quem integra por código pode identificar diretamente. As três primeiras linhas guardam a chamada até a tag carregar, então o trecho funciona antes ou depois dela:
Instalar no site
Em Tours → Configuração → Instalar no seu site fica a tag do OctaSend, com o botão para copiar (ou Gerar tag, se a conta ainda não tem uma), e a lista de Domínios autorizados, que vale para todos os widgets da conta. Com a lista preenchida, os tours só aparecem nos domínios dela; vazia, aparecem em qualquer site. A mesma tag carrega tours, avaliações e os outros módulos ativos. Os detalhes estão em OctaTag.Abrir pelo seu site
Depois que a tag carrega, o objetowindow.octasendTours fica disponível na página com duas funções:
O ID do tour aparece no editor, na aba Configuração, no bloco Abrir pelo código do site, junto com a linha
window.octasendTours.start(...) pronta para copiar. A linha só encontra o tour depois de publicado.
startabre o tour mesmo fora das Páginas onde abre e sem olhar a Repetição. Não abre se já houver outro tour de Passo a passo, Destaque único ou Boas-vindas na tela, nem se o tour não estiver na versão publicada.setRoutecompara o nome exatamente, letra por letra. Tours sem Nome da rota continuam valendo pelo caminho da página.- Mudanças de página em aplicações de página única (SPA) são percebidas sozinhas, pelo endereço —
setRoutesó é necessário quando a tela muda sem o endereço mudar.
Como o tour se comporta no site
- Um de cada vez. Só um tour de Passo a passo, Destaque único ou Boas-vindas fica aberto por vez. Dicas convivem com eles e entre si.
- Elemento que ainda não carregou. Se o elemento de um passo não existe quando a página abre, o tour continua tentando por 15 segundos depois de cada carregamento ou troca de página. Passos cujo elemento não é encontrado ficam de fora e o tour abre com os demais; se nenhum elemento for encontrado, o tour não abre.
- Troca de página fecha. Se o visitante for para uma página que não casa com o tour aberto, ele fecha sozinho, sem contar como concluído.
- Fechar e recusar. O balão pode ser fechado pelo X, pela tecla Esc ou clicando fora dele. Nos tours obrigatórios aparece também um link para recusar o tour, que encerra de vez.
- Dicas. Cada ponto abre um balão com título, corpo e um botão; clicar no botão tira aquele ponto da tela. Quando o visitante clica no botão de todos os pontos, o conjunto conta como concluído.
- Boas-vindas. A janela lista as etapas à esquerda. No rodapé, um botão marca a etapa atual como concluída (ela ganha um ✓), e a janela fecha quando todas estão concluídas. O X e a tecla Esc fecham a janela. Com o usuário identificado, a janela abre na primeira etapa pendente e mostra as já concluídas.
Métricas
A aba Métricas do editor mostra os últimos 30 dias do tour publicado:- Acessos por dia — quantas vezes o tour foi aberto em cada dia, com o total do período.
- Funil por passo — quantas vezes cada passo foi alcançado. O número do passo segue a ordem da versão publicada, que pode ser diferente do rascunho aberto no editor.
Limites
Solução de problemas
Publiquei, mas o tour não aparece no site
Publiquei, mas o tour não aparece no site
- Confira se o tour está com Situação Publicado e se a coluna No ar mostra Em dia. Se mostra Alterações não publicadas, clique em Publicar.
- Recarregue a página do site; a nova versão pode levar alguns instantes.
- Confira Páginas onde abre: o padrão casa só com o caminho, sem domínio. Se o tour tem Nome da rota, ele só abre quando o site chamar
setRoutecom esse nome. - Com Uma vez por visitante, quem já viu ou fechou o tour não o vê de novo naquele navegador. Teste numa janela anônima.
- Com Só quando o site chamar, o tour só abre por
window.octasendTours.start. - Confira se a tag está na página e se o script antigo de tours foi removido.
- Confira se o domínio do site está em Domínios autorizados (ou se a lista está vazia). Fora da lista, os tours não carregam.
O tour abre, mas pula passos
O tour abre, mas pula passos
O elemento daquele passo não foi encontrado — nenhum jeito da lista achou exatamente um elemento visível. Refaça a captura com Escolher na tela, prefira
data-testid ou ID, e evite depender só do caminho CSS.O link de Escolher na tela não trouxe nada
O link de Escolher na tela não trouxe nada
Ou o link expirou (15 minutos), ou a escolha foi cancelada com Esc, ou a tag do OctaSend não está instalada naquela página. Use Gerar novo link e abra numa página que já tenha a tag.
Os botões do balão aparecem em inglês
Os botões do balão aparecem em inglês
Preencha os textos dos botões e do contador em Tours → Configuração → Aparência padrão, salve e publique de novo.
O tour obrigatório some depois de fechado
O tour obrigatório some depois de fechado
Sem o usuário identificado, o tour obrigatório funciona como Uma vez por visitante: depois de fechado, não volta naquele navegador. Para ele reaparecer e retomar do passo em que a pessoa parou, instale o trecho de Identificar quem está navegando em todas as páginas.