Help Center - Sunbed Booking System

Customize the booking widget with these configuration parameters.

Basic configuration

ReservaHamacas.init({
  // Required
  clientId: 'YOUR_CLIENT_ID',

  // Optional
  container: '#my-container',
  lang: 'en',
  theme: 'light',
  primaryColor: '#3B82F6'
});
Selecciona para copiar

Available parameters

clientId (required)

Your unique client identifier.

clientId: 'abc123-def456-ghi789'
Selecciona para copiar

Find it in Widget → Code.

container

CSS selector of the element where the widget will be displayed.

container: '#booking-widget'
// or
container: '.widget-container'
Selecciona para copiar

Default: #reserva-hamacas-widget

lang

Widget language.

lang: 'es'  // Spanish
lang: 'en'  // English
Selecciona para copiar

Default: Detects browser language.

theme

Visual theme of the widget.

theme: 'light'  // Light background
theme: 'dark'   // Dark background
theme: 'auto'   // Based on system preference
Selecciona para copiar

Default: light

primaryColor

Main color of the widget (buttons, selection, etc).

primaryColor: '#3B82F6'  // Blue
primaryColor: '#10B981'  // Green
primaryColor: '#F59E0B'  // Orange
Selecciona para copiar

Use any color in hexadecimal format. This color will be used for:

Main buttons
Selected sun loungers
Links and accents

mode

Widget display mode.

mode: 'inline'          // Embedded on page (default)
mode: 'floating-button' // Floating button that opens modal
mode: 'modal'           // Modal only, triggered by JS
Selecciona para copiar

buttonText

Floating button text (only for mode: 'floating-button').

buttonText: 'Book Now'
buttonText: 'Reserve'
Selecciona para copiar

Default: Book

buttonPosition

Floating button position.

buttonPosition: 'bottom-right'  // Bottom right corner
buttonPosition: 'bottom-left'   // Bottom left corner
buttonPosition: 'bottom-center' // Bottom center
Selecciona para copiar

Default: bottom-right

defaultDate

Preselected date when opening the widget.

defaultDate: '2024-07-15'       // Specific date
defaultDate: 'today'            // Today
defaultDate: 'tomorrow'         // Tomorrow
Selecciona para copiar

zoneId

Preselect a specific zone.

zoneId: 'zone-123'
Selecciona para copiar

Useful if you have a specific link for each zone.

onReservationComplete

Callback when a booking is completed.

onReservationComplete: function(reservation) {
  console.log('Booking completed:', reservation.id);
  // Here you can trigger analytics events
  gtag('event', 'purchase', {
    transaction_id: reservation.id,
    value: reservation.total
  });
}
Selecciona para copiar

Complete example

<div id="my-widget"></div>

<script src="https://widget.reservadehamacas.com/embed.js"></script>
<script>
  ReservaHamacas.init({
    clientId: 'abc123-def456',
    container: '#my-widget',
    lang: 'en',
    theme: 'light',
    primaryColor: '#059669',
    defaultDate: 'tomorrow',
    onReservationComplete: function(res) {
      alert('Thank you for your booking!');
    }
  });
</script>
Selecciona para copiar

Configuration via URL

You can also pass parameters via URL:

https://reserva.reservadehamacas.com/YOUR_CLIENT_ID?lang=en&theme=dark
Selecciona para copiar

Supported URL parameters:

lang
theme
date
zone

Update configuration

You can change configuration after initialization:

ReservaHamacas.setOption('lang', 'en');
ReservaHamacas.setOption('theme', 'dark');
Selecciona para copiar

Next step

Learn to customize CSS styles of the widget.

Configuration parameters