Instalación del widget

El widget de reservas permite a tus clientes hacer reservas directamente desde tu página web.

Obtener el código

Ve a Widget → Código en el menú lateral
Elige la pestaña de integración (Standalone es la recomendada)
Haz clic en Copiar código — tu clientId único ya está incluido

Opción 1: Standalone (recomendada)

Es la integración más rápida y ligera. Pega este código en tu web donde quieras que aparezca el widget:

<!-- Widget de Reserva de Hamacas (Standalone) -->
<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacas.init({
      clientId: 'TU_CLIENT_ID',
      container: '#reserva-hamacas',
      locale: 'es',
      theme: {
        primaryColor: '#3B82F6'
      },
      onReservationComplete: function (data) {
        console.log('Reserva completada:', data);
        // Tu código aquí (analítica, redirección, etc.)
      },
      onError: function (error) {
        console.error('Error:', error);
      }
    });
  });
</script>
Selecciona para copiar

No necesitas ponerlo en el <head>: el <script> va junto al <div> y el widget arranca solo al cargar la página.

El color principal y los textos del widget se configuran desde Widget → Personalización en el panel. El primaryColor del código es opcional y sirve como refuerzo.

Opción 2: Iframe (simple)

Si tu plataforma no te deja ejecutar scripts, usa un iframe. Es la opción más compatible:

<!-- Widget de Reserva de Hamacas (Iframe) -->
<iframe
  src="https://reservadehamacas.com/embed/TU_CLIENT_ID"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
  title="Reserva tu hamaca"
  allow="payment"
></iframe>
Selecciona para copiar

El atributo allow="payment" es imprescindible para que funcionen los pagos dentro del iframe.

Opción 3: Enlace directo

Envía a tus clientes directamente a tu página de reservas, sin instalar nada:

https://reservadehamacas.com/tu-empresa
Selecciona para copiar

Si aún no has configurado la URL amigable de tu empresa, usa el enlace con tu identificador:

https://reservadehamacas.com/embed/TU_CLIENT_ID
Selecciona para copiar

Úsalo en:

Emails
Redes sociales
Códigos QR impresos

Widget de comunidades

Si tu plan incluye el widget de comunidades (reservas internas, sin precios ni pagos), el script y el objeto global son distintos:

<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed-community.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacasCommunity.init({
      clientId: 'TU_CLIENT_ID',
      container: '#reserva-hamacas',
      locale: 'es'
    });
  });
</script>
Selecciona para copiar

Integraciones específicas

WordPress

Instala el plugin "Insert Headers and Footers" (o similar)
Pega el código del widget en la sección de footer
Crea una página nueva para reservas
Añade el <div> del contenedor

También puedes usar un bloque HTML personalizado en el editor de bloques.

Wix

Ve al editor de tu sitio
Añade un elemento "Embed" > "HTML personalizado"
Pega el código completo del widget
Ajusta el tamaño del contenedor

Squarespace

Ve a la página donde quieres el widget
Añade un bloque de "Código"
Pega el código del widget
Guarda y publica

Shopify

Ve a Tienda online > Páginas
Crea una nueva página
Cambia al editor HTML
Pega el código del widget

Verificar la instalación

Visita la página donde instalaste el widget
Deberías ver el calendario de reservas
Prueba a hacer una reserva de prueba

Solución de problemas

El widget no aparece

Verifica que el clientId es correcto
Comprueba que el <div id="reserva-hamacas"> existe en el HTML
Revisa la consola del navegador (F12) por errores

El widget aparece pero no carga datos

Verifica que tu cuenta está activa
Comprueba que tienes al menos una zona publicada
Revisa que tienes hamacas disponibles

Error de CORS

El widget debe cargarse desde un dominio público
No funciona abriendo el archivo HTML directamente (file://)

Requisitos técnicos

Requisito	Mínimo
Ancho de la web	400px (recomendado 800px de alto)
JavaScript	Habilitado
HTTPS	Recomendado
Navegadores	Chrome, Firefox, Safari, Edge (últimas 2 versiones)

Siguiente paso

Aprende a personalizar el widget con sus opciones de configuración.