El motor de reservas de mygroup ofrece varias opciones de personalización para quienes están familiarizados con el uso de HTML / CSS o cuentan con los servicios de un diseñador web.
Cloudbeds no ofrece servicios ni soporte de diseño o desarrollo web, pero si desea obtener información general sobre el uso de HTML y CSS, en los siguientes enlaces encontrará estupendos medios para empezar [en inglés]:
Empecemos
Inicie sesión en su cuenta de mygroup:
- Haga clic en su usuario en la esquina superior derecha.
- Seleccione Settings [Configuración].
- Seleccione Customize Booking Engine [Personalizar el motor de reservas].
Puede usar el recuadro de metaetiquetas personalizadas de la sección Customize Booking Engine [Personalizar el motor de reservas] para agregar códigos de javascript o CSS, entre otros, a la sección principal del HTML de su sitio web de mygroup.
Por favor no ingrese texto normal o simple a este recuadro, ya que puede afectar seriamente la configuración de la página.
Ejemplos de metaetiquetas personalizadas
A continuación, incluimos algunos ejemplos de códigos CSS personalizados. Debe cambiar los valores en el código de acuerdo a sus necesidades. Puede cambiar los colores usando el código hex HTML. Para más información sobre la herramienta de color de HTML, consulte esta página [en inglés].
Nota: los códigos que ingrese deberán ir entre <style> código </style> como se muestra a continuación:
<style>
.price_box a {background:#aaa}
</style>Códigos para el campo Empezando desde
Reemplace el código de color #008000 por el código de cualquier otro color y agréguelo a la casilla Custom header for your hotel booking page [Encabezado personalizado para la página de reservas de su hotel].
<style>
.starting_from i.fa-tag:hover {
color: #008000;
cursor: pointer;
}
</style>
Códigos para la etiqueta No disponible
Cambie el color de esta etiqueta cuando pase el cursor sobre ella. Reemplace el código de color #008000 por el de cualquier otro color y agréguelo a la casilla Custom header for your hotel booking page [Encabezado personalizado para la página de reservas de su hotel].
<style>
.not_available i.fa-tag:hover {
color: #008000;
cursor: pointer;
}
</style>
Cambie #aaa por el código del color que prefiera. Agregue el siguiente código a la sección Custom header for your hotel booking page [Encabezado personalizado para la página de reservas de su hotel].
<style>
.not_available {background:#aaa}
</style>
En el siguiente código, cambie el texto SU TEXTO AQUÍ por el texto que desee. Pegue este código en la sección Custom Meta Tags [Metaetiquetas personalizadas].
<style>
.price_box .not_available {
font-size: 0;
}
.price_box .not_available:after {
content: " SU TEXTO AQUI";
font-size: 10px;
}
</style>
Códigos para el botón Reservar
Copie y pegue el siguiente código en la sección Custom header for your hotel booking page [Encabezado personalizado para la página de reservas de su hotel] y cambie #fff por el código del color que desee.
<style>
.sidebar_white_box button {
background: #fff none repeat scroll 0 0;
}
</style>
Con este código podrá cambiar el color del botón cuando pase el cursor sobre él. Copie y pegue el siguiente código en la sección Custom header for your hotel booking page [Encabezado personalizado para la página de reservas de su hotel] y cambie #000 por el código del color que desee.
<style>
div.sidebar_white_box.form-group button:hover
{
background: #000;
}
</style>
Use este código para cambiar el color del texto. Cambie el valor #fff por el código del color que desee.
<style>
div.sidebar_white_box.form-group button
{
color: #fff
}
</style>
Botón Ir (GO)
De manera predeterminada, hacer clic en el botón Ir lo llevará al sitio web de mybookings de la propiedad seleccionada (en caso de tener una página de inicio).
Cambie la página de inicio (o landing site) por su sitio web o cualquier otro insertando el URL de la página en la casilla Promotion Code / External Use [Código promocional / URL externo] en la pestaña Properties [Propiedades] de mygroups.
- Haga clic en Properties [Propiedades]
- Cambie el enlace a la URL externa
- Haga clic en Save [Guardar]
Veamos un ejemplo:
También puede agregar el código promocional de su plan de tarifas para dirigir a sus huéspedes al sitio web de mybookings con el plan de tarifas correspondiente.
Veamos un ejemplo:
Reemplazar imágenes predeterminadas
Pegue el siguiente código en la sección Custom Meta Tags [Metaetiquetas personalizadas] y reemplace las oraciones en rojo con la URL de su mapa en Google Maps.
<style>
#map_canvas, #map_canvas_big {
display: none;
}
</style>
<script type="text/javascript">
window.addEventListener("load", function(event) {
//append google maps iframe
var d1 = document.getElementById('map_canvas');
d1.insertAdjacentHTML('afterend', '<iframe src="Pegue su URL de Google Maps aquí" width="300" height="200">');
}, false);
</script>
<script type="text/javascript">
window.addEventListener("load", function(event) {
//append google maps iframe
var d1 = document.getElementById('map_canvas_big');
d1.insertAdjacentHTML('afterend', '<iframe src="Pegue su URL de Google Maps aquí" width="100%" height="274">');
}, false);
</script>
Comentarios
Inicie sesión para dejar un comentario.