Tour interativo

O tour interativo é um guiamento passo-a-passo na própria UI do Syncro — bolhas com explicação destacam botões/seções enquanto você clica. Disparado automaticamente no primeiro acesso, pode ser reativado a qualquer momento. Esse artigo cobre como funciona e como personalizar.

Pré-requisitos

• Conta criada. Veja Criar conta.

• Browser moderno com JavaScript habilitado.

Como funciona

Cada passo é uma bolha que:

1. Foca num elemento da UI (botão, card, etc).

2. Escurece o resto da tela.

3. Mostra título + descrição explicando o elemento.

4. Botões: Próximo, Anterior, Pular, Concluir.

Quando dispara

Primeiro login

Tour global dispara automaticamente:

• Você acabou de registrar e logar pela primeira vez.

• Dashboard abre.

• ~1s depois, primeira bolha aparece focando "Veja, este é o seu painel principal...".

Tours por seção

Quando você acessa cada seção pela primeira vez:

• Vai pra /crm → tour do Kanban dispara.

• Vai pra /contatos → tour da lista de contatos.

• Vai pra /chats → tour do inbox.

• Etc.

Tours disponíveis

Total: 15+ tours cobrindo principais funcionalidades.

Controles do tour

Cada bolha tem botões:

• Próximo → avança pro próximo passo.

• Anterior → volta um passo.

• Pular → fecha o tour atual (não dispara mais).

• Concluir (último passo) → fecha + marca como completo.

Atalhos de teclado

• → ou Enter → próximo.

• ← → anterior.

• Esc → fecha (pula).

📸 PRINT necessário: bolha do tour com título + descrição + botões + atalhos

Reativar tours

Se você pulou ou quer revisar, pode resetar:

Opção 1 — Reset global

1. Vá em /configuracoes/perfil.

2. Seção Tour interativo.

3. Botão Refazer tour.

4. Confirma.

5. Sistema:

• Limpa users.dashboard_config['tours_completed'].

• Próxima vez que você acessar dashboard, tour global dispara de novo.

Tradução

Tours são bilíngues:

• Português (default).

• Inglês.

Pra mudar idioma:

1. /configuracoes/perfil → Idioma.

2. Salve.

3. Próximo tour aparece no idioma escolhido.

Tour vs Sophia

Diferença:

Use ambos:

• Tour pra conhecer o que existe.

• Sophia pra fazer algo específico.

Veja Como pedir ajuda.

Boas práticas

1. Faça o tour global completo

Mesmo que pareça óbvio, o tour cobre features que você pode não notar (ex: Cmd+K, customização de dashboard, atalhos).

2. Não pule os tours específicos

Quando entrar em uma nova seção, deixe o tour rodar. Aprende mais rápido do que adivinhar.

3. Refaça quando voltar de férias

Após 1-2 meses sem usar, refaça o tour global. Lembra recursos esquecidos.

4. Convide equipe a fazer

Quando convidar novo user, peça pra ele fazer o tour. Reduz curva de aprendizado.

Acessibilidade

Tour suporta:

• ✅ Teclado completo (setas, Enter, Esc, Tab).

• ✅ Screen readers (ARIA labels).

• ⚠️ Animações podem ser desabilitadas via OS preference (prefers-reduced-motion).

Erros comuns

"Tour não dispara mesmo na 1ª visita"

• Browser bloqueando JavaScript? Habilite.

• Extensão de privacidade interferindo? Desative.

• Refresh hard (Ctrl+F5).

"Bolha desalinhada com elemento"

• UI mudou após deploy. Reporte como bug.

• Browser zoom não-100%? Volte pra 100%.

"Refaço tour mas não dispara"

• Tour específico requer acessar a seção. Refazer tour reseta — depois acesse /crm pra disparar tour Kanban.

"Bolha cobre o conteúdo"

Use Driver.js que escurece resto mas mantém elemento highlighted clicável. Se cobre demais, scroll na página.

Próximos passos

• Pra dúvidas específicas, veja Como pedir ajuda.

• Pra setup completo, veja Configuração inicial recomendada.

Artigos relacionados

• Bem-vindo ao Syncro

• Conhecendo o painel

• Como pedir ajuda

• Configuração inicial recomendada