Añadir el Motor de reservas de Cloudbeds a tu sitio web mediante un iframe

Un iframe es un elemento HTML utilizado para incrustar una página web dentro de otra. Este artículo muestra cómo incrustar el Motor de reservas de Cloudbeds en tu sitio web utilizando un iframe.

Consulta otras opciones para agregar el Motor de reservas de Cloudbeds a tu sitio web aquí.

Información general

Utiliza un iframe para incorporar la página de tu Motor de reservas de Cloudbeds de forma transparente en tu propio sitio web, todo sin redirigir a tus huéspedes a un sitio externo. En otras palabras, tus huéspedes pueden reservar directamente desde la página en la que ya se encuentran sin tener que navegar a otro lugar.

Así es como aparecería el iframe del motor de reservas en un sitio web de propiedad (El área resaltada a continuación es el código del iframe del Motor de reservas de Cloudbeds pegado en el sitio web).

El Motor de reservas de Cloudbeds está siendo actualizado a una nueva versión. Obtén más información: Motor de reservas de Cloudbeds Plus (noviembre 2023)

Incrustar el iframe del motor de reservas de Cloudbeds en tu sitio web

  1. En el menú de Cuenta, ve a la página de Configuración y haz clic en el Motor de reservas.
  2. Copia tu URL del Motor de reservas.
  3. Agrega el parámetro ?widget=1 al final de la URL para la versión mínima del iframe (o salta este paso y continúa con el paso 5 para incrustar la página completa del motor de reservas).

La página original del motor de reservas muestra muchísima información, lo cual puede ser un poco excesivo al mostrarse en un iframe o integrarse en una página web. Para simplificar, creamos una versión mínima del motor de reservas, a la que se puede acceder agregando el parámetro ?widget=1.

Este parámetro ?widget=1 elimina los siguientes elementos:

  • Encabezado (logo, nombre de la propiedad, fotos de la propiedad).
  • Políticas, mapa y comodidades.
  • Términos y condiciones.
  • Menú desplegable de Idioma y Moneda.
  • Las secciones de Encabezado personalizado y Pie de página personalizado se eliminarán. Por lo tanto, todo el código en esas secciones no funcionará en la versión mínima del MR. En este caso, guarda el código en la sección de Metaetiquetas personalizadas.

Para mostrar toda la página del motor de reservas dentro del iframe, no agregues ?widget=1 como parámetro a tu URL.

  1. Inserta la URL en el código del iframe proporcionado a continuación.

Para un iframe mínimo:

<iframe src="TU_URL_DEL_MOTOR_DE_RESERVAS?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

<!-- Agregar script para redimensionar automáticamente el iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

Para un iframe completo:

<iframe src="TU_URL_DEL_MOTOR_DE_RESERVAS" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
<!-- Agregar script para redimensionar automáticamente el iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>
  1. Copia todo el código del iframe y pégalo en tu sitio web:

Este paso debe ser realizado únicamente por el establecimiento o el diseñador de tu sitio web.

¿Tienes alguna duda sobre el iframe del Motor de reservas de Cloudbeds? Consulta nuestras preguntas frecuentes.

Otras opciones para agregar el Motor de reservas a tu sitio web

Encuentra a continuación algunas otras opciones para agregar el Motor de reservas de Cloudbeds a tu sitio web, además del iframe. Este artículo ofrece tres opciones diferentes para completar este proceso. Para una configuración avanzada del sitio web, te recomendamos que contactes directamente a tu diseñador web o desarrollador web.

  • Opción 1. Enlace directo a tu Motor de reservas: toma cualquier enlace en tu sitio web e ingrésalo directamente a la URL de tu motor de reservas. Aquí tienes un ejemplo rápido y sencillo del HTML para crear este enlace. Solo debes reemplazar la URL aquí href="https://hotels.cloudbeds.com/reservation/IDOFCODEHERE" con el enlace de tu Motor de reservas:
<a href="https://hotels.cloudbeds.com/reservation/IDOFCODEHERE">Reservar</a>
Haz clic para copiar
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 6 de 10

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.