Centro de Ayuda - Reserva de Hamacas

Personaliza el widget de reservas con estos parámetros de configuración.

Configuración básica

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

  // Opcional
  container: '#mi-contenedor',
  lang: 'es',
  theme: 'light',
  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 Configuración > Widget.

container

Selector CSS del elemento donde se mostrará el widget.

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

Por defecto: #reserva-hamacas-widget

lang

Idioma del widget.

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

Por defecto: Detecta el idioma del navegador.

theme

Tema visual del widget.

theme: 'light'  // Fondo claro
theme: 'dark'   // Fondo oscuro
theme: 'auto'   // Según preferencia del sistema
Selecciona para copiar

Por defecto: light

primaryColor

Color principal del widget (botones, selección, etc).

primaryColor: '#3B82F6'  // Azul
primaryColor: '#10B981'  // Verde
primaryColor: '#F59E0B'  // Naranja
Selecciona para copiar

Usa cualquier color en formato hexadecimal. Este color se usará para:

Botones principales
Hamacas seleccionadas
Enlaces y acentos

mode

Modo de visualización del widget.

mode: 'inline'          // Embebido en la página (por defecto)
mode: 'floating-button' // Botón flotante que abre modal
mode: 'modal'           // Solo modal, activado por JS
Selecciona para copiar

buttonText

Texto del botón flotante (solo para mode: 'floating-button').

buttonText: 'Reservar Ahora'
buttonText: 'Book Now'
Selecciona para copiar

Por defecto: Reservar

buttonPosition

Posición del botón flotante.

buttonPosition: 'bottom-right'  // Esquina inferior derecha
buttonPosition: 'bottom-left'   // Esquina inferior izquierda
buttonPosition: 'bottom-center' // Centro inferior
Selecciona para copiar

Por defecto: bottom-right

defaultDate

Fecha preseleccionada al abrir el widget.

defaultDate: '2024-07-15'       // Fecha específica
defaultDate: 'today'            // Hoy
defaultDate: 'tomorrow'         // Mañana
Selecciona para copiar

zoneId

Preseleccionar una zona específica.

zoneId: 'zone-123'
Selecciona para copiar

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

onReservationComplete

Callback cuando se completa una reserva.

onReservationComplete: function(reservation) {
  console.log('Reserva completada:', reservation.id);
  // Aquí puedes disparar eventos de analytics
  gtag('event', 'purchase', {
    transaction_id: reservation.id,
    value: reservation.total
  });
}
Selecciona para copiar

Ejemplo completo

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

<script src="https://widget.reservadehamacas.com/embed.js"></script>
<script>
  ReservaHamacas.init({
    clientId: 'abc123-def456',
    container: '#mi-widget',
    lang: 'es',
    theme: 'light',
    primaryColor: '#059669',
    defaultDate: 'tomorrow',
    onReservationComplete: function(res) {
      alert('¡Gracias por tu reserva!');
    }
  });
</script>
Selecciona para copiar

Configuración vía URL

También puedes pasar parámetros por URL:

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

Parámetros soportados en URL:

lang
theme
date
zone

Actualizar configuración

Puedes cambiar la configuración después de inicializar:

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

Siguiente paso

Aprende a personalizar los estilos CSS del widget.

Parámetros de configuración