Widgets witbooking

Modifié le Mer, 20 Mai à 4:08 H

This article is not available in English, view it in Spanish

Introduction

Le kit de développement logiciel (SDK) Witbooking Widgets est un ensemble d'outils qui vous permet d'intégrer le moteur de réservation au site web de l'établissement.

Il offre une manière très simple d'intégrer le moteur de réservation dans le site web, vous permettant de personnaliser l'apparence et la conception du moteur de réservation pour l'adapter au site web, mais donne également la flexibilité de personnaliser l'expérience utilisateur selon les besoins.

Prérequis

Il est essentiel s'assurer que le moteur avec lequel nous travaillerons dispose de notre nouveau moteur v21 et de notre système de fidélisation configuré avant de commencer la configuration de Witbooking Widgets. Dans le cas contraire, la configuration de Witbooking Widgets ne pourra pas être effectuée.

Pour utiliser le SDK, il est nécessaire d'avoir des connaissances de base en programmation web et d'être familier avec les langages et technologies suivants :

HTML
JavaScript

Il est important qu'avant de commencer à configurer les Widgets Witbookingnotre le système de Widgets doit répondre sous un sous-domaine de votre page web, pour garantir le bon comportement des cookies entre les systèmes. Pour cela, vous devez créer le CDM suivant dans la zone DNS de votre domaine et veuillez informer l'équipe Witbooking du CNAME généré:

Type Name Value CNAME wit-widgets cname.vercel-dns.com

*Pour le nom CNAME, vous pouvez spécifier ce que vous préférez ; nous recommandons wit-widgets.

Ce nouveau domaine est la valeur que vous devez placer dans le paramètre hostWidgets qui est spécifié dans la section Initialisation.

Domaines où le Widget sera utilisé

Vous devez notifier l'équipe Witbooking de la liste des domaines où le Widgets sera utilisé, afin de pouvoir lui donner les autorisations d'utilisation. C'est-à-dire si le Widgets sera utilisé dans une page d'atterrissage, vous devez nous indiquer quel domaine répond à cette page d'atterrissage, par exemple https://www.witbooking.com. Si cette étape n'est pas effectuée, l'erreur suivante apparaîtra :

Open image (2).png

Téléchargement et installation

Pour implémenter notre SDK, vous devez utiliser notre lien CDN :

https://widgets.dev.witbooking.com/beta/1.0.0-beta.1/sdk.js

La version bêta est un test précoce de notre logiciel avec de nouvelles fonctionnalités. Elle peut présenter de petits problèmes, c'est pourquoi nous apprécions vos commentaires pour l'améliorer avant le lancement officiel.

Pour installer le SDK, collez simplement cet extrait de code dans la balise <head> o <body> de su sitio web. Ne vous inquiétez pas, cela ne ralentira pas les performances de votre site web, nous vous le promettons !

<script>       (function (w, d) {         if (w.WitBooking) {           console.error("WitBooking embed already included");           return;         }         w.WitBooking = { _c: [] };         [           "init",           "login",           "getCurrentUser",           "logout",           "showOptionsWidget",           "setOptionsWidgetConfig",           "setTheme",           "setCustomization",         ].forEach(           (me) =>             (w.WitBooking[me] = function () {               w.WitBooking._c.push([me, arguments]);             })         );         var sc = d.createElement("script");         sc.type = "text/javascript";         sc.async = true;         sc.src = "https://widgets.dev.witbooking.com/beta/1.0.0-beta.1/sdk.js";         var before = d.getElementsByTagName("script")[0];         before.parentNode.insertBefore(sc, before);       })(window, document); </ script> 

Cela garantit que le script se charge de manière asynchrone et que le SDK ne se charge qu'une seule fois, même si le script est inclus plusieurs fois dans le site web. La partie asynchrone est importante pour garantir que le SDK ne bloque pas le chargement du site web, car il peut prendre du temps à se charger, en fonction de la connexion internet du client.

De plus, il garantit que le SDK est accessible immédiatement via la propriété globale WitBooking, même si le SDK est encore en cours de chargement. Toutes les méthodes publiques du SDK sont exposées via cette propriété et si le SDK n'est pas encore chargé, les appels de méthode sont mis en file d'attente et exécutés une fois le SDK chargé.

