Como configurar o branding
Pré-requisitos
- Ter sessão iniciada como Admin
- Ter acesso à secção Branding do painel de administração
- Ficheiros de imagem (logo, favicon) em formatos comuns (PNG, JPG, SVG)
O que é Branding?
Branding é o conjunto de elementos visuais e textuais que identificam o seu negócio:
- Logo (imagem que identifica a empresa)
- Cores (paleta de cores da marca)
- Textos (nome, slogan, descritivos)
- Favicon (ícone que aparece no separador do navegador)
Passos
1. Abra a página de Branding
No menu lateral do painel de administração, clique em Branding. Verá um formulário com todas as configurações.
2. Configure as Cores da Marca
Assinale a cor primária (a cor principal da sua marca) e a cor secundária (cor de acentos).
| Cor | Onde aparece | Exemplo |
|---|---|---|
| Primária | Botões, headers, links | Azul #0066CC |
| Secundária | Hover effects, bordas, destaques | Laranja #FF9900 |
| Neutral | Backgrounds, texto secundário | Cinzento #F5F5F5 |
Use o color picker (clique no campo de cor) para escolher visualmente:
- Clique no campo de cor
- Escolha a cor no picker
- Clique "Confirmar" ou copie o código HEX manualmente
💡 Dica: Use contraste suficiente entre cores — ajuda na acessibilidade e legibilidade
3. Carregue o Logo
O logo é a imagem que identifica o seu negócio. Aparece no topo de todas as páginas.
Requisitos:
- Formato: PNG, JPG ou SVG
- Tamanho: até 2MB
- Dimensões recomendadas: 300x100px (largura x altura)
- Fundo transparente (PNG) é preferido
Como carregar:
- Clique no campo "Logo"
- Escolha o ficheiro do seu computador
- Verifique a pré-visualização
- O sistema redimensiona automaticamente
4. Defina o Nome do Negócio
No campo "Nome do Negócio", preencha o nome oficial:
Exemplo: Barbearia O Brasileiro
Este nome aparece:
- Na landing page (título principal)
- Em emails de confirmação
- No header do dashboard
5. Adicione o Slogan (Opcional)
No campo "Slogan", adicione uma breve frase que descreve o seu negócio:
Exemplo: "Barbear é uma arte, o cliente é o rei"
Este texto aparece:
- Sob o nome na landing page
- Em meta-tags (SEO)
6. Configure o Favicon
O favicon é o ícone que aparece no separador do navegador (abinha).
Requisitos:
- Formato: PNG, ICO ou SVG
- Tamanho: quadrado (ex: 64x64px)
- Simples e reconhecível
Como carregar:
- Clique em "Favicon"
- Escolha o ícone do seu computador
- O sistema converte automaticamente para todos os formatos
7. Configure Descrição e Meta-tags (SEO)
Para aparecer melhor no Google:
| Campo | O quê preencher |
|---|---|
| Descrição | Resumo do seu negócio (máx. 160 caracteres) |
| Palavras-chave | Termos de pesquisa (ex: "barbearia, barbear, Lisboa") |
Exemplo de descrição:
"Barbearia tradicional em Lisboa com 30 anos de experiência. Barbear,
cortes e tratamentos de barba. Reserva online. Qualidade garantida."
8. Pré-visualizar as Mudanças
Clique no botão "Pré-visualizar" para ver como o branding fica na landing page:
- Vê o logo, cores, nome
- Testa em mobile, tablet e desktop
- Ajusta se necessário
9. Confirme e Guarde
Clique em "Guardar". O sistema aplica imediatamente o branding a:
- Landing page pública
- Emails transaccionais
- Portal do cliente
- Dashboard do admin
Resultado
✅ O branding foi aplicado com sucesso!
Agora:
- ✅ Logo aparece no topo de todas as páginas
- ✅ Cores aparecem em botões e elementos interactivos
- ✅ Nome aparece em títulos e meta-tags (SEO)
- ✅ Landing page está totalmente personalizada
- ✅ Clientes veem a marca em cada interacção
Notas Importantes
- Mudanças instantâneas: Qualquer alteração é aplicada imediatamente (sem esperar)
- Cache do navegador: Se não vê as mudanças, faça Ctrl+F5 (limpar cache do navegador)
- Histórico: O sistema guarda versões anteriores do branding (pode reverter)
- Múltiplos negócios: Se tem vários locais, cada um pode ter branding diferente (funcionalidade avançada)
- Acessibilidade: O sistema verifica automaticamente o contraste de cores (WCAG AA)
Boas Práticas
Logo
- ✅ Fundo transparente (PNG) é preferido
- ✅ Horizontal (mais largo que alto) funciona melhor
- ❌ Evitar logos muito complexos ou com muito detalhe
- ❌ Evitar cores muito pálidas ou muito claras
Cores
- ✅ 2-3 cores principais é o ideal
- ✅ Cores que funcionam bem em mobile
- ✅ Considerar pessoas daltónicas (não usar apenas vermelho/verde)
- ❌ Evitar gradientes muito complexos
Textos
- ✅ Nome do negócio em MAIÚSCULAS ou Title Case
- ✅ Slogan breve e memorável (máx. 10 palavras)
- ✅ Descrição clara e honesta
- ❌ Evitar spam de palavras-chave
Resolução de Problemas
"Logo não aparece"
- Verifique se o ficheiro está em formato PNG/JPG/SVG
- Confirme se tem permissão de leitura (ficheiro não está protegido)
- Tente outra imagem
- Limpe cache do navegador (Ctrl+F5)
"Cores não aparecem correctamente"
- Tente recarregar a página (Ctrl+R)
- Limpe cache (Ctrl+F5)
- Teste noutro navegador
- Verifique se há CSS customizada que sobrepõe (contacte suporte)
"Favicon não muda"
Favicon é armazenado em cache do navegador:
- Limpe cache (Ctrl+F5)
- Teste noutro navegador
- Aguarde até 24 horas para cache global desaparecer
"Qual é o tamanho ideal do logo?"
Recomendações:
- Largura: 200-400px
- Altura: 50-100px
- Proporção: 3:1 ou 4:1 (mais largo que alto)
Próximos passos
Depois de configurar o branding:
- Criar um serviço para que os clientes vejam a marca ao agendar
- Criar um local com endereço completo
- Contactar suporte se quiser branding avançado (domínio custom, tema escuro)