Abra Tours do produto no menu.

Um tour do produto mostra um balão ao lado de um botão, campo ou menu real do seu site, um passo de cada vez. É ideal para receber novos usuários, apresentar uma novidade ou guiar uma configuração. Funciona em qualquer site ou aplicação web com o Messenger instalado, inclusive produtos SaaS para usuários logados.

Criar um tour

Clique em Novo tour e dê um nome.
Adicione os passos (até 10). Para cada passo:
- Elemento — clique no cursor dentro do campo. Seu site abre numa nova janela; clique no elemento desejado e o seletor é preenchido para você. Você também pode digitar um seletor CSS. Deixe vazio para um passo no meio da tela.
- Página (opcional) — a página do passo, por exemplo /configuracoes. Deixe vazio para ficar na página atual.
- Posição do balão — automática, ou abaixo, acima, à direita ou à esquerda do elemento.
- Título e texto — curtos e claros. Cada passo pode ser traduzido; uma tradução vazia mostra o texto no idioma do seu espaço.
Escolha sua cor e como o tour começa.

Na janela de seleção, use Navegar pelas páginas para ir antes a outra página e depois Escolher.

Tours entre páginas

Dê uma Página a um passo e o tour leva o visitante até lá quando ele chega a esse passo, continuando na nova página. O visitante pode avançar e voltar; o tour lembra onde estava por 30 minutos naquela aba. As páginas precisam estar no mesmo site do Messenger.

Como um tour começa

Sozinho nas páginas correspondentes — escolha as páginas e um atraso em Quem e quando. Cada pessoa vê uma vez: não recomeça depois de concluído ou fechado, e no máximo uma vez por dia se não foi concluído.
Só a partir da sua página — inicie com JavaScript, por exemplo num link “Me mostre o site”:

Shopxare('startTour', 'ID_DO_TOUR')

O editor mostra a linha exata para copiar. Iniciado assim, um tour sempre pode ser repetido.

Teste antes de publicar

Em No seu site, informe o endereço da página e clique em Pré-visualizar no seu site. O tour toca só para você, mesmo como rascunho, e não é contado. O link de pré-visualização vale uma hora.

Dicas para seletores estáveis

Seletores baseados em IDs ou em atributos próprios continuam funcionando quando o design muda. Adicione um atributo data-tour aos elementos que quer apontar:

<button data-tour="novo-projeto">Novo projeto</button>

e use [data-tour="novo-projeto"] como elemento. Se um elemento não for encontrado em 3 segundos, o passo abre no meio da tela.

Resultados

Cada tour mostra quantas pessoas o viram, concluíram e fecharam — cada pessoa contada uma vez. Você também pode escolher um público ou segmento e datas de início e fim.