Integrar el motor de reservas en tu web

Miguel Gómez Pérez · Equipo Bukyapp· 5 min de lectura·Actualizado 27 may 2026

Integra el motor de reservas de Buky en tu web compartiendo un enlace, usando un iframe o instalando el widget con disponibilidad en tiempo real.

BukyApp te permite integrar tu motor de reservas directamente en tu página web para que tus clientes reserven sin salir de tu sitio. Hay varias formas de hacerlo: desde compartir un simple enlace hasta incrustar un widget interactivo con disponibilidad en tiempo real.

En esta guía te explicamos los 4 métodos disponibles y cómo configurar cada uno desde el panel de administración.

Antes de empezar

• Necesitas tener al menos un producto creado y publicado en BukyApp (actividad, alojamiento, alquiler, pack o bono).
• Si vas a usar los widgets (métodos 3 y 4), necesitarás acceso al código HTML de tu web o a un plugin que permita insertar HTML (por ejemplo, en WordPress).

Acceder a la sección de Integración

Ve a Integración en el menú superior de tu panel de administración.

Verás dos zonas:

• Panel izquierdo: configuración de colores y apariencia de tu motor de reservas (color principal, secundario y destacado). Estos colores se aplican a todos los métodos de integración.
• Panel derecho: el selector de tipo de integración con sus opciones.

Personalizar los colores

Antes de generar cualquier enlace o widget, puedes personalizar la apariencia de tu motor de reservas para que coincida con tu marca:

Haz clic en Guardar para aplicar los cambios. Los colores afectan a todos los widgets y páginas de reserva que generes.

Método 1: Enlace directo al catálogo

Vídeo — generar el enlace al catálogo:

Este es el método más sencillo. Obtienes una URL que lleva directamente a tu catálogo completo de productos. Ideal para compartir en redes sociales, email o como botón en tu web.

Cómo obtenerlo

1. En el selector Elige opción, selecciona Página catálogo.
2. Opcionalmente, selecciona un idioma y filtra por categorías si no quieres mostrar todos los productos.
3. Copia la URL que aparece debajo del selector.

La URL tiene este formato:

https://tudominio.bukyapp.com/front/TU_ID_DE_CUENTA

Opciones adicionales

• Idioma: añade ?lang=es (o en, fr, de, it, pt) a la URL para forzar un idioma concreto.
• Filtrar categorías: selecciona las categorías que quieras mostrar. Si no seleccionas ninguna, se muestran todas.
• Compartir: usa el botón de compartir junto a la URL para copiarla al portapapeles.

¿Dónde usarlo?

• Como botón «Reservar» en tu web que abra la URL en una nueva pestaña.
• En firmas de email, publicaciones en redes sociales o códigos QR.
• En campañas de marketing o newsletters.

Método 2: Enlace directo a un producto

Vídeo — generar el enlace a un producto:

Similar al anterior, pero lleva directamente a la página de reserva de un producto concreto. Perfecto cuando quieres enlazar una actividad o alojamiento específico.

Cómo obtenerlo

1. En el selector Elige opción, selecciona Página de reserva.
2. Elige el tipo de producto (actividades, alojamientos, alquileres, packs o bonos).
3. Selecciona el producto concreto de la lista.
4. Opcionalmente, elige un idioma.
5. Copia la URL que aparece.

La URL tiene este formato:

https://tudominio.bukyapp.com/front/TU_ID/product/ID_PRODUCTO

¿Dónde usarlo?

• Para enlazar productos individuales desde tu web (por ejemplo, «Reserva tu clase de surf»).
• En campañas de email que promocionen un producto concreto.
• En códigos QR impresos (carteles, folletos, tarjetas de visita).

Método 3: Widget Listado

Vídeo — generar el código del widget listado:

El widget listado incrusta un catálogo interactivo directamente en tu página web. Tus clientes pueden ver los productos, navegar por categorías y empezar a reservar sin salir de tu sitio.

Cómo configurarlo

