Tema do Widget
O widget oferece tres temas iniciais que vem prontos, mais oito variaveis CSS que voce pode substituir sem escrever CSS proprio.
Temas iniciais
Escolha em Dashboard > Bookings > Widgets > > Tema.
| Tema | Fundo | Cabecalhos | CTAs | Melhor para |
|---|---|---|---|---|
| Light | Branco | Cinza escuro | Cor da marca | A maioria - neutro |
| Dark | Preto | Branco | Marca / acento neon | Resorts, premium |
| Minimal | Branco | Preto | Preto | Carrega mais rapido, so texto |
Tambem pode passar data-theme="light|dark|minimal" no script para sobrescrever por pagina.
Variaveis CSS
Oito variaveis em Tema > Avancado:
| Variavel | Padrao (Light) | Uso |
|---|---|---|
--primary | #0f172a | CTAs primarios, inputs focados |
--bg | #ffffff | Fundo de pagina e modal |
--text | #0f172a | Texto |
--accent | #f59e0b | Destaques, badges "Vagas limitadas" |
--success | #16a34a | Confirmacoes, "Reservado!" |
--error | #dc2626 | Erros |
--radius | 12px | Arredondamento de botoes e cards |
--font | system-ui, ... | Pilha de fontes |
Esses sao os unicos hooks de estilo. CSS arbitrario nao e suportado - superficie pequena mantem o widget seguro em Squarespace e Wix.
Campos de marca (nao CSS)
- Nome de exibicao - so no dashboard
- URL do logo - PNG 200x60 transparente recomendado
- URL do hero - JPG 1600x600 recomendado
- Headline - uma linha abaixo do logo
- Subheadline - linha menor abaixo
- Rodape - horario, endereco, "Ligue para..."
Multiplos widgets
Cada widget tem seu proprio JSON de tema. Exemplo:
front-beach-bikes- Light, logo padraofront-beach-bikes-events- Dark, logo diferente para tours
Ambos compartilham modelos e faixas de preco.
JSON de tema (avancado)
{
"preset": "light",
"logoUrl": "https://cdn.frankebikes.com/logo.png",
"heroUrl": "https://cdn.frankebikes.com/hero.jpg",
"headline": "Reserve sua e-bike",
"subhead": "Beach cruisers, fat tire e tandems - todas eletricas.",
"footer": "Front Beach Bikes - 12 Front Street - (843) 555-0143",
"vars": {
"--primary": "#0ea5e9",
"--accent": "#facc15",
"--radius": "8px"
}
}
Pre-visualizacao ao vivo
O editor mostra preview lado-a-lado.
Acessibilidade
Os tres temas atendem contraste WCAG AA.