Personalización visual

El widget se sirve aislado de tu web (sus estilos no se mezclan con los de tu página), así que la personalización se hace desde el panel y con la opción theme, no reescribiendo su CSS interno.

Desde el panel (recomendado)

En Widget → Personalización puedes ajustar, sin tocar código:

Color de marca: color principal de botones, selección y acentos
Color de acento: color secundario
Título del widget: encabezado que ven tus clientes
Descripción del widget: texto introductorio

Estos ajustes se aplican tanto al widget embebido como al enlace directo y al iframe.

Color desde el código

Además del panel, puedes fijar el color principal en la llamada a init() con theme:

ReservaHamacas.init({
  clientId: 'TU_CLIENT_ID',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#059669',  // Color principal
    accentColor: '#F59E0B'    // Color de acento
  }
});
Selecciona para copiar

Usa cualquier color en formato hexadecimal. El color principal se aplica a:

Botones principales
Hamacas seleccionadas
Enlaces y acentos

El contenedor sí es tuyo

Aunque el interior del widget está aislado, el <div> contenedor está en tu página, así que puedes controlar su tamaño, márgenes y posición con tu propio CSS:

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

Qué NO se puede hacer

Para mantener el widget estable en cualquier web, no expone clases internas para sobrescribir (tipografías, colores de cada elemento, bordes, etc.). Si necesitas un cambio visual que no cubren el panel ni theme, escríbenos desde el Centro de ayuda y lo valoramos.

Consejos

Mantén el contraste: asegúrate de que el color de marca deja los textos legibles
Prueba en móvil: la mayoría de reservas llegan desde el teléfono
Coherencia: usa los colores de tu marca para que el widget se sienta parte de tu web

Siguiente paso

Repasa la instalación del widget o vuelve a la documentación técnica.