Opciones avanzadas: cómo crear un widget de reservas para grupos

Juss Reyes

Actualización 30 de junio de 2020 14:24

Cloudbeds proporciona este artículo como recurso informativo adicional para los usuarios que se encuentran familiarizados con el uso de HTML y CSS. Los pasos indicados a continuación solo se recomiendan para desarrolladores web con experiencia en ese campo. Es posible que, con el paso del tiempo, el código se encuentre desactualizado y requiera modificaciones adicionales.

TOME EN CUENTA LO SIGUIENTE: Cloudbeds no ofrece asistencia en la creación de widgets de reservas en grupo, en la personalización del motor de reservas ni en el diseño o desarrollo del sitio web de su hotel.

¿Qué es un widget de reservas?

Un widget de reservas es una función que proporciona Cloudbeds como parte de su producto mybookings, donde el hotel puede integrar, con sus propios sitios web, un formulario con casillas simples (como fecha de check-in y check-out) que, al enviarlo, redirigirá al huésped a la página de reserva incluyendo automáticamente los parámetros seleccionados.

Del mismo modo, el widget de reservas para grupos pretende replicar la misma funcionalidad, pero admitiendo múltiples propiedades. Dicha herramienta está destinada a asociaciones y grupos de hoteles que tienen más de una propiedad configurada en mybookings, para así facilitar la búsqueda y reserva por parte de los huéspedes.

Tipos de widget

Widget basado en la propiedad

Un widget basado en la propiedad es una herramienta que permite al huésped elegir en cuál hotel desea consultar la disponibilidad. Al seleccionar el hotel, se transferirá al huésped directamente a la página de mybookings correspondiente a dicho hotel y con los parámetros seleccionados.

Debido a que se trata de un formulario HTML estándar, este se puede adaptar a las necesidades del sitio web del grupo con respecto al diseño, CSS, entre otros. Para lograr esto, deberá seguir los estándares indicados (nombre y formato de los parámetros).

Deberá utilizar un formulario HTML, justo como se muestra en el ejemplo a continuación.

<form action="https://hotels.cloudbeds.com/reservas" method="post">
<input type="hidden" name="date_format" value="Y-m-d" />
<p>Property:</p>
<select name="widget_property">
<option value="$property_id">$property_name</option>
.
.
.
<option value="$property_id">$property_name</option>
</select>
<p>Check-In:</p>
<input type="date" name="widget_date" />
<p>Check-Out:</p>
<input type="date" name="widget_date_to" />
<input type="submit" />
</form>

Leyenda:

$property_id: ID de la propiedad que será utilizada junto con el widget. Si necesita ayuda para encontrar esta ID, contacte al equipo de soporte.
$property_name: nombre en el ID de la propiedad. Podrá encontrarlo junto a «$property_id».

Widget basado en la ciudad

Este tipo de widget no redirigirá al huésped a la página mybookings, sino que lo redirigirá a la página del portal de su asociación o grupo hotelero, donde se mostrarán los resultados de todas las propiedades que pertenecen este grupo filtradas por la ciudad seleccionada.

La función básica de este widget es redirigir al huésped a una URL formateada, cuyo formato deberá configurarse bajo el siguiente estándar:

https://$association_portal_url/#/?city=$city&check_in=$check_in&check_out=$check_out

Si el formato de la URL se agrega correctamente, el usuario será redirigido a la página web con la ciudad y las fechas que seleccionó previamente.

Debido a que se trata de un formulario HTML estándar, este se puede adaptar a las necesidades del sitio web del grupo con respecto al diseño o CSS, entre otros. Para lograr esto, deberá seguir los estándares indicados (nombre y formato de los parámetros).

Esto aplica para cualquier idioma, cliente o servidor. El siguiente ejemplo utiliza HTML, jQuery y JavaScript.

<form action="https://example.cloudbeds.com/#/" method="get">
<p>City:</p>
<select name="city">
<option value="all">All Cities</option>
<option>Barcelona</option>
<option>Madrid</option>
</select>
<p>Check-In:</p>
<input type="text" name="check_in" />
<p>Check-Out:</p>
<input type="text" name="check_out" />
<input type="submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var params = $(this).serialize();
var url = $(this).attr('action');
url = url+'?'+params;
window.location.href = url;
});
</script>

Leyenda:

$city: nombre de la ciudad seleccionada. Se usará para filtrar los resultados.
$check_in: fecha de entrada [o check-in]. Esta se seleccionará previamente en la página de reservas.
$check_out: fecha de salida [o check-out]. Esta se seleccionará previamente en la página de reservas.
$association_portal_url: URL del portal de la asociación o grupo hotelero. La URL se deberá ver así: nombredelgrupo.cloudbeds.com