Skip to main content
Os tours mostram ao visitante do seu site, ou ao usuário do seu sistema, como usar uma tela: um balão que aponta para um botão, uma sequência de passos com Anterior e Próximo, pontos de dica espalhados pela página ou uma janela de boas-vindas com etapas. Você monta tudo no painel, escolhendo os elementos clicando na própria página, e publica com um clique. Não é preciso mexer no código do site além de instalar a tag uma vez.
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.
Use no máximo 5 asteriscos e 200 caracteres. Um padrão com domínio (por exemplo minhaloja.com.br/checkout) é recusado na publicação, porque nunca casaria com página nenhuma. Use só o caminho (/checkout). Colar o endereço completo com https:// no editor já remove o domínio ao sair do campo; sem o https://, apague o domínio à mão.

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.
Duas combinações são travadas pela própria tela:
  • 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.
Adicionar, remover e reordenar passos grava na hora, sem precisar de Salvar. Trocar de passo (inclusive ao adicionar um, que já abre o novo, ou ao remover o passo que estava aberto) carrega os dados salvos do passo escolhido, e o que ainda não foi salvo no passo que estava aberto se perde — salve antes. Remover um passo não pede confirmação.
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.
Regras da captura:
  • 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-testid nesse 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:// ou https://. 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.
Depois de publicar, recarregue a página do seu site para ver. Pode levar alguns instantes.
A publicação é tudo ou nada. Se qualquer tour publicado tiver um problema, nada vai para o site e a tela mostra a lista completa do que corrigir, com o nome de cada tour — pode ser outro tour, não o que está aberto. No editor, o que você salvou continua salvo; só a publicação não aconteceu (Salvo, mas não foi publicado).
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.
  • 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 http ou https.
  • 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.
  • 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}}).
Os textos padrão dos botões e do contador são em inglês. Preencha os quatro campos de texto para o seu site mostrar tudo em português.
Salvar a aparência não muda o site na hora: as cores e textos entram na próxima publicação. Depois de salvar, clique em Publicar na aba Tours.
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 dataLayer com userId ou user_id;
  • os globais window.user e window.currentUser.
Se o login do seu site não é de nenhuma delas, informe em Onde está o ID no seu site (opcional) o caminho do valor (por exemplo 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:
Nos tours, o ID do usuário não é gravado em texto pela OctaSend: ele é transformado num código antes de ser guardado.

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.
Se o seu site ainda tem algum script antigo do OctaSend para tours (colado antes da tag única), remova-o depois de colar a tag nova. Enquanto ele estiver na página, é ele quem mostra os tours, e a tag nova não abre nenhum.

Abrir pelo seu site

Depois que a tag carrega, o objeto window.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.
Regras:
  • start abre 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.
  • setRoute compara 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 — setRoute só é 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.
Os números contam aberturas, não pessoas: quem vê o mesmo tour duas vezes conta duas. Os dias seguem o fuso UTC. Sem nenhum acesso no período, a aba mostra Ainda não há acessos neste tour.

Limites

Solução de problemas

  • 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 setRoute com 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 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.
Preencha os textos dos botões e do contador em Tours → Configuração → Aparência padrão, salve e publique de novo.
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.