Help Center - Sunbed Booking System

The widget uses CSS variables that you can override to adapt it to your brand.

Available CSS variables

Main colors

:root {
  /* Primary color (buttons, selection) */
  --rh-primary: #3B82F6;
  --rh-primary-hover: #2563EB;
  --rh-primary-light: #EFF6FF;

  /* Status colors */
  --rh-success: #10B981;
  --rh-warning: #F59E0B;
  --rh-error: #EF4444;

  /* Background colors */
  --rh-bg-primary: #FFFFFF;
  --rh-bg-secondary: #F9FAFB;
  --rh-bg-tertiary: #F3F4F6;

  /* Text colors */
  --rh-text-primary: #111827;
  --rh-text-secondary: #6B7280;
  --rh-text-muted: #9CA3AF;
}
Selecciona para copiar

Typography

:root {
  --rh-font-family: 'Inter', system-ui, sans-serif;
  --rh-font-size-xs: 0.75rem;
  --rh-font-size-sm: 0.875rem;
  --rh-font-size-base: 1rem;
  --rh-font-size-lg: 1.125rem;
  --rh-font-size-xl: 1.25rem;
}
Selecciona para copiar

Spacing and borders

:root {
  --rh-border-radius: 0.5rem;
  --rh-border-radius-lg: 0.75rem;
  --rh-spacing-xs: 0.25rem;
  --rh-spacing-sm: 0.5rem;
  --rh-spacing-md: 1rem;
  --rh-spacing-lg: 1.5rem;
}
Selecciona para copiar

How to apply styles

Method 1: After the widget script

<script src="https://widget.reservadehamacas.com/embed.js"></script>

<style>
  :root {
    --rh-primary: #059669;
    --rh-border-radius: 1rem;
  }
</style>
Selecciona para copiar

Method 2: In your stylesheet

/* your-styles.css */
.reserva-hamacas-widget {
  --rh-primary: #7C3AED;
  --rh-font-family: 'Poppins', sans-serif;
}
Selecciona para copiar

Customization examples

Theme with your brand color

:root {
  --rh-primary: #E11D48;       /* Pink */
  --rh-primary-hover: #BE123C;
  --rh-primary-light: #FFF1F2;
}
Selecciona para copiar

More rounded borders

:root {
  --rh-border-radius: 1rem;
  --rh-border-radius-lg: 1.5rem;
}
Selecciona para copiar

Custom font

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
  --rh-font-family: 'Poppins', sans-serif;
}
Selecciona para copiar

Custom dark theme

.reserva-hamacas-widget[data-theme="dark"] {
  --rh-bg-primary: #1F2937;
  --rh-bg-secondary: #111827;
  --rh-text-primary: #F9FAFB;
  --rh-text-secondary: #D1D5DB;
}
Selecciona para copiar

Widget CSS classes

Main structure

Class	Description
`.rh-widget`	Main container
`.rh-header`	Header with title
`.rh-steps`	Step indicator
`.rh-content`	Content area
`.rh-footer`	Footer with buttons

Components

Class	Description
`.rh-calendar`	Date calendar
`.rh-map`	Sun lounger map
`.rh-hamaca`	Each sun lounger on the map
`.rh-hamaca--selected`	Selected sun lounger
`.rh-hamaca--occupied`	Occupied sun lounger
`.rh-button`	Buttons
`.rh-input`	Form fields

Sun lounger states

/* Available sun lounger */
.rh-hamaca--available {
  background-color: var(--rh-success);
}

/* Selected sun lounger */
.rh-hamaca--selected {
  background-color: var(--rh-primary);
  box-shadow: 0 0 0 3px var(--rh-primary-light);
}

/* Occupied sun lounger */
.rh-hamaca--occupied {
  background-color: var(--rh-text-muted);
  cursor: not-allowed;
}
Selecciona para copiar

Widget in iframe vs embedded

Embedded mode

Styles apply directly. You can use all customizations.

Iframe mode

The widget is isolated. You can only customize:

Via configuration parameters (primaryColor, theme)
CSS styles don't apply inside the iframe

Responsive

The widget is responsive by default. Breakpoints are:

/* Mobile */
@media (max-width: 640px) {
  .rh-widget { /* ... */ }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .rh-widget { /* ... */ }
}

/* Desktop */
@media (min-width: 1025px) {
  .rh-widget { /* ... */ }
}
Selecciona para copiar

Tips

Maintain contrast: Make sure texts are readable
Test on mobile: Most bookings come from mobile devices
Don't hide elements: It can affect usability
Use your color palette: But maintain visual coherence

CSS customization