Cet article explique ce qu’est un widget de réservation et comment créer un Widget de réservation de groupe pour le Cloudbeds Booking Engine.
Choses importantes à noter
Cet article est fourni comme ressource d’information supplémentaire pour ceux qui maîtrisent déjà le HTML et le CSS.
- Les étapes proposées ici s’adressent uniquement aux développeurs web expérimentés. Le code peut devenir obsolète et nécessiter des ajustements supplémentaires.
- Cloudbeds n’offre pas d’assistance pour la création d’un widget de réservation de groupe ni pour la conception/développement de sites web hôteliers externes.
- Nous proposons cependant :
Aperçu
Un widget de réservation est une fonctionnalité fournie par Cloudbeds dans le cadre du produit Booking Engine, qui permet à l’hôtel d’intégrer sur son propre site web un formulaire avec des champs simples (date de check-in et date de check-out) qui, une fois soumis, redirige le client vers la page de réservation avec les paramètres sélectionnés.
De la même manière, un widget de réservation de groupe a pour but de reproduire cette même fonctionnalité, mais en supportant plusieurs établissements. Il est destiné aux organisations et groupes hôteliers disposant de plusieurs établissements configurés avec le Booking Engine, pour faciliter la recherche et la réservation des clients.
En savoir plus sur Organisation & Utilisateurs.
Types de widget
Widget basé sur l’établissement
Un widget basé sur l’établissement est un widget qui permet au client de choisir quel hôtel doit retourner la disponibilité. La soumission du widget transfèrera le client directement vers la page du moteur de réservation de l’hôtel avec les paramètres sélectionnés.
Comme il s’agit d’un formulaire HTML standard, il peut être adapté aux besoins du site web de l’association avec la mise en page, le CSS, etc., tant qu’il respecte ces standards (noms et format des paramètres).
Cela peut être réalisé en utilisant un formulaire HTML comme dans l’exemple ci-dessous :
<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
<input type="hidden" name="date_format" value="Y-m-d" />
<p>Établissement :</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>Légende du code :
- $property_id : Un des identifiants d’établissement qui sera supporté par le widget. Si tu as besoin d’aide pour le trouver, contacte l’équipe d’assistance.
- $property_name : Nom de l’établissement identifié par $property_id
Widget basé sur la ville
Ce type de widget ne redirigera pas le client vers la page du moteur de réservation, mais vers la page du portail de l’association qui affichera les résultats de tous les établissements appartenant à l’association, filtrés par la ville sélectionnée.
La fonctionnalité de base de ce widget est qu’il doit rediriger le client vers une URL formatée, qui suit en fin de compte la norme suivante :
https://$association_portal_url/#/?city=$city&check_in=$check_in&check_out=$check_out
Si l’URL est correctement formatée, l’utilisateur sera redirigé vers la page du portail, avec la ville et les dates pré-sélectionnées.
Comme il s’agit d’un formulaire HTML standard, il peut être adapté aux besoins du site web de l’association avec la mise en page, le CSS, etc., tant que ces normes (noms et format des paramètres) sont respectées.
Cela peut être réalisé dans n’importe quel langage, côté client ou serveur. L’exemple ci-dessous utilise HTML, jQuery et JavaScript :
<form action="https://example.cloudbeds.com/#/" method="get">
<p>Ville :</p>
<select name="city">
<option value="all">Toutes les villes</option>
<option>Barcelone</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>Légende du code :
- $city : Nom de la ville sélectionnée. Il sera utilisé pour filtrer les résultats.
- $check_in : Date de check-in. Elle sera pré-sélectionnée sur la page de réservation.
- $check_out : Date de check-out. Elle sera pré-sélectionnée sur la page de réservation.
- $association_portal_url : URL de la page portail liée à l’association. L’URL doit ressembler à : « associationname.cloudbeds.com »
Explorez le moteur de réservation de groupe
Commentaires
Vous devez vous connecter pour laisser un commentaire.