Initialisation

Avant de pouvoir utiliser les Widgets, vous devrez initialiser le SDK. Pour initialiser le SDK, vous devez appeler la méthode init. Cette méthode accepte un objet avec les propriétés suivantes :

hostWidgets : Domaine de nos widgets qui doit être un sous-domaine du domaine de la page web.
hostLoyalty : Domaine du service de fidélisation du moteur
hostMain : Domaine du moteur.
formType : Identifiant du type de formulaire à afficher. Les valeurs possibles sont "company", "agency" ou "customer". Par défaut, la valeur est customer.
tierId : Identifiant du niveau que l'utilisateur aura lorsque l'inscription sera terminée. Il est nécessaire pour créer une organisation, c'est-à-dire si le type de formulaire est agency ou company, il est obligatoire. S'il n'est pas inclus, le formulaire affichera une erreur.
organizationId : Identifiant de la compagnie ou de l'agence à laquelle l'utilisateur souhaite s'associer après l'inscription. C'est un paramètre optionnel et il peut être combiné avec le paramètre tierId. Si organizationId et tierId sont indiqués, l'utilisateur s'inscrira avec ces paramètres. Si tierId n'est pas indiqué, le système prendra le niveau de progression par défaut.
uiLocales: Langue dans laquelle les formulaires doivent être représentés.
propertyTicker : Identifiant de l'hôtel.
brand : Nom de la marque assignée à l'hôtel.
analyticsCodes (opcional) : Code UA de Google Analytics séparé par des virgules.
analyticDomains (opcional) : Domaine enregistré dans Google Analytics.
isChain (opcional) : identifie si le moteur correspond à une propriété individuelle ou à un agrégateur de propriétés, la valeur doit être true o false et sa valeur par défaut est false.
tierCompanyId (opcional) : ID du niveau à attribuer par défaut aux entreprises qui s'inscrivent, cette propriété active l'option entreprise dans le menu de l'en-tête
tierAgencyId (opcional) : ID du niveau à attribuer par défaut aux agences qui s'inscrivent, cette propriété active l'option agence dans le menu de l'en-tête
gtmCodes (opcional) : Tableau contenant les conteneurs Google Tag Manager à configurer, c'est un champ optionnel et il peut y en avoir un ou plusieurs. Si vous souhaitez inclure un seul identifiant, envoyez-le de la manière suivante : gtmCodes:["GTM-123"].

Voici un exemple d'appel à la méthode init :

WitBooking.init({   hostWidgets : "https://widgets-dev.witbooking.com",   hostMain: "engine.devel.witbooking.com",    hostLoyalty: "auth-loyalty.devel.witbooking.com",   brand:  "witbrand",   propertyTicker: "petit_santabarbara",   formType : "customer",   uiLocales: "es",    tierCompanyId: "83c29a44-a4c6-43e6-9d0a-abbec0096173",   tierAgencyId:  "cb2d2cdd-fc4e-42f2-81ba-0c1641c57cd7",   isChain: false,   gtmCodes : ["GTM-123", "GTM-456"] } );

Les données utilisées dans cet exemple proviennent de nos serveurs de développement. Vous pouvez les utiliser dans votre environnement de développement, mais il est important que no se usen en ambiente productivo.

Recomendamos llamar al initméthode dans la même <script>que le script d'installation (inclus dans l'étape précédente), mais ce n'est pas nécessaire. Vous pouvez appeler la méthode init depuis n'importe quelle partie de votre code, à condition qu'elle soit appelée avant toute autre méthode du SDK, sinon le SDK générera une erreur.

De plus, vous pouvez également fournir un onloadde rappel, qui sera appelé dès que le SDK sera prêt à être utilisé. Cela ne devrait pas être nécessaire. Les méthodes du SDK peuvent être appelées à tout moment, sans vous soucier de son état. Cependant, si vous souhaitez toujours vous abonner à cet événement, voici comment procéder :

WitBooking.onload = ()  => {   console.log("WitBooking loaded" , WitBooking); };

Configurations

Le SDK vous permet de configurer l'apparence du moteur de réservation pour qu'elle corresponde à la conception du site web. Actuellement, il existe deux façons de personnaliser le moteur de réservation, mais nous travaillons à ajouter plus d'options de personnalisation. Vous pouvez mettre à jour le thème du moteur de réservation, mais vous pouvez également personnaliser les propriétés des widgets individuels (plus d'informations dans la section Widgets).

Thème

Vous pouvez mettre à jour les éléments du thème du moteur en appelant la méthode setTheme. Cette méthode accepte un objet avec les propriétés suivantes :

{   colors: {     primary : string;     secondary: string;   } } 

Vous pouvez mettre à jour les éléments du thème du moteur en appelant la méthode setTheme. Cette méthode accepte un objet avec les propriétés suivantes :

Voici un exemple de mise à jour du thème :

WitBooking.setTheme({   colors : {     primary: "#ff0000",     secondary : "#0000ff"   } }); 

Comme pour l'appel initial, nous recommandons d'appeler setTheme juste après l'initialisation, mais ce n'est pas nécessaire. Vous pouvez appeler cette méthode à tout moment, mais notez que si un Widget est affiché à l'utilisateur, les changements seront appliqués au Widget immédiatement, donc l'utilisateur peut remarquer un changement soudain dans l'apparence du Widget.

Authentification

Le SDK vous permet d'authentifier les utilisateurs en utilisant l'API de Fidélité. Il propose ces méthodes pour gérer l'authentification de l'utilisateur à votre place :

Est-il connecté ?

Pour vérifier si l'utilisateur est actuellement connecté, vous pouvez appeler la méthode isLoggedIn. Cette méthode renvoie une valeur booléenne indiquant si l'utilisateur est connecté ou non.

if (WitBooking.isLoggedIn( )) {   console.log( "El usuario está conectado"); } else {   console .log("El usuario no está conectado"); } 

Connexion

La méthode login ouvrira une fenêtre contextuelle avec le formulaire de connexion. Les utilisateurs peuvent se connecter ou s'inscrire depuis ce formulaire. Cette méthode retourne une promesa qui sera résolue avec l'objet utilisateur si l'utilisateur se connecte, ou sera rejetée si l'utilisateur ferme la fenêtre contextuelle ou si un autre problème survient.

WitBooking.login()   . then(user => {     console.log ("Usuario conectado", user);   })    .catch(error => {     console .log("Ocurrió algún error.", error);    }); 

No necesita manejar la promesa pour authentifier l'utilisateur avec succès. Le SDK gérera l'authentification pour vous et la prochaine fois que vous appelerez la méthode isLoggedIn, elle retournera vrai. Vous pouvez récupérer les informations de l'utilisateur authentifié à tout moment en appelant la méthode getCurrentUser a continuación.

Nous avons également un événement onLogin qui s'exécute avec la section lorsque la connexion est réussie, peut être utile selon le flux utilisé (plus d'informations dans la section Widgets), par exemple :

WitBooking.onLogin = (session)  => {     loadUser(session.guestData.name) ;     setCheckAvailability(session.id); } ; 

Obtenir l'utilisateur actuel

La méthode getCurrentUser tenir une promessequi sera résolue avec les informations de l'utilisateur actuel (le même objet utilisateur que celui reçu dans la méthode de connexion). Si l'utilisateur n'est pas authentifié, elle sera rejetée avec une erreur.

WitBooking.getCurrentUser()   . then(user => {     console.log ("Usuario conectado", user);   })    .catch(error => {     console .log("El usuario no está conectado", error);    }); 

Déconnexion

Vous pouvez déconnecter l'utilisateur en appelant la méthode logout. Cette méthode retourne une promesse qui sera résolue lorsque la déconnexion aura été effectuée avec succès.

WitBooking.logout()   . then(() => {     console .log("Usuario desconectado");   } )   .catch(error => {     console .log("Ocurrió algún error.", error);    }); 

Lorsque l'utilisateur se déconnecte avec succès, l'événement sera également exécuté onLogout pour notifier le parent que la session a été fermée.

WitBooking.onLogout = ()  => {   console.log("onLogout" ) } 

Fermer le Widget

La méthode close ferme la modale et annule le flux s'il est en cours à ce moment-là :

WitBooking.close();

Widgets

Le SDK offre un ensemble de widgets que vous pouvez utiliser pour afficher le moteur de réservation sur votre site web. Chaque widget a ses propres options de personnalisation que vous pouvez utiliser pour personnaliser l'apparence et le comportement du widget. Cependant, vous pouvez également utiliser la configuration par défaut et le widget fonctionnera sans problème.

Widget d'options

Le Widget d'options affiche une popup qui montrera les détails du profil de l'utilisateur (nom, email et niveau de catégorie). Il offre également deux options : permet à l'utilisateur de se déconnecter ou d'aller à sa page de réservations.

Si l'utilisateur n'est pas authentifié, ce Widget lui demandera automatiquement de se connecter ou de s'inscrire, puis affichera automatiquement les détails du profil de l'utilisateur.

Vous pouvez afficher le Widget d'options en appelant la méthode showOptionsWidget.

WitBooking.showOptionsWidget() ;

De plus, vous pouvez choisir de personnaliser le Widget d'options en appelant la méthode setOptionsWidgetConfig. Cette méthode accepte un objet avec les propriétés suivantes :

WitBooking.setOptionsWidgetConfig({   translations : {     greeting: "La traducción para el mensaje de saludo. Por defecto es 'Hola'",     tier : "La traducción para la etiqueta de nivel. Por defecto es 'Nivel'",     buttons: {       bookings : "La traducción para el botón de reservas. Por defecto es 'Ir a mis reservas'",       close: "La traducción para el botón de cerrar. Por defecto es 'Seguir navegando'",        signOff: "La traducción para el botón de cierre de sesión. Por defecto es 'Cerrar sesión'"     }   },    actions: {     bookings: {        hostMain: "URL de hostMain. Por defecto es el valor pasado durante la inicialización",       propertyTicker:  "propertyTicker. Por defecto es el valor pasado durante la inicialización",     },     signOff: {        hostMain: "URL de hostMain. Por defecto es el valor pasado durante la inicialización",       brand:  "Marca. Por defecto es el valor pasado durante la inicialización",       sessionId: "propertyTicker. Por defecto es el valor pasado durante la inicialización"     }   }  });

Il n'est pas nécessaire de fournir tous les paramètres de configuration à la fois, vous pouvez mettre à jour la configuration autant de fois que vous le souhaitez, et seuls les paramètres fournis seront mis à jour. Voici un exemple de personnalisation du Widget d'options :

WitBooking.setOptionsWidgetConfig({   translations : {     greeting: 'Hola',     tier : 'Nivel',     buttons: {       bookings : 'Ir a mis reservas',       signOff: 'Cerrar sesiòn'     }    } });

Il faut noter que si le widget est actuellement affiché à l'utilisateur, les changements seront appliqués au widget immédiatement, donc l'utilisateur peut remarquer un changement soudain dans l'apparence du widget. Par conséquent, vous devez vous assurer d'appeler cette méthode avant d'afficher le Widget.

Traductions

Notre Widget détecte automatiquement la langue du navigateur et effectue la traduction correspondante par défaut. Actuellement, nous supportons les langues suivantes :

Espagnol (es)
Basque (eu)
Anglais (en)
Allemand (de)
Catalan (ca)
Portugais (pt)
Néerlandais (nl)
Russe (ru)
Italien (it)
Français (fr)
Coréen (ko)
Danois (da)

Si vous avez besoin d'utiliser une langue qui n'est pas dans cette liste, vous pouvez utiliser la fonction setOptionsWidgetConfig qui est spécifiée au point précédent et passer la traduction correspondante. Le Widget donnera la priorité à la configuration que vous envoyez via la fonction setOptionsWidgetConfig.

Exemples d'utilisation

Nous disposons d'une page web de démonstration qui simule le site web d'un hôtel et notre widgets y est implémenté :

Démo

Code de page web d'exemple :
examples.zip

Dépannage

Si vous avez des questions, des problèmes ou des suggestions concernant les widgets Witbooking, n'hésitez pas à nous contacter à l'adresse suivante :soutien@witbooking.com. Notre équipe de soutien sera ravie de vous aider à résoudre tout problème que vous pourriez rencontrer. N'oubliez pas, nous sommes là pour vous aider à réussir dans votre activité d'hébergement et à offrir une expérience de réservation sans problème à vos clients.