Motor de reservas de grupos - Cómo crear un Widget de Reservas de grupo (opción avanzada)

Juss Reyes

Actualización 27 de septiembre de 2024 16:25

Este artículo explica qué es un widget de reservas y cómo construir un Widget de reservas en grupo para el Motor de reservas de Cloudbeds.

Cosas importantes a tener en cuenta

Este artículo se proporciona como un recurso informativo adicional para aquellos que ya están familiarizados con HTML y CSS.
Los pasos proporcionados aquí solo se sugieren para desarrolladores web experimentados. Es posible que el código se vuelva obsoleto y requiera trabajo adicional.
Cloudbeds no ofrece asistencia con la creación de un widget de reservas en grupo, o con el diseño/desarrollo externo de sitios web de hoteles.
Nosotros sí ofrecemos:
- Sitios web construidos profesionalmente, totalmente integrados con el Motor de reservas de Cloudbeds. Obtén más información sobre Sitios web de Cloudbeds aquí.
- Servicios de personalización del Motor de reservas, haz clic aquí para obtener más información.

Información general

Un widget de reservas es una funcionalidad proporcionada por Cloudbeds como parte del Producto de Motor de reservas, donde el hotel puede integrar en sus propios sitios web un formulario con campos simples (fecha de llegada y fecha de salida) que, al enviarse, redirigirá al huésped a la página de reservas, con los parámetros seleccionados.

De la misma manera, el objetivo de un widget de reservas en grupo es replicar la misma funcionalidad, pero admitiendo varias propiedades. Está destinado a organizaciones y grupos de hoteles que tienen más de una propiedad con el Motor de reservas configurado, para facilitar la búsqueda y reserva de huéspedes.

Aprende más sobre Organización y Usuarios.

Tipos de widgets

Widget basado en la propiedad

Un widget basado en la propiedad es un widget que permite al huésped elegir en qué hotel buscar disponibilidad. El envío del widget transferirá al huésped directamente a la página del Motor de reservas del hotel con los parámetros seleccionados.

Como se trata de un formulario HTML estándar, se puede adaptar a las necesidades del sitio web de la asociación con el diseño, CSS, etc. Siempre y cuando siga estos estándares (nombres y formato de parámetros).

Esto se puede lograr utilizando un formulario HTML como el ejemplo a continuación:

<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
            <input type="hidden" name="date_format" value="Y-m-d" />
            <p>Propiedad:</p>
                <select name="widget_property">
                <option value="$property_id">$property_name</option>
                <option value="$property_id">$property_name</option>
                </select>
            <p>Llegada:</p>
            <input type="date" name="checkin" />
            <p>Salida:</p>
            <input type="date" name="checkout" />
            <input type="submit" />
            </form>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
            <script>
                $( "#widgetBookingForm" ).on( "submit", function( event ) {
                    event.preventDefault();
                    var propertyName = $("[name=widget_property]").val();
                    var checkinDate = $("[name=checkin]").val();
                    var checkoutDate = $("[name=checkout]").val();
                    var url = $(this).attr('action');
                    url = url+propertyName+"#checkin="+checkinDate+"&checkout="+checkoutDate;
                    window.location.href = url;
                    });
            </script>

Leyenda del código:

$property_id: Uno de los ID de propiedad que será compatible con el widget. Si necesita ayuda para encontrarlo, por favor contacte al equipo de soporte.
$property_name: Nombre del ID de propiedad identificado por $property_id

Widget basado en la ciudad

Este tipo de widget no redirigirá al huésped a la página del Motor de reservas, en su lugar, será redirigido a la página del portal de la asociación que mostrará los resultados de todas las propiedades que pertenecen a la asociación filtradas por la ciudad seleccionada.

La funcionalidad básica de este widget es que debería redirigir al huésped a una URL formateada, que al final estará en el siguiente estándar:

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

Si la URL está formateada correctamente, el usuario será redirigido a la página del portal, con la ciudad y las fechas preseleccionadas.

Como se trata de un formulario HTML estándar, se puede adaptar a las necesidades del sitio web de la asociación con diseño, CSS, etc. Siempre y cuando siga estos estándares (nombres y formato de parámetros).

Esto se puede hacer en cualquier lenguaje, del lado del cliente o del servidor, el ejemplo a continuación utiliza HTML, jQuery y JavaScript:

<form action="https://example.cloudbeds.com/#/" method="get">
<p>Ciudad:</p>
<select name="city">
<option value="all">Todas las ciudades</option>
<option>Barcelona</option>
<option>Madrid</option>
</select>
<p>Llegada:</p>
<input type="text" name="check_in" />
<p>Salida:</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 del código:

$city: Nombre de la ciudad seleccionada. Se utilizará para filtrar los resultados.
$check_in: Fecha de llegada. Se preseleccionará en la página de reservas.
$check_out: Fecha de salida. Se preseleccionará en la página de reservas.
$association_portal_url: URL de la página del portal relacionada con la asociación. La URL debería ser similar a: “nombredeasociacion.cloudbeds.com”

Explora el Motor de reservas de grupos