Configuration parameters

Customize the booking widget with the ReservaHamacas.init() parameters.

Basic configuration

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

  // Optional
  container: '#reserva-hamacas',
  locale: 'es',
  zoneId: 'ZONE_ID',
  theme: {
    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 (or element) where the widget will be displayed.

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

Default: #reserva-hamacas

locale

Widget language.

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

Available languages: es, en, de, fr, it, pt.

Default: the visitor's browser language.

zoneId

Preselects a specific zone. Useful if you have a dedicated link for each zone.

zoneId: 'zone-123'
Selecciona para copiar

You can also set it on the container itself with data-zone-id, without touching init():

<div id="reserva-hamacas" data-zone-id="zone-123"></div>
Selecciona para copiar

theme

The widget's brand color. It's an object (not a string):

theme: {
  primaryColor: '#3B82F6',  // Main color (buttons, selection)
  accentColor: '#10B981'    // Accent color
}
Selecciona para copiar

The main color and the widget texts are defined from Widget → Customization in the panel. The theme in the code is an optional fallback.

onReservationComplete

Callback that runs when the visitor completes a booking. Useful for triggering analytics events or redirecting:

onReservationComplete: function (data) {
  console.log('Reservation complete:', data);
  // Your code here (analytics, redirect, etc.)
}
Selecciona para copiar

onError

Callback to handle loading or booking errors:

onError: function (error) {
  console.error('Error del widget:', error);
}
Selecciona para copiar

Complete example

<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacas.init({
      clientId: 'abc123-def456',
      container: '#reserva-hamacas',
      locale: 'es',
      zoneId: 'vip-zone',
      theme: {
        primaryColor: '#059669'
      },
      onReservationComplete: function (data) {
        console.log('Thank you for your booking!', data);
      }
    });
  });
</script>
Selecciona para copiar

Configuration via URL

If you use the direct link or the iframe, you can pass parameters through the URL:

https://reservadehamacas.com/embed/YOUR_CLIENT_ID?zoneId=ZONE_ID&lang=en
Selecciona para copiar

Supported URL parameters:

• clientId
• zoneId
• lang (language)

Next step

Learn how to customize the visual appearance of the widget.