Cómo insertar un widget de Booking.com en Webflow sin romper la versión móvil

Los blogs de viajes que se monetizan con enlaces de afiliados tienen un problema estructural: cada recomendación de hotel envía al lector a otro sitio.

El Programa de Afiliados de Booking.com es la solución más directa. Sus widgets integrables te permiten mostrar búsquedas de hoteles, ofertas y mapas sin tener que crear un sistema de reservas propio. Sin embargo, insertarlos en Webflow requiere algunos pasos poco evidentes, y el widget predeterminado falla en móviles si no se aplica una solución de adaptabilidad que la mayoría de los tutoriales pasan por alto.

En esta guía, veremos cómo insertar widgets de Booking.com en Webflow. Cubriremos qué tipo de widget se adapta a tus necesidades, cómo gestionar los problemas de adaptabilidad de los iframes en Webflow y la configuración específica para evitar el desastre de las barras de desplazamiento en móviles.

También aclararemos qué es lo que realmente se puede hacer con los widgets de Booking.com (y qué no), ya que el término "widget de Booking.com" abarca tres productos distintos que resuelven problemas diferentes.

3 tipos dewidgets de Booking.com, ¿cuál necesitas?

"Widget de Booking.com" significa tres cosas distintas, y elegir el equivocado puede costarte tiempo de trabajo extra:

• Widgets de afiliados (esta guía) redirigen a los usuarios a Booking.com y te generan una comisión
• Widgets de reseñas muestran las valoraciones de los huéspedes de tu propiedad en tu sitio mediante un servicio de terceros
• Widgets de reserva directa sustituyen a Booking.com por completo y funcionan en una plataforma independiente

Lo que no es posible: Integrar la funcionalidad de reserva real de Booking.com para que los visitantes completen las transacciones en tu sitio. Booking.com no ofrece esto, ya que quieren que las reservas se realicen en su plataforma. Los widgets de afiliados redirigen a los usuarios allí para completar la transacción.

Para esta guía, nos centraremos en los widgets de afiliados de Booking.com (n.º 1), porque es a lo que se refieren la mayoría de los usuarios de Webflow cuando dicen "insertar un widget de Booking.com".

Aquí tienes un vistazo más detallado a los cinco formatos de widgets de afiliados disponibles en el Centro de Partners:

Si tu contenido es específico sobre un destino, como "Los mejores hoteles en Lisboa" o "Dónde alojarse en Kioto", la caja de búsqueda o el widget de mapa funcionarán mejor que la variante inspiradora. La caja de búsqueda inspiradora es más adecuada para contenido de la parte superior del embudo, como "¿A dónde viajar en el Sudeste Asiático?", donde los lectores aún no han decidido su destino.

Ideal para: Blogueros de viajes, guías de destinos, sitios de reseñas y agentes de viajes que monetizan su contenido.

¿Qué necesitas para integrar los widgets de Booking.com en Webflow?

Necesitas tres cosas antes de abrir el diseñador de Webflow. Dos son gratuitas y una depende de tu plan de Webflow. Si te falta alguna, el widget no se mostrará o no registrará las comisiones correctamente.

Cuenta de afiliado de Booking.com (gratuita)

Necesitas aprobación para acceder a los códigos de integración de los widgets.

Regístrate en el Programa de Afiliados de Booking.com. La aprobación suele tardar entre 1 y 3 días hábiles.

Estos son los requisitos clave para registrarte:

• Un sitio web activo con contenido relacionado con viajes
• Un nivel razonable de interacción con la audiencia (no publican mínimos de tráfico específicos, pero tu sitio debe tener visitantes reales)
• Cumplimiento de los términos del programa de afiliados de Booking.com
• Cuenta bancaria (EUR, USD o GBP) o cuenta de PayPal para recibir los pagos de comisiones

La aprobación suele tardarde 1 a 3 días hábiles. Mientras esperas, prepara la estructura de integración en Webflow para que puedas pegar el código del widget en cuanto tengas acceso.

Plan de sitio de pago en Webflow

El plan gratuito Starter no admite código personalizado ni el elemento Embed.

Necesitas como mínimo:

• Plan Basic (14 $/mes) para sitios de aficionados
• Plan CMS (23 $/mes) si estás creando un blog con guías de destinos
• Cualquier plan de Workspace Business o Agency/Freelancer

