Personalizar el motor de reservas - Cómo agregar un anuncio o banner a su página de disponibilidad

Seguir
  • Se puede agregar un anuncio (banner) o ventana emergente a su motor de reservas de mybookings para informar a sus huéspedes de noticias importantes en su propiedad sobre el COVID-19.
  • Si no puede acceder a la configuración indicada en el presente artículo, su usuario no tiene acceso a la configuración del motor de reservas. Contacte al dueño de la propiedad para que autorice su perfil de usuario. Para más información, véase Funciones y autorizaciones.

1. Diríjase a la sección Personalizar mybookings

  1. Haga clic en Configuración (icono de engranaje).
  2. Seleccione Personalizar mybookings en la sección Motor de reservas.
  3. Agregue el código de personalización en las casillas indicadas. Los códigos para los distintos tipos de anuncios se encuentran en las siguientes secciones.

2. Agregue los códigos de personalización en las casillas indicadas

A. Cómo agregar un anuncio grande en la ventana de disponibilidad

Se puede agregar un anuncio en la ventana de disponibilidad del sitio web de mybookings, como se ve en la siguiente captura de pantalla. También se puede personalizar el mensaje que leerán sus huéspedes.

Siga los siguientes pasos:

  1. Copie y pegue el siguiente código en la casilla Metaetiquetas personalizadas. Dependiendo del tipo de diseño de mybookings que use, agregue el código en la pestaña Modo de galería o Modo de lista.

Nota: se puede cambiar el tamaño y color de la fuente, así como el color del fondo, cambiando el texto resaltado en rojo.

<style>
/* Styling of the message added in the Booking Engine */
div.choose_room div.available_rooms div.col-md-9.padding-left-0.col-sm-12.col-xs-12 h5 {
color: white;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
background-color: red;
font-size: 19px;
}
</style>
  1. Copie y pegue el siguiente código en la casilla Pie de página personalizado de su página de reservas.

Nota: se puede personalizar el mensaje del anuncio cambiando el texto en rojo.

/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>
  1. Haga clic en Guardar.
Cómo agregar el anuncio en varios idiomas

Si desea agregar la traducción de un texto en varios idiomas, sólo debe duplicar el código agregado a la casilla Pie de página personalizado de su página de reservas a la misma casilla en otro idioma. Veamos los pasos a seguir:

  1. En la casilla Pie de página personalizado de su página de reserva, haga clic en el menú desplegable de idiomas.
  2. Seleccione el idioma deseado. A modo de ejemplo, seleccionaremos inglés.
  3. Copie y pegue el siguiente código y cambie el texto resaltado en rojo por la traducción de su anuncio al inglés.
/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>
  1. Repita el mismo proceso para los demás idiomas. Al terminar, haga clic en Guardar.

Esto es lo que verán sus huéspedes cuando seleccionen el idioma inglés en mybookings:

B. Cómo mostrar un anuncio emergente en el sitio web de mybookings

También se puede agregar una ventana emergente con el anuncio que verán los huéspedes al entrar al sitio web de su motor de reservas. Los visitantes a su sitio web pueden cerrar la ventana emergente haciendo clic en la X o en cualquier zona fuera de la ventana emergente.

Siga los siguiente pasos:

  1. Copie y pegue el siguiente código en la casilla Metaetiquetas personalizadas. Dependiendo del tipo de diseño de mybookings que use, agregue el código en la pestaña Modo de galería o Modo de lista.

Nota: se puede modificar el texto del anuncio cambiando el texto resaltado en rojo.

<style>
/* Styling of the pop-up window */
.modal-open .modal {
z-index: 99999; /* Bring the pop-up in front of all of content*/
margin-top: 10%; /* Move the pop-up box to the center */
}
</style>
<div id="popupmodal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2 class="modal-title">Important message</h2>
      </div>
      <div class="modal-body">
        <h4> Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call. </h4>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div> 
  1. Copie y pegue el siguiente código en la casilla Encabezado personalizado de su página de reservas.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>
  1. Copie y pegue el siguiente código en la casilla Pie de página personalizado de su página de reservas.
<script>
	 $(window).load(function(){
       $('#popupmodal').modal('show');
    });
</script>
  1. Haga clic en Guardar.
Tecnología de Zendesk