Technical Documentation

Configuration parameters

Customize the widget's behavior with the init() options

4 min read

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'
  }
});
Select to copy

Available parameters

clientId (required)

Your unique client identifier.

clientId: 'abc123-def456-ghi789'
Select to copy

Find it in WidgetCode.

container

CSS selector (or element) where the widget will be displayed.

container: '#reserva-hamacas'
// or
container: '.widget-container'
Select to copy

Default: #reserva-hamacas

locale

Widget language.

locale: 'es'  // Spanish
locale: 'en'  // English
Select to copy

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'
Select to copy

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>
Select to copy

theme

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

theme: {
  primaryColor: '#3B82F6',  // Main color (buttons, selection)
  accentColor: '#10B981'    // Accent color
}
Select to copy

The main color and the widget texts are defined from WidgetCustomization 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.)
}
Select to copy

onError

Callback to handle loading or booking errors:

onError: function (error) {
  console.error('Error del widget:', error);
}
Select to copy

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>
Select to copy

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
Select to copy

Supported URL parameters:

  • clientId
  • zoneId
  • lang (language)

Next step

Learn how to customize the visual appearance of the widget.

Configuration parameters