Motor de Reservas de Grupos - Como criar um Widget de Reservas em Grupo (opção avançada)

Juss Reyes

Atualizado 16 de julho de 2024 08:20

Este artigo explica o que é um widget para reservas e como construir um Widget de Reservas em Grupo para o Motor de Reservas da Cloudbeds.

Aspectos importantes a serem observados

Este artigo é um recurso informativo adicional para você que já está familiarizado com HTML e CSS.
Os passos apresentados aqui são sugeridos apenas para programadores web experientes. O código pode ficar desatualizado e exigir trabalho adicional.
A Cloudbeds não oferece assistência na construção de um widget de reserva em grupo, ou com design/desenvolvimento externo de sites de hotéis.
Mas oferecemos:
- Sites profissionalmente construídos, totalmente integrados com o Motor de Reservas da Cloudbeds. Saiba mais sobre aqui sobre Cloudbeds Webistes.
- Serviços de personalização do Motor de Reservas, clique aqui para saber mais.

Visão geral

Um widget de reservas é uma funcionalidade disponibilizada pela Cloudbeds como parte do produto Motor de Reservas, onde o hotel pode integrar em seus próprios sites um formulário com campos simples (data de check-in e data de check-out) que, quando enviado, redirecionará o hóspede para a página de reservas, com os parâmetros selecionados.

Da mesma forma, o objetivo do widget de reserva em grupo é replicar a mesma funcionalidade, mas com suporte a várias propriedades. Ele se destina a organizações e grupos de hotéis que têm mais de uma propriedade com o Motor de Reservas configurado, facilitando a busca e a reserva para os hóspedes.

Saiba mais sobre Organização e Usuários.

Tipos de widgets

Widget com base na propriedade

Um widget com base na propriedade é um widget que permite que o hóspede escolha em qual hotel deve verificar a disponibilidade. Ao enviar o widget, você transferirá o hóspede diretamente para a página do Motor de Reservas do hotel com os parâmetros selecionados.

Como se trata de um formulário HTML padrão, ele pode ser adaptado às necessidades do site da associação com layout, CSS, etc. Contanto que siga esses padrões (nomes e formato dos parâmetros).

Isso pode ser alcançado usando um formulário HTML como o exemplo abaixo:

<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
<input type="hidden" name="date_format" value="Y-m-d" />
<p>Propriedade:</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="checkin" />
<p>Check-Out:</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>

Legenda do código:

$property_id: Uma das IDs de propriedade que serão suportados pelo widget. Se precisar de ajuda para encontrá-la, entre em contato com a equipe de suporte.
$property_name: Nome da ID da propriedade identificado por $property_id

Widget com base na cidade

Esse tipo de widget não redirecionará o hóspede para a página do Motor de Reservas; em vez disso, ele será redirecionado para a página do portal da organização, que mostrará os resultados de todas as propriedades que pertencem à organização filtradas pela cidade selecionada.

A funcionalidade básica deste widget é que ele deve redirecionar o hóspede para uma URL formatada, que no final será no seguinte padrão:

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

Se a URL estiver formatada corretamente, o usuário será redirecionado para a página do portal, com a cidade e as datas pré-selecionadas.

Como se trata de um formulário HTML padrão, ele pode ser adaptado às necessidades do site da organização com layout, CSS, etc. Contanto que siga esses padrões (nomes e formato dos parâmetros).

Isso pode ser feito em qualquer linguagem, do lado do cliente ou do servidor, o exemplo abaixo usa HTML, jQuery e JavaScript:

<form action="https://example.cloudbeds.com/#/" method="get">
<p>Cidade:</p>
<select name="city">
<option value="all">Todas as cidades</option>
<option>Barcelona</option>
<option>Madri</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>

Legenda do código:

$city: Nome da cidade selecionada. Será usado para filtrar os resultados.
$check_in: Data de check-in. Será pré-selecionada na página de reserva.
$check_out: Data de check-out. Será pré-selecionada na página de reserva.
$association_portal_url: URL da página do portal relacionada à organização. A URL deve ser parecida com: “associationname.cloudbeds.com”

Explore o Motor de Reservas de Grupos