Personalização visual

O widget é servido isolado do seu site (os estilos dele não se misturam com os da sua página), por isso a personalização faz-se a partir do painel e com a opção theme, e não reescrevendo o CSS interno.

A partir do painel (recomendado)

Em Widget → Personalização pode ajustar, sem mexer em código:

• Cor da marca: cor principal de botões, seleção e destaques
• Cor de destaque: cor secundária
• Título do widget: cabeçalho que os seus clientes veem
• Descrição do widget: texto introdutório

Estas definições aplicam-se tanto ao widget incorporado como à ligação direta e ao iframe.

Cor a partir do código

Além do painel, pode fixar a cor principal na chamada a init() com theme:

ReservaHamacas.init({
  clientId: 'O_SEU_CLIENT_ID',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#059669',  // Cor principal
    accentColor: '#F59E0B'    // Cor de destaque
  }
});
Selecione para copiar

Use qualquer cor em formato hexadecimal. A cor principal aplica-se a:

• Botões principais
• Espreguiçadeiras selecionadas
• Ligações e destaques

O contentor é seu

Ainda que o interior do widget esteja isolado, o <div> contentor está na sua página, por isso pode controlar o tamanho, as margens e a posição com o seu próprio CSS:

#reserva-hamacas {
  max-width: 900px;
  margin: 0 auto;   /* centrado */
  padding: 1rem;
}
Selecione para copiar

O que NÃO é possível fazer

Para manter o widget estável em qualquer site, não são expostas classes internas para substituir (tipos de letra, cores de cada elemento, contornos, etc.). Se precisar de uma alteração visual que nem o painel nem o theme cobrem, escreva-nos a partir do Centro de ajuda e avaliamos.

Conselhos

• Mantenha o contraste: garanta que a cor da marca deixa os textos legíveis
• Teste no telemóvel: a maioria das reservas chega pelo telefone
• Coerência: use as cores da sua marca para que o widget pareça parte do seu site

Passo seguinte

Reveja a instalação do widget ou volte à documentação técnica.