Cómo agregar el motor de reservas de Cloudbeds a su sitio web mediante un iframe

Seguir

Un iframe es un elemento HTML que se utiliza para incrustar una página web en otra. Por ejemplo, desea insertar su página del motor de reservas de Cloudbeds en su sitio web como fuente principal, pero no desea redirigir a sus huéspedes a un sitio web externo.

Consulte a continuación cómo incrustar el motor de reservas de Cloudbeds en su sitio web mediante un iframe.

Si desea agregar el widget del motor de reservas en su sitio web, consulte este artículo. También puede consultar cómo agregar el motor de reservas de mygroup a su sitio web.

Así es como se ve el iframe del motor de reservas en un sitio web:

Su diseñador web puede personalizar el aspecto del iframe para que coincida con el estilo de su sitio web. ¡Contáctenos para más información sobre los servicios de Cloudbeds Websites!

Cómo insertar el iframe del motor de reservas de Cloudbeds en su sitio web

  1. Haga clic en Configuración.
  2. En el menú de motor de reservas, haga clic en mybookings.
  3. Copie su URL de mybookings.
  4. Agregue el parámetro ?widget=1  al final de la URL para obtener una versión reducida del motor de reservas (omita este paso si desea insertar la página completa del motor de reservas).

La página original del motor de reservas muestra mucha información que puede resultar excesiva cuando se muestra en un iframe o se integra en una página web. Para simplificar la información, creamos una versión reducida del motor de reservas al que se puede acceder agregando el parámetro  ?widget=1.

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

  • Encabezado (logo, property name, property photos)
  • Políticas, términos y condiciones
  • Mapa
  • Comodidades y servicios
  • Menú desplegable de idioma y divisa
  • Las secciones Encabezado personalizado y Pie de página personalizado se eliminarán. Por lo tanto, todo el código de esas secciones no funcionará en la versión reducida del motor de reservas. En este caso, guarde el código en la sección Metaetiquetas personalizadas.

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

  1. Inserte la URL en el código iframe que se proporciona a continuación.

Para un iframe reducido:

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

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

Para un iframe completo:

<iframe src="YOUR_MYBOOKINGS_URL" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>
  1. Copie todo el código iframe y péguelo en su sitio web:

Este paso solo debe realizarlo la propiedad o el diseñador de su sitio web.

Preguntas frecuentes

Security and PCI Certification Seguridad y Certificación PCI

El motor de reservas de Cloudbeds utiliza seguridad SSL para garantizar que todos los datos transmitidos entre nuestros servidores web y el navegador de un huésped permanezcan privados e integrales. Para obtener consejos sobre cómo garantizar que SSL se implemente correctamente en una solución iframe, consulte nuestro artículo Medidas de seguridad y certificación PCI DSS de Cloudbeds.

¿Por qué los códigos del motor de reservas de Cloudbeds no funcionan cuando está configurado en el sitio web como un iframe?

Los códigos del motor de reservas de Cloudbeds guardados en la sección Encabezado/Pie de página personalizado no funcionarán si se guardan en un iframe con ?widget=1 en el enlace del motor de reserva. Esto elimina la sección de encabezado y pie de página junto con todos los códigos guardados en ellas. Para resolver esto, guarde todos los códigos en la sección Metaetiqueta personalizada.

¿Cómo se usan los iframes con WordPress?

Los sitios web de Wordpress requieren un método diferente para agregar un iframe y deben agregarse mediante un código corto. Para obtener más información sobre cómo agregar iframes a un sitio de Wordpress, consulte este artículo de Wordpress (en inglés).

¿Cómo se usan los iframes con Squarespace?

Agregue el bloque de código </> de las opciones y guarde el código iframe en este bloque de código. Es posible que los iframes no se expandan en primera instancia cuando se carga la página web. Esto sucede debido a la función de carga Ajax que está habilitada en Squarespace. Asegúrese de que esté deshabilitado. Más información al respecto se puede encontrar aquí.

¿Cómo se cambia el tamaño del iframe?

Puede emplear una de las siguientes opciones:

  1. Cambie los parámetros  width (ancho) y height (altura) en el código del iframe.
<iframe src="https://YOUR-MYBOOKINGS-URL?widget=1" width="100" height="500" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
  1. Cambie el tamaño del contenedor en el que inserta el iframe.

Los valores de altura agregados manualmente pueden afectar la visualización del iframe, ya que el código predeterminado (Paso 5) ya ajusta el tamaño, según el total de alojamientos disponibles.

¿Cómo se establece de forma predeterminada el idioma del motor de reservas en iframe?

De forma predeterminada, el idioma del motor de reservas está definido por la configuración del navegador invitado del sitio web (si accede al motor de reservas desde Estados Unidos, se configurará en inglés > si lo cambia manualmente a alemán, la próxima vez que acceda se configurará al alemán).

¿Es posible cambiar el idioma predeterminado que se muestra en el iframe del motor de reservas?

Sí, puede agregar cualquiera de los códigos de 2 dígitos de los idiomas admitidos en la URL para cambiar el idioma predeterminado para el iframe:

Ejemplo:

Predeterminado <iframe src="https://hotels.cloudbeds.com/reservation/rRmoV78?widget=1" width="976" height="976"></iframe>

Versión en español <iframe src="https://hotels.cloudbeds.com/es/reservation/rRmoV5?widget=1" width="976" height="976"></iframe>

The drop-down options (Adults/Children/Rooms) are hidden inside the iframe

 Agregue este código a continuación en la sección Metaetiquetas personalizadas. Puede cambiar los valores de píxel de  #wizard-container según las listas desplegables para hacerlos visibles.

<style>
#wizard-container{ margin-bottom: 130px !important; }
.search-panel-wrap { margin-top: 40px !important; }
</style>
Tecnología de Zendesk