1. En el selector Elige opción, selecciona Listado.
2. Elige el idioma.
3. Filtra por categorías si quieres mostrar solo algunos productos.
4. Verás una previsualización del widget debajo de los controles.

Cómo insertarlo en tu web

Desplázate hasta la sección Código de integración para ver los dos bloques de código que necesitas:

Paso 1 — Incluir la librería: Copia el primer bloque y pégalo en el <head> de tu página web. Solo necesitas hacer esto una vez, aunque uses varios widgets en la misma página:

<script async src="https://tudominio.bukyapp.com/assets/widgets.js"></script>
<link type="text/css" href="https://tudominio.bukyapp.com/assets/widgets.css" rel="stylesheet">

Paso 2 — Insertar el widget: Copia el segundo bloque y pégalo en el lugar de tu página donde quieras que aparezca el catálogo:

<div class="SCXP_WIDGET"
     data-widget="List"
     data-customer="TU_ID_DE_CUENTA"
     data-categories="">
</div>

Si dejaste data-categories vacío, se mostrarán todos los productos. Si seleccionaste categorías específicas en la configuración, solo se mostrarán esas.

En WordPress

1. Edita la página donde quieras añadir el widget.
2. Añade un bloque de tipo HTML personalizado (o «Custom HTML»).
3. Pega el código del widget en el bloque.
4. Para la librería, usa un plugin como Insert Headers and Footers para pegarla en el <head> de tu sitio.

Método 4: Widget Bloque resumen

Vídeo — generar el código del widget bloque resumen:

El widget bloque resumen es más compacto e interactivo. Muestra uno o varios productos con un formulario de búsqueda de disponibilidad integrado (fecha, participantes) y botón de reserva directa. Ideal para destacar productos estrella en tu página de inicio.

Cómo configurarlo

1. En el selector Elige opción, selecciona Bloque resumen.
2. Elige el tipo de producto (actividades, alojamientos, alquileres, packs o bonos).
3. Selecciona los productos que quieres mostrar (puedes elegir varios).
4. Elige el idioma.

Cómo insertarlo en tu web

Al igual que con el widget listado, desplázate hasta el Código de integración:

Paso 1: Si aún no lo has hecho, pega la librería en el <head> de tu web (la misma del método 3).

Paso 2: Copia el bloque del widget y pégalo donde quieras que aparezca:

<div class="SCXP_WIDGET"
     data-widget="FullActivities"
     data-product="ID_PRODUCTO_1,ID_PRODUCTO_2"
     data-lang="es">
</div>

El valor de data-widget cambia según el tipo de producto:

En WordPress

Sigue los mismos pasos que con el widget listado: bloque HTML personalizado para el widget y la librería en el <head>.

Comparativa de métodos

Consejos

• Empieza por lo sencillo: si no tienes experiencia con HTML, usa los enlaces directos (métodos 1 y 2) y ponlos como botones en tu web.
• Personaliza los colores primero: antes de generar widgets, ajusta los colores para que coincidan con tu marca. Los cambios se aplican a todo.
• La librería se carga una sola vez: si usas varios widgets en la misma página, solo necesitas incluir el <script> y el <link> una vez en el <head>.
• Prueba antes de publicar: usa la previsualización en el panel de Integración para ver cómo quedará antes de insertar el código en tu web.

Preguntas frecuentes

¿Puedo usar varios widgets en la misma página?

Sí. Incluye la librería una sola vez en el <head> y añade tantos bloques <div class="SCXP_WIDGET"> como necesites en el cuerpo de la página.

¿Los widgets se adaptan al móvil?

Sí. Los widgets son responsivos y se ajustan automáticamente al tamaño de la pantalla.

¿Si cambio los colores, se actualizan los widgets que ya tengo insertados?

Sí. Los colores se cargan desde tu cuenta cada vez que el widget se muestra, así que los cambios se reflejan automáticamente.

¿Necesito conocimientos técnicos para usar los enlaces directos?

No. Los métodos 1 y 2 solo requieren copiar una URL. No hace falta tocar código.