Visual customization

The widget is served isolated from your site (its styles don't mix with your page's), so customization is done from the panel and with the theme option, not by rewriting its internal CSS.

From the panel (recommended)

In Widget → Customization you can adjust, without touching code:

• Brand color: main color of buttons, selection and accents
• Accent color: secondary color
• Widget title: heading your customers see
• Widget description: introductory text

These settings apply to the embedded widget as well as to the direct link and the iframe.

Color from the code

In addition to the panel, you can set the main color in the init() call with theme:

ReservaHamacas.init({
  clientId: 'YOUR_CLIENT_ID',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#059669',  // Main color
    accentColor: '#F59E0B'    // Accent color
  }
});
Selecciona para copiar

Use any color in hexadecimal format. The main color is applied to:

• Primary buttons
• Selected sun loungers
• Links and accents

The container is yours

Even though the inside of the widget is isolated, the container <div> lives on your page, so you can control its size, margins and position with your own CSS:

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

What you can't do

To keep the widget stable on any site, it doesn't expose internal classes to override (typography, colors of each element, borders, etc.). If you need a visual change that the panel and theme don't cover, write to us from the Help Center and we'll look into it.

Tips

• Keep the contrast: make sure the brand color keeps the texts legible
• Test on mobile: most bookings come from the phone
• Consistency: use your brand colors so the widget feels part of your site

Next step

Review the widget installation or go back to the technical documentation.