Si ya tienes un plan de pago, ya lo tienes todo listo. Si no, el plan Basic es suficiente para sitios de viajes estáticos; actualízate al plan CMS si vas a generar páginas de destinos desde una colección.

Conocimientos básicos de HTML (útiles, pero no obligatorios)

Copiarás códigos de inserción y los pegarás en el elemento Code Embed de Webflow. Si sabes copiar, pegar y entiendes las etiquetas , ya lo tienes. La parte más compleja es hacer que los widgets sean adaptables, algo que veremos paso a paso con código específico.<iframe>

Una vez que tengas los tres elementos, la inserción en sí lleva unos 15 minutos de principio a fin. Aquí tienes exactamente cómo hacerlo.

6 pasos para insertar un widget de afiliados de Booking.com en Webflow

Para insertar widgets de Booking.com en Webflow, únete al Programa de Afiliados, genera el código del widget en el Partner Center, añade el elemento Code Embed en Webflow, pega el código, configura las dimensiones adaptables, y luego publica y prueba.

Sin embargo, la parte más complicada no es la inserción en sí, sino evitar los desastres de desbordamiento en móviles y las barras de desplazamiento verticales.

Paso 1: Genera el código de tu widget en el Partner Center de Booking.com

Inicia sesión en el Partner Center de afiliados de Booking.com (deberías haber recibido las credenciales de acceso por correo electrónico tras tu aprobación).

Ve a Marketplace → Products en la barra lateral izquierda. Verás seis tipos de widgets.

Para este ejemplo, usaré el cuadro de búsqueda porque es el más versátil:

1. Haz clic en Search Box en la lista de productos
   
2. Configura tu widget:
   

• Idioma: Elige entre más de 40 opciones (por defecto es inglés)
• Ancho y alto: Recomiendo empezar con un ancho de 400px y un alto de 300px (luego lo haremos adaptable)
• Destino (opcional): Déjalo en blanco para un buscador general, o prellénalo con el ID de una ciudad o punto de interés desde el Partner Center
• Posición del logo, colores y fuentes: Personalízalos para que combinen con el diseño de tu sitio
• Moneda: USD, EUR, GBP, etc.

1. Haz clic en Generar código
   

A continuación, verás un bloque de código para insertar que se ve así:

<ins class="bookingaff" data-aid="YOUR_PRODUCT_ID" data-target_aid="YOUR_AFFILIATE_ID" data-prod="nsb" data-width="400" data-height="300" data-dest_id="" data-dest_type="city">
<!-- Widget loads here -->
</ins>
<script type="text/javascript">
(function(d, sc, u) {
  var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = u + '?v=' + (+new Date());
  p.parentNode.insertBefore(s, p);
})(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

Copia todo el bloque de código (tanto la etiqueta <ins> como la etiqueta <script> ). El script carga la biblioteca de JavaScript de Booking.com que hace aparecer el widget.

Si usas el widget de mapa o el buscador de ofertas: la estructura del código es idéntica, solo cambian los valores de data-prod (map para el widget de mapa, df para el buscador de ofertas).

Paso 2: Añade un elemento de código incrustado a tu página de Webflow

Abre tu proyecto de Webflow en el Diseñador.

Ve a la página donde quieres poner el widget (por ejemplo, una guía de destino como "Los mejores hoteles en Barcelona"):

1. Abre el panel Añadir (icono de más) a la izquierda
2. Desplázate hasta Componentes → Código incrustado
3. Arrastra el elemento de código incrustado a la parte de la página donde quieras que aparezca el widget

El elemento de código incrustado se muestra como un cuadro gris en el Diseñador. Es normal. Los widgets de Booking.com solo se visualizan en sitios publicados o en el modo de vista previa de Webflow con el código personalizado activado.

Visitantes de la UE y consentimiento de cookies

Los widgets de Booking.com cargan JavaScript de terceros desde aff.bstatic.com. Si tu sitio en Webflow recibe visitantes de la UE o el Reino Unido, es probable que este script esté sujeto a tus obligaciones de consentimiento de cookies. Asegúrate de que tu banner de consentimiento incluya scripts de terceros y de que el widget de Booking.com solo se active una vez obtenido el consentimiento.

La herramienta de consentimiento de cookies integrada en Webflow o una externa como Osano pueden gestionar esto.

Saltarse este paso no solo es un riesgo legal; los scripts sin consentimiento también pueden activar bloqueadores de anuncios e impedir que el widget se muestre a una parte de tu audiencia.

Paso 3: Pega el código de tu widget de Booking.com en el elemento de código incrustado

Haz clic en el elemento de código incrustado que acabas de añadir. El panel de configuración se abrirá automáticamente. Verás un campo de texto grande llamado "Editor de código incrustado".

Pega el código completo del widget que copiaste del Centro de Partners de Booking.com en este campo.

Por último, haz clic en Guardar y cerrar.

En este punto, el elemento incrustado funciona técnicamente, pero es probable que tengas problemas de adaptabilidad en móviles. No lo publiques todavía.

Paso 4: Haz que el widget sea adaptable (es fundamental para móviles)

Los widgets de Booking.com utilizan dimensiones fijas en píxeles de forma predeterminada (data-width="400" data-height="300"). En pantallas móviles, esto genera un desbordamiento horizontal y barras de desplazamiento, lo cual es una experiencia de usuario terrible.

He probado dos enfoques en muchos sitios de viajes. Esto es lo que realmente funciona:

Opción A: Método del contenedor CSS (recomendado)

Este método utiliza el truco de la relación de aspecto con padding-top para mantener las proporciones del widget en todos los tamaños de pantalla.

Primero, envuelve tu elemento de código incrustado en un bloque Div:

• Añade un bloque Div a tu página
• Asígnale un nombre de clase como booking-widget-wrapper
• Mueve tu elemento incrustado dentro de este Div

Segundo, dale estilo al Div contenedor:

• Posición: Relativa
• Padding superior: 75% (para una relación de aspecto de 4:3; usa 56.25% para 16:9)
• Altura: 0px
• Ancho: 100%

Luego, modifica el código de incrustación de tu widget para que tenga una posición absoluta:

En tu elemento incrustado, busca la etiqueta <ins> y añade este atributo:

style="position:absolute; top:0; left:0; width:100%; height:100%;"

Tu código de incrustación actualizado debería verse así:

<ins class="bookingaff" data-aid="YOUR_PRODUCT_ID" data-target_aid="YOUR_AFFILIATE_ID" data-prod="nsb" data-width="100%" data-height="100%" style="position:absolute; top:0; left:0; width:100%; height:100%;">
<!-- Widget loads here -->
</ins>
<script type="text/javascript">
(function(d, sc, u) {
  var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = u + '?v=' + (+new Date());
  p.parentNode.insertBefore(s, p);
})(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

Publica tu sitio y pruébalo en un dispositivo móvil real. El widget debería ajustarse perfectamente dentro de tu contenedor sin mostrar una barra de desplazamiento horizontal. Si aún ves desbordamiento, confirma que el Div contenedor tenga position: relative configurado en el panel de Estilo de Webflow. El posicionamiento absoluto en el elemento incrustado solo funciona si el elemento padre tiene una posición definida.

Opción B: Método de estilo en línea (solución rápida)

Si solo necesitas una capacidad de respuesta básica sin un control perfecto de la relación de aspecto:

Cambia data-width="400" por data-width="100%" en el código de tu widget y elimina el valor fijo de data-height o establécelo en auto.

Esto funciona, pero puede causar saltos de altura a medida que se carga el contenido. Prefiero la Opción A para sitios en producción.

Paso 5: Configurar dimensiones específicas por punto de interrupción (opcional)

El código personalizado de Webflow es independiente del visor. Si estableces el ancho o la altura en el código incrustado, se aplicará a todos los puntos de interrupción.

Para un dimensionamiento específico por punto de interrupción:

1. Crea elementos incrustados separados para los visores de escritorio, tableta y móvil
2. Usa la configuración de visualización de Webflow para ocultar o mostrar los elementos incrustados adecuados según el punto de interrupción
3. Ajusta los valores de data-width y data-height de forma distinta en cada elemento incrustado

Aquí tienes un ejemplo:

• Escritorio: 600px de ancho
• Tableta: 450px de ancho
• Móvil: 100% de ancho

Esto requiere más trabajo, pero te da un control preciso. Para la mayoría de los sitios, el método del contenedor CSS (Opción A en el Paso 4) gestiona la capacidad de respuesta sin necesidad de duplicar códigos incrustados.

Paso 6: Publicar y probar en todos los dispositivos

Cuando termines, haz clic en Publicar en la esquina superior derecha del Diseñador de Webflow.

Publica en tu dominio de prueba o en tu sitio en vivo.

Aquí tienes tu lista de verificación para las pruebas:

• Escritorio: El widget se muestra en el tamaño previsto, sin desbordamiento horizontal
• Tablet: El widget se reduce proporcionalmente, sin barras de desplazamiento
• Móvil (crítico): El widget ocupa todo el ancho del contenedor, mantiene la relación de aspecto y no corta el contenido
• Clic de prueba: Haz clic en el widget del buscador y verifica que te redirija a Booking.com con tu ID de afiliado en la URL (busca el parámetro aid=YOUR_AFFILIATE_ID)

Si ves barras de desplazamiento en el móvil: vuelve al paso 4 e implementa el método del contenedor CSS. Las dimensiones fijas en píxeles son la causa número uno de fallos en las integraciones móviles.

¿Por qué fallan los widgets de Booking.com en Webflow? Consejos para solucionar problemas

La mayoría de los fallos con los widgets de Booking.com en Webflow se deben a cuatro motivos: copiar el código de forma incompleta, probarlo en el Diseñador en lugar de en el sitio publicado, discrepancias en el registro del dominio y desbordamiento en móviles por usar dimensiones fijas en píxeles.

Aquí te explicamos cómo diagnosticar y solucionar cada uno.

El widgetno aparece en absoluto

Causas:

• Lo estás viendo en el Diseñador de Webflow en lugar de en el sitio publicado; los widgets solo se muestran después de publicar
• Falta la etiqueta <script> en el código; necesitas TANTO la etiqueta <ins> como la <script> que carga el JavaScript de Booking.com
• Cuenta de afiliado no aprobada o suspendida; inicia sesión en el Centro de Partners para verificar el estado
• Extensiones de bloqueo de anuncios que bloquean el dominio de Booking.com (aff.bstatic.com)

Solución: Publica tu sitio, desactiva los bloqueadores de anuncios y verifica que hayas copiado el código completo, incluida la etiqueta script.

El widget aparece pero se corta o muestra barras de desplazamiento

Causa: Las dimensiones fijas en píxeles (data-width="400") no se adaptan al ancho de las pantallas móviles.

Solución: Implementa el método del contenedor CSS del paso 4, opción A. Configura el contenedor con padding-top: 75% y posiciona el elemento incrustado de forma absoluta con width: 100%; height: 100%.

La altura del widget es demasiado pequeña o demasiado grande

Causa: La relación de aspecto no coincide con las dimensiones reales de tu contenido.

Solución: Ajusta el porcentaje de padding-top en el Div contenedor:

• Relación 16:9 = 56.25% de padding-top
• Relación de aspecto 4:3 = 75% padding-top
• Cuadrado (1:1) = 100% padding-top

Usa las herramientas de desarrollador de Chrome para inspeccionar las dimensiones del widget renderizado y calcular: (height ÷ width) × 100 = padding-top %

El widgetse muestra, pero el enlace de afiliado no incluye tu ID

Causa: Has copiado un código de inserción genérico en lugar del código generado desde TU cuenta de Partner Center.

Solución: Inicia sesión en Partner Center → Marketplace → Productos y vuelve a generar el código. Busca data-target_aid="YOUR_AFFILIATE_ID" en el código de inserción. Si este valor está vacío o falta, no ganarás comisiones.

Crea experiencias de reserva más integradas en Webflow

Los widgets de afiliados redirigen a los visitantes a Booking.com para completar su transacción. Esto funciona bien para monetizar contenido de viajes. Pero si gestionas un negocio de servicios, como consultas, tours o eventos, querrás que el proceso de reserva permanezca en tu sitio.

Explora la integración de Calendly con Webflow para programar citas en tus negocios basados en reservas (tours, experiencias, consultas).

Explora la documentación para desarrolladores de Webflow para una integración a nivel de API (obteniendo disponibilidad en tiempo real directamente desde Booking.com).