Nuestro nuevo motor de reservas está pensado para ser incrustado en tu página web, sin redirecciones y sin ventanas flotantes.
Integrarlo es muy sencillo, además ofrecemos un abanico de posibilidades para personalizar el motor, por ahora limitado, pero que irá creciendo en futuras versiones.
Selector de fechas (Básico):
<div class="hotelgest-engine" style="display:flex">
<div class="dfrom" style="margin-right:10px">
<label>De:</label>
<input id="dfromDate" name="dfromDate" style="border-radius:50px;margin: 10px;padding: 10px;" type="date" value="">
</div>
<div class="dto" style="margin-right:10px">
<label>Hasta:</label>
<input id="dtoDate" name="dtoDate" style="border-radius:50px;margin: 10px;padding: 10px;" type="date" value="">
</div>
<div class="btn">
<input onclick='window.open("https://booking.hotelgest.com/v4?pcode=1&dfrom="+document.getElementById("dfromDate").value+"&dto="+document.getElementById("dtoDate").value,"_blank")' style="padding:10px 20px;margin:10px 0 0 0;align:center;background-color:#140d62;border:0;color:#fff;font-size:14px;font-weight:500;border-radius:50px" type="button" value="Ver disponibilidad">
</div>
</div>
<script>
var formatFixMonth,formatFixDay,date=new Date;
formatFixMonth=date.getMonth()<9?0:"",formatFixDay=date.getDate()<9?0:"";
var today=date.getFullYear()+"-"+formatFixMonth+(date.getMonth()+1)+"-"+formatFixDay+date.getDate();date.setDate(date.getDate()+1),formatFixMonth=date.getMonth()<9?0:"",formatFixDay=date.getDate()<9?0:"";
var tomorrow=date.getFullYear()+"-"+formatFixMonth+(date.getMonth()+1)+"-"+formatFixDay+date.getDate();
document.getElementById("dfromDate").value=today,document.getElementById("dtoDate").value=tomorrow
</script>
Al introducir este script, nos generará este buscador:
Ver resultado en: codepen
Recuerda cambiar la variable pcode por el código de tu hotel. En el caso de tener multi-propiedad, nuestro motor es uno de los pocos del mercado que soporta múltiples cuentas en la misma llamada. Para ello debes poner el pcode separado por comas: pcode: 'XXX,YYY,AAA,BBB'
Selector de fecha (Avanzado):
<script type="text/javascript" src="https://booking.hotelgest.com/v4/assets/js/main.js"></script>
<div id="hgContainer_1234" style=" width: 90%;margin: 0 auto;" class="container-fluid hgContainer"></div>
<script>
var optionsHG = {
pcode: '28,186,260', //pon el código de tu hotel
typo: 'calendar', //required
lang: 'es', //required
index: 1234, //required id container
min_occupancy: 1,//required
max_occupancy: 6,//required
target: '_blank' , /* optional */
analitics: 'UA-26990615-2',
//redirect_url: 'https://ejemplo.com/booking'
};
iniHG();
</script>
Al introducir este script, nos generará este buscador:
Ver resultado en codepen
Recuerda cambiar la variable pcode por el código de tu hotel. En el caso de tener multi-propiedad, nuestro motor es uno de los pocos del mercado que soporta múltiples cuentas en la misma llamada. Para ello debes poner el pcode separado por comas: pcode: 'XXX,YYY,AAA,BBB'
Otras personalizaciones
Puedes modificar la ocupación mínima cambiando el valor de min_occupacy por el valor que quieras:
min_occupancy: 4,//required
Si queremos personalizar el destino del motor, que por defecto va a nuestro motor y preferimos integrarlo en una landing propia, hay que activar la variable que está comentada:
//redirect_url: 'https://ejemplo.com/booking'
En esa página de destino a la que queremos apuntar hay que añadir el código del motor embedido, según la personalización que queramos, como por ejemplo como se detalle a continuación:
Si queremos que el motor filtre por tipo de habitación (rtcode) debemos seguir el siguiente codepen:
Motor embedido:
Si de lo contrario queremos integrar directamente el motor, podemos hacerlo añadiendo este script:
<script src="https://cdn.lr-in.com/LogRocket.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://booking.hotelgest.com/v4/assets/js/main.js"></script>
<div id="hgContainer_1234" style=" width: 100%;margin: 0 auto;" class="container-fluid hgContainer"></div>
<script>
var optionsHG = {
pcode: '245', //pon el código de tu hotel asi 'XXX,YYY,AAA,BBB'
typo: 'apartments', //required
lang: 'es', //required
index: 1234, //required id container
min_occupancy: 1,//required
max_occupancy: 6,//required
num_room_col: 3, // 2 or 3
analitics: 'UA-26990615-2',
};
iniHG();
</script>
Si no queremos que aparezca el mapa con las ubicaciones deberemos cambiar la variable num_room_col a 1.
Ver resultado en codepen
De nuevo recuerda cambiar la variable pcode por el código de tu hotel. En el caso de tener multi-propiedad, nuestro motor es uno de los pocos del mercado que soporta múltiples cuentas en la misma llamada. Para ello debes poner el pcode separado por comas: pcode: 'XXX,YYY,AAA,BBB'
Páginas de WIX o que no permiten la inserción de scripts.
En el caso que tengas problemas con WIX, deberemos añadir por iframe el enlace, de modo que quedaría así para el caso del motor con el mapa de ubicaciones:
<iframe scrolling="no" frameBorder="0" src="https://booking.hotelgest.com/v4/calendar.html?pcode=114" height="400" width="100%" allowtransparency="true">
Y así para el motor sin mapa de ubicación:
<iframe scrolling="no" frameBorder="0" src="https://booking.hotelgest.com/v4/calendar.html?pcode=114" height="400" width="100%" allowtransparency="true">
Idioma
El idioma se pasa automáticamente según el idioma del navegador, aunque es posible forzar que cargue el idioma deseado pasando la variable por URL:
&lang=en
en para inglés, fr para francés, ca para catalán, es para español y así con los idiomas definidos en el PMS. Ten en cuenta que si por ejemplo hay artículos, habitaciones, y promociones visibles en el motor pero no están traducidos, saldrán igualmente, pero sin nombre visible, por lo que aconsejamos traducirlos en todos los idiomas.
Redirigir a una tipología en concreto
Es posible definir una variable para ir directamente a una tipología de habitación o apartamento directamente, imagina un landing donde quieres que haya un botón que al pulsar va a parar directamente a esa tipología. Es tan sencillo como añadir esta variable a tu URL, además puedes añadir varios separándolos por comas:
&rtcode=NNN
Donde NNN es la identificador de la tipología del apartamento, puedes encontrar el identificador en Alojamiento - Habitaciones, escogiendo del desplegable la tipología que quieres.
Codepen
Aquí dejamos un ejemplo para que se pueda probar sin problema fácilmente:
Mapa
Por defecto, el motor de reservas va sin mapa.
Para tener el motor de reservas sin mapa, usaremos el siguiente enlace.
I para tener el motor de reservas con mapa, usaremos este enlace.
Simplemente tenemos que cambiar las "xxx" por el número de nuestro pcode.
Google Analytics
Ahora puedes medir tus campañas utilizando Google Analytics. Tanto si usas el motor por URL o embedido.
Motor por URL.
Para trackear cualquier evento que suceda basta con añadir tu código de analytics a la URL, de modo que quedaría así - recuerda sustituir nuestro código de analytics de ejemplo por el tuyo, si no, no recibirás el tráfico.
Motor embedido.
Añade el parámetro a tu script.
analitics: 'UA-26990615-2',
Personalizar respuesta de pagos (campaña de conversiones)
Nuestro motor de reservas v4 permite la posibilidad de contabilizar las reservas que se pagan y así tener un registro de las conversiones del motor. En el siguiente code pen encontrarán un ejemplo: https://codepen.io/hotelgest/pen/NWeyGrK
Parámetros:
tpv_redirect_success: ‘https://url_personalizado.com/success.html’
tpv_redirect_fail: ‘https://url_personalizado.com/fail.html’,
¿Dónde encontrar el pcode (código de propiedad)?
El pcode es el número identificativo del alojamiento en el pms, lo podremos encontrar en - Ajustes, justo ahí veremos "datos de la cuenta".
