Remarque : Seules les entreprises possédant un abonnement Entreprise peuvent configurer Mews Booking Engine avec plusieurs établissements.
Ce guide présente les points suivants :
- Les prérequis
- Le code
- Configurer le moteur de réservation
Les prérequis
Assurez-vous de remplir tous les prérequis. Dans le cas contraire, le code des cas d’utilisation peut être difficile à comprendre ou le comportement du code peut varier.Le code
Les commentaires numérotés donnent plus de détails sur le code. Remarque : Ce guide concerne l’environnement de production. Si vous voulez tester le code dans un environnement différent, consultez le guide pour réaliser des tests dans un environnement de démonstration/préproduction/test.Ce code utilise un exemple de scénario avec trois hôtels, un à Paris et deux à Londres.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 1. Install Distributor loader script as close to the opening <head/> tag as possible -->
<script src="https://api.mews.com/distributor/distributor.min.js"></script>;
<title>My page</title>
</head>
<body>
<!-- 2. Ajoutez des boutons pour ouvrir le Distributeur avec une localisation spécifique présélectionnée -->
<button disabled type="button" id="london-button">Loading...</button>
<button disabled type="button" id="paris-button">Loading...</button>
<script>
// 3. Initialiser le widget du distributeur juste avant l'étiquette de fermeture </body> .
Mews.Distributor(
// 3.1 Définissez les identifiants de configuration de votre distributeur.
{
configurationIds : [
'Configuration id of first London hotel',
'Configuration id of second London hotel.',
'Paris hotel configuration id',
],
},
// Ajoutez un callback qui fera en sorte que les boutons ouvrent le Distributor Widget et définissent la ville/lieu.
function (api) {
const initializeButton = (buttonId, cityId, buttonText) => {
const buttonElement = document.getElementById(buttonId) ;
buttonElement.addEventListener('click', event => {
event.preventDefault() ;
// Utilisez l'API du widget du distributeur pour définir la ville/lieu et ouvrir le widget du distributeur.
api.setCity(cityId) ;
api.open() ;
}) ;
buttonElement.innerHTML = buttonText ;
buttonElement.disabled = false ;
} ;
// 3.2 Préparer les identifiants des villes.
const londonCityId = 'Votre ville de Londres';
const parisCityId = 'Votre ville de Paris';
initializeButton('london-button', londonCityId, 'Hôtels de Londres') ;
initializeButton('paris-button', parisCityId, 'Hôtel de Paris') ;
}. // 4. Ce guide est destiné à un environnement de production.
) ;
</script>
</body>
</html>
Configurer le moteur de réservation
Étape 1 : Installer le script de chargement du Mews Booking Engine
Pour plus de détails, consultez la section de prise en main pour installer le script de chargement.
Étape 2 : Ajouter des boutons pour ouvrir le Mews Booking Engine avec une ville spécifique présélectionnée
Les boutons sont désactivés lors du chargement de la page, pour que les utilisateurs ne puissent pas cliquer sur des boutons tant que le widget du Mews Booking Engine n’est pas prêt à être utilisé. Nous les activerons plus tard, une fois que le widget sera prêt.
Étape 3 : Initialiser le widget du Mews Booking Engine
Si vous ne savez pas où trouver les identifiants de configuration, consultez où trouver l’identifiant de configuration pour plus d’information.
Même si on parle d’emplacement dans l’interface utilisateur, l’API requiert un identifiant de ville.
- Si vous ne savez pas où trouver un identifiant de ville, consultez où trouver l’identifiant de la ville pour plus d’informations.
- Si vous avez plusieurs hôtels dans la même ville/le même emplacement, l’identifiant sera le même pour chacun d’entre eux. Vous pouvez donc utiliser le premier que vous trouvez.
Si vous voulez tester le code dans un environnement différent, consultez le guide pour réaliser des tests dans un environnement de démonstration/préproduction/test.
Le Widget API Mews Booking Engine prend en charge plus que la présélection de la ville/de l’emplacement et son ouverture. Consultez les autres options du Widget API Mews Booking Engine pour trouver d’autres options que vous pourriez utiliser.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.Vous pouvez également consulter d’autres cas d’utilisation ici.