Widget Botón — enlace directo a un producto

Juan José Vélez Medina · Equipo Bukyapp· 6 min de lectura·Actualizado 6 oct 2026

Crea un botón «Reservar» con tus colores que lleva a un producto o al catálogo y abre la reserva en ventana emergente sobre tu web.

El widget Botón crea un botón «Reservar» (o un enlace) para tu web que lleva a tu cliente directamente a un producto concreto o a tu catálogo. El botón sale con los colores de tu marca, en el idioma que elijas y, si quieres, abre el proceso de reserva en una ventana emergente encima de tu web, sin que tu cliente la abandone.

Es la opción ideal cuando quieres un «Reservar» junto a la descripción de un curso, una excursión o una habitación en tu propia web. Si lo que buscas es mostrar todo el catálogo con fotos y precios, usa el widget Listado (ver Integrar el motor de reservas en tu web).

Antes de empezar

• Necesitas acceso a la página Integración del panel (la tienen los administradores y los usuarios con permiso para verla).
• Necesitas poder editar el código de tu web, o que lo haga quien la gestiona: hay que pegar una línea en la cabecera (<HEAD>) y el código del botón donde quieras que aparezca.
• La opción Abrir en ventana emergente solo aparece si tu cuenta usa la nueva experiencia de reserva. Si no la ves, el botón funciona igual, pero abre la página de reserva completa.

Paso a paso

1. Abre Integración y elige «Botón»

En el menú superior, entra en Integración. En el primer desplegable, dentro de «Widgets para insertar», elige Botón.

Verás las opciones del botón: el destino, el buscador de producto, el idioma y dos casillas que vienen marcadas por defecto.

2. Elige a dónde lleva el botón

En el desplegable Destino tienes dos opciones:

• Destino: Producto — el botón lleva directo a la reserva de un producto. Escribe su nombre en Buscar producto y elígelo de la lista. Puedes elegir actividades, alojamientos, alquileres, paquetes, bonos y productos de la tienda (debajo de cada nombre ves de qué tipo es). Los extras no aparecen, porque no se reservan solos.
• Destino: Catálogo — el botón lleva a tu catálogo. Con Filtrar categorías puedes limitarlo a una o varias categorías (por ejemplo, solo «Surf»); si no eliges ninguna, se muestra el catálogo completo.

Si cambias de destino, lo que habías elegido se borra y tendrás que buscarlo de nuevo.

3. Elige el idioma

En el desplegable de idioma, deja Idioma Automático para que el proceso de reserva se muestre en el idioma del navegador de tu cliente (si es uno de los idiomas activos en tu cuenta), o elige uno de tus idiomas para fijarlo. Si fijas un idioma, el texto del botón («Reservar») también sale en ese idioma; con Idioma Automático, sale en el idioma de tu panel.

Para activar más idiomas, consulta Configurar idiomas y traducciones.

4. Decide cómo se verá y cómo se abrirá

Debajo tienes dos casillas:

• Botón completo (con tu tema) — marcada, genera un botón «Reservar» ya diseñado con los colores de tu marca. Desmarcada, te da solo el enlace, para ponerlo en un botón que ya tengas en tu web con su propio diseño.
• Abrir en ventana emergente — marcada, el proceso de reserva se abre encima de tu web. Desmarcada, se abre la página de reserva completa.

5. Copia el código

En cuanto eliges un producto (o el catálogo), aparecen tres bloques:

• Código de integración — el código del botón. Pulsa Copiar y pégalo en tu web, en el lugar exacto donde quieras que aparezca el botón.
• Script de widgets — una línea que debes pegar una sola vez en el <HEAD> de las páginas de tu web. Es siempre la misma para todos los widgets de Buky: si ya la pegaste para el Listado, no hace falta repetirla.
• Vista previa — así se verá el botón en tu web.

El botón toma el color principal de tus Colores de empresa:

Si desmarcaste Botón completo, en lugar del código verás un bloque Enlace con la dirección. Cópiala y pégala como enlace del botón de tu web. Si la ventana emergente está marcada, la dirección acaba en #buky-modal: esa terminación es la que hace que se abra encima de tu web, así que no la borres.

Con Destino: Catálogo el código es igual, pero el botón lleva a tu catálogo (filtrado por las categorías que hayas elegido):

6. Pruébalo

Pulsa el botón de la Vista previa. Si la ventana emergente está marcada, se abre el proceso de reserva encima del panel, tal y como lo verá tu cliente en tu web. Ciérralo con la × de la esquina o pulsando fuera de la ventana (en tu web, tu cliente también puede cerrarla con la tecla Esc).

Colores del botón

El botón completo usa los Colores de empresa que ves en la barra lateral izquierda de Integración. Si los cambias, pulsa Guardar: la vista previa refleja el cambio al momento, pero el botón de tu web toma siempre los colores guardados.

Los colores son los de tu cuenta, así que todos tus botones completos comparten el mismo color.

Cómo funciona la ventana emergente

• En ordenador, el proceso de reserva se abre en una ventana encima de tu web, sin las cabeceras de Buky para que tu cliente no se distraiga.
• En móviles y tablets con pantalla pequeña no se abre la ventana: el botón lleva directamente a la página de reserva, que se ve mejor a pantalla completa.
• Al llegar al pago, este se abre siempre a pantalla completa. Así la verificación del banco funciona sin sorpresas.

Consejos

• Un botón por producto: puedes pegar varios botones en la misma página (uno por curso, por ejemplo). Genera el código de cada uno eligiendo su producto; el script del <HEAD> solo va una vez.
• Si el botón sale sin colores o se abre la página completa: casi siempre falta el Script de widgets en el <HEAD> de esa página. Sin él, el botón es un enlace normal: funciona, pero sin tu diseño y sin ventana emergente.
• Dominio propio: si tienes configurada tu propia dirección para la página de reservas, los enlaces del botón ya la usan (ver Personalizar la URL de tu página de reservas).
• Enlaces con etiqueta de origen o códigos QR: para compartir un producto por redes, email o cartelería y saber de dónde llegan las reservas, usa los enlaces directos de producto (ver Cómo crear enlaces directos a productos).

Preguntas frecuentes

¿En qué se diferencia el Botón del Listado?

El Listado muestra tu catálogo dentro de tu web, con tarjetas, fotos y precios. El Botón es solo un «Reservar» que lleva a un producto o al catálogo: ocupa poco y encaja en cualquier parte de tu diseño.

¿Qué pasa con el widget «Bloque resumen»?

Es un widget antiguo que ya no recibe mejoras. Para integraciones nuevas usa Listado o Botón.

¿Puedo cambiar el texto «Reservar»?

Desde Integración no: el botón completo siempre dice «Reservar». Si quieres otro texto («Reserva tu clase», «Ver fechas»…), desmarca Botón completo, copia el Enlace y ponlo en un botón de tu web con el texto que prefieras.

No veo la casilla «Abrir en ventana emergente». ¿Por qué?

Solo está disponible con la nueva experiencia de reserva. Sin ella, el botón y el enlace funcionan igual, pero abren la página de reserva completa.