Parámetros de configuración

Personaliza el widget de reservas con los parámetros de ReservaHamacas.init().

Configuración básica

ReservaHamacas.init({
  // Requerido
  clientId: 'TU_CLIENT_ID',

  // Opcionales
  container: '#reserva-hamacas',
  locale: 'es',
  zoneId: 'ID_DE_ZONA',
  theme: {
    primaryColor: '#3B82F6'
  }
});
Selecciona para copiar

Parámetros disponibles

clientId (requerido)

Tu identificador único de cliente.

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

Encuéntralo en Widget → Código.

container

Selector CSS (o elemento) donde se mostrará el widget.

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

Por defecto: #reserva-hamacas

locale

Idioma del widget.

locale: 'es'  // Español
locale: 'en'  // English
Selecciona para copiar

Idiomas disponibles: es, en, de, fr, it, pt.

Por defecto: el idioma del navegador del visitante.

zoneId

Preselecciona una zona concreta. Útil si tienes un enlace específico para cada zona.

zoneId: 'zone-123'
Selecciona para copiar

También puedes indicarlo en el propio contenedor con data-zone-id, sin tocar el init():

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

theme

Color de marca del widget. Es un objeto (no un texto):

theme: {
  primaryColor: '#3B82F6',  // Color principal (botones, selección)
  accentColor: '#10B981'    // Color de acento
}
Selecciona para copiar

El color principal y los textos del widget se definen desde Widget → Personalización en el panel. El theme del código es un refuerzo opcional.

onReservationComplete

Callback que se ejecuta cuando el visitante completa una reserva. Útil para disparar eventos de analítica o redirigir:

onReservationComplete: function (data) {
  console.log('Reserva completada:', data);
  // Tu código aquí (analítica, redirección, etc.)
}
Selecciona para copiar

onError

Callback para gestionar errores de carga o de la reserva:

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

Ejemplo completo

<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: 'zona-vip',
      theme: {
        primaryColor: '#059669'
      },
      onReservationComplete: function (data) {
        console.log('¡Gracias por tu reserva!', data);
      }
    });
  });
</script>
Selecciona para copiar

Configuración vía URL

Si usas el enlace directo o el iframe, puedes pasar parámetros por la URL:

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

Parámetros soportados en la URL:

• clientId
• zoneId
• lang (idioma)

Siguiente paso

Aprende a personalizar el aspecto visual del widget.