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
Tour usa biblioteca Driver.js v1.3.1 (carregada via CDN). 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
| Tour | Página | Foco |
|---|---|---|
global |
Dashboard | Visão geral da plataforma |
kanban |
Pipeline | Drag-drop de leads |
contacts |
Contatos | Lista + filtros |
lead_profile |
Lead detail | Edição completa |
tasks |
Tarefas | To-dos |
calendar |
Agenda | Eventos |
chats |
Chats | Inbox unificado |
chatbot |
Chatbot | Builder visual |
ai_agents |
IA | Agentes |
automations |
Automações | Trigger-based |
reports |
Relatórios | KPIs |
campaigns |
UTM | Atribuição |
nps |
NPS | Pesquisas |
billing |
Cobrança | Plano |
users |
Usuários | Equipe |
integrations |
Integrações | Conexões |
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).
Persistência (tour_completed)
Tours completados são armazenados em users.dashboard_config:
{
"tours_completed": {
"global": true,
"kanban": true,
"contacts": false
}
}
Tour com true não dispara mais automaticamente. false ou ausente → ainda vai disparar quando acessar a seção.
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.
Opção 2 — Reset programático
Endpoint POST /tour/reset:
Útil pra automação ou suporte interno.
Marcar como completo manualmente
Endpoint POST /tour/complete:
POST /tour/complete
{
"tour": "global"
}
Útil pra suprimir tour específico sem fazer ele.
Tradução
Tours são bilíngues:
-Português (default). -Inglês.
Conteúdo em lang/pt_BR/tour.php e lang/en/tour.php. Sistema escolhe automaticamente baseado em users.locale.
Pra mudar idioma:
1./configuracoes/perfil → Idioma. 2.Salve. 3.Próximo tour aparece no idioma escolhido.
Personalizar (avançado)
Tours são estáticos — você não pode mudar conteúdo via UI. Pra customizar:
1.Edite resources/views/tenant/layouts/_tour.blade.php.
2.Adicione/modifique steps em array defs.
3.Adicione strings em lang/pt_BR/tour.php.
Útil pra:
-White-label (agência customizando pra cliente final). -Onboarding específico (tutorial pra fluxo customizado).
Tour vs Sophia
Diferença:
| Tour | Sophia |
|---|---|
| Estático (passos pré-definidos) | Dinâmico (responde sua pergunta) |
| Aparece sem você pedir | Você invoca |
| Cobre UI | Cobre conceito + executa ação |
| Bolhas no canvas | Drawer chat |
| Bom pra: conhecer interface | Bom pra: dúvida específica + automação |
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