Primeros Pasos

Publicar el widget

Integra el widget de reservas en tu página web

3 min min de lectura

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

Obtener el código de integración

  1. En el menú lateral, ve a "Widget" → "Código"
  2. Elige la pestaña Standalone (recomendada)
  3. Haz clic en "Copiar código" — tu clientId ya viene incluido

Código de ejemplo

<!-- Widget de Reserva de Hamacas -->
<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'
    });
  });
</script>
Selecciona para copiar

Opciones de integración

Integración completa (recomendada)

Inserta el widget completo en tu página con el código Standalone de arriba. El widget se adapta al ancho del contenedor.

Iframe

Si tu plataforma no permite ejecutar scripts, usa el iframe (recuerda allow="payment" para que funcionen los pagos):

<iframe
  src="https://reservadehamacas.com/embed/tu-client-id"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px;"
  title="Reserva tu hamaca"
  allow="payment"
></iframe>
Selecciona para copiar

Enlace directo

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

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

Si aún no has configurado la URL amigable de tu empresa, usa https://reservadehamacas.com/embed/tu-client-id.

Personalización

Colores

El color de marca se configura desde Widget → Personalización. También puedes fijarlo en el código con theme:

ReservaHamacas.init({
  clientId: 'tu-client-id',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#2563eb',
    accentColor: '#f59e0b'
  }
});
Selecciona para copiar

Idioma

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

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

Zona predeterminada

Si tienes varias zonas, puedes preseleccionar una con zoneId:

ReservaHamacas.init({
  clientId: 'tu-client-id',
  container: '#reserva-hamacas',
  zoneId: 'zona-playa-id'
});
Selecciona para copiar

Integración con WordPress

  1. Ve a Apariencia → Widgets (o edita la página)
  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 afecte al contenedor
  • Ajusta el tamaño del <div id="reserva-hamacas"> si lo necesitas

¡Felicidades!

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

Próximos pasos recomendados

Anterior
Activar pagos
Publicar el widget