Publicar el widget

El widget de reservas es un componente que puedes insertar en tu página web para que tus clientes reserven directamente. Es totalmente personalizable y se adapta a cualquier diseño.

Obtener el código de integración

1. Ve a "Configuración" → "Widget"
2. En la sección "Código de integración" encontrarás el código
3. Haz clic en "Copiar código"

Código de ejemplo

<!-- Widget de Reserva de Hamacas -->
<div id="reserva-hamacas-widget"></div>
<script src="https://cdn.reservadehamacas.com/widget.js"></script>
<script>
  ReservaHamacas.init({
    clientId: 'tu-client-id',
    container: '#reserva-hamacas-widget'
  });
</script>
Selecciona para copiar

Opciones de integración

Integración completa (recomendada)

Inserta el widget completo en tu página:

<div id="reserva-hamacas-widget" style="width: 100%; min-height: 600px;"></div>
Selecciona para copiar

Botón de reserva

Si prefieres un botón que abra el widget en un modal:

<button onclick="ReservaHamacas.open()">
  Reservar hamaca
</button>
Selecciona para copiar

Enlace directo

También puedes enlazar directamente a tu página de reservas:

https://reservadehamacas.com/book/tu-client-id
Selecciona para copiar

Personalización

Colores

Puedes personalizar los colores del widget:

ReservaHamacas.init({
  clientId: 'tu-client-id',
  theme: {
    primaryColor: '#2563eb',
    secondaryColor: '#f3f4f6'
  }
});
Selecciona para copiar

Idioma

El widget detecta automáticamente el idioma del navegador, pero puedes forzar uno:

ReservaHamacas.init({
  clientId: 'tu-client-id',
  locale: 'es' // es, en, de, fr, it, pt
});
Selecciona para copiar

Zona predeterminada

Si tienes varias zonas, puedes preseleccionar una:

ReservaHamacas.init({
  clientId: 'tu-client-id',
  defaultZone: 'zona-playa-id'
});
Selecciona para copiar

Integración con WordPress

Si usas WordPress:

1. Ve a Apariencia → Widgets
2. Añade un bloque "HTML personalizado"
3. Pega el código de integración
4. Guarda los cambios

Integración con Wix

1. En el editor de Wix, añade un elemento "HTML embebido"
2. Pega el código de integración
3. Ajusta el tamaño del contenedor
4. Publica los cambios

Verificar la integración

Después de instalar el widget:

1. Visita tu página web
2. Verifica que el widget carga correctamente
3. Haz una reserva de prueba
4. Comprueba que la reserva aparece en tu panel

Solución de problemas

El widget no carga

• Verifica que el código está correctamente copiado
• Comprueba que no hay errores en la consola del navegador
• Asegúrate de que tu suscripción está activa

Estilos incorrectos

• Verifica que no hay CSS de tu web que interfiera
• Usa !important en los estilos del contenedor si es necesario

¡Felicidades!

Has completado la configuración inicial de Reserva de Hamacas. Tu sistema de reservas está listo para recibir clientes.

Próximos pasos recomendados

• Gestionar reservas - Aprende a gestionar las reservas entrantes
• Dashboard de analytics - Analiza el rendimiento de tu negocio
• Documentación técnica - Para integraciones avanzadas