Installation et personnalisation

White Label Channel Manager peut être installé dans votre logiciel avec un développement très limité de la part de votre équipe. Ce document a pour but de vous fournir des informations sur le déroulement du processus et sur ce qui peut être utile pour garantir une installation efficace et l'accueil des clients.

En bref, le processus est le suivant :

  1. Utilisez les informations d'identification de votre compte principal pour générer une paire de jetons principaux.

  2. Utiliser les jetons principaux pour générer des jetons spécifiques aux sous-utilisateurs.

  3. Utilisez les jetons spécifiques au sous-utilisateur pour générer le code HTML White Label Channel Manager.

  4. Intégrer le code HTML dans votre page

Lisez la suite pour obtenir des instructions sur la manière de l'installer ainsi que des conseils sur la configuration interne de votre système.

Avant de commencer

Pour que l'installation se fasse rapidement et en douceur, assurez-vous d'avoir terminé avec succès toutes les étapes : Intégrer et certifier et Création de comptes. Ce n'est qu'ensuite que vous pourrez procéder à l'installation de White Label Channel Manager dans votre PMS.

Notez qu'afin d'exécuter White Label Channel Manager pour votre compte de sous-utilisateur, ce compte de sous-utilisateur doit être assigné à un compte principal dans le système Rentals United.

Conditions techniques préalables

Les éléments suivants sont nécessaires pour lancer le processus d'installation pour le premier utilisateur :

  • jQuery 3.4.1 ou plus récent installé dans votre logiciel pour que Angular fonctionne correctement ;

  • White Label Channel Manager utilise Bootstrap v3.3.7 et il est fourni avec les styles, il n'est donc pas possible d'utiliser une autre version de Bootstrap sur la page qui héberge White Label Channel Manager;

  • optionnellement, l'IP de votre serveur peut être mise sur liste blanche du côté du serveur Rentals United;

  • une section dédiée au Channel Manager dans votre logiciel - une nouvelle section qui sera utilisée uniquement pour la solution Rentals UnitedWhite Label Channel Manager

Option 1 : Demander le code HTML

  1. Générez vos Master Token et Master Refresh Token en utilisant le nom d'utilisateur et le mot de passe du compte principal.

    Demande:

    URL:

    Type de contenu

    Le corps:

    • grant_type : mot de passe

    • nom d'utilisateur : [user_name ] - nom d'utilisateur du compte principal

    • sse du compuser_passwordte principal

     

    En réponse, vous recevrez les jetons du compte principal :

    • Master Token: "access_token"

    • Master Refresh Token: "refresh_token"

    Remarque: Master Token est valable pendant 1 heure, Master Refresh Token est valable pendant 1 semaine. Si le site Master Refresh Token expire, vous devrez utiliser Master Credentials pour générer un nouveau site Master Token et Master Refresh Token.

    Conseil : rafraîchir les jetons

    Pour garantir une expérience optimale à l'utilisateur après l'établissement de la session, Rentals United gère l'autorisation continue (rafraîchissement des jetons du client) entre le sous-utilisateur et Rentals United. Lorsque la session du sous-utilisateur se termine dans votre logiciel, Rentals United cesse d'autoriser.

    Vous êtes responsable de l'actualisation des jetons, afin que vos clients (sous-utilisateurs) puissent utiliser le produit à tout moment. Il est recommandé, à un stade ultérieur, de développer une solution qui rafraîchira automatiquement vos jetons tant qu'ils sont encore valides. Vous éviterez ainsi que vos clients n'aient pas accès au produit en raison du délai d'expiration du jeton. Pour en savoir plus, consultez Refresh your master tokens without credentials(en anglais).

  2. Demander le code HTML de White Label Channel Manager à Rentals United WebAPI.

    Demande:

    URL : https://webapi.rentalsunited.com/api/white-pms/client?userName=[USER_NAME]&ownerId=[OWNER_ID]

    • ilisateur du compte client

    • [OWNER_ID] - optionnel ; il permet au compte principal de charger la page d'un sous-utilisateur donné (Owner ID) et de visualiser son inventaire et ses connexions. Vous pouvez obtenir la liste des identifiants des propriétaires par le biais de Pull_ListAllOwners_RQ.

    Type de contenu

    En-têtes:

    Clé :

    Valeur l

     

    En réponse, vous recevrez

    • Subuser Access Token: "token"

    • Subuser Refresh Token: "refresh_token"

    • White Label Channel Manager HTML

    • Ce script est un moteur d'exécution pour notre application : https://new.rentalsunited.com/app/pms-dist/runtime.js?v=1.0.0.0

    • L'application est construite sur les derniers standards de la plateforme web. Pour compenser ces anciens navigateurs non compatibles, les scripts polyfill sont chargés : https://new.rentalsunited.com/app/pms-dist/polyfills.js?v=1.0.0.0

    • Ce script inclut toutes les bibliothèques que nous avons ajoutées au projet : https://new.rentalsunited.com/app/pms-dist/vendor.js?v=1.0.0.0

    • Ce script contient le code de l'application : https://new.rentalsunited.com/app/pms-dist/scripts.js?v=1.0.0.0

    • Ce script contient le code de l'application : https://new.rentalsunited.com/app/pms-dist/main.js?v=1.0.0.0

    • Ce script contient les styles de l'application : https://new.rentalsunited.com/app/pms-dist/styles.css?v=1.0.0.0

    • Ce script contient les styles de l'application : https://new.rentalsunited.com/Content/main.css

    Rentals United White Label Channel Manager prend en charge plusieurs versions linguistiques. Vous pouvez exécuter le site White Label Channel Manager dans la langue sélectionnée. Pour ce faire, utilisez la re Versions linguistiques actuellement prises en charge :

    • Anglais

    • Français

    • Espagnol

    • Italien

    Une identification supplémentaire du client, basée sur l'identifiant de votre compte logiciel, est disponible pour certains partenaires. ique du compte client du logiciel. Elle nécessite des arrangements supplémentaires avec Rentals United. N'hésitez pas à nous contacter si vous souhaitez utiliser les identifiants uniques de votre logiciel.

    Si vous avez déjà un ,White Label Channel Manager vous pouvez l'utilis. Remplacez les URL dans la procédure ci-dessus par :

    • GET https://webapi.rentalsunited.com/api/white-pms/client?userName=[USER_NAME]&languageId=[ID]

    • GET https://webapi.rentalsunited.com/api/white-pms/client?userName=[PROPERTYMANAGERCODE]&languageId=[ID]

    Les instructions de mise à jour étape par étape sont disponibles ici

  1. Copiez le code HTML White Label Channel Manager reçu à l'étape précédente et injectez-le dans le code HTML de votre logiciel à l'endroit où vous souhaitez que White Label Channel Manager s'affiche.

  2. Placez maintenant les liens vers les scripts externes. Cliquez sur le bouton Copier et collez l'extrait comme dernier élément d et HTML de votre logiciel.

    Copier 
    <base href="/">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

  3. Allez sur votre site web et vérifiez que le site White Label Channel Manager a été correctement intégré.

Option 2 : Scénario d'une ligne

  1. Générez vos Master Token et Master Refresh Token en utilisant le nom d'utilisateur et le mot de passe du compte principal.

    Demande:

    URL:

    Type de contenu

    Le corps:

    • grant_type : mot de passe

    • nom d'utilisateur : [user_name ] - nom d'utilisateur du compte principal

    • sse du compuser_passwordte principal

     

    En réponse, vous recevrez les jetons du compte principal :

    • Master Token: "access_token"

    • Master Refresh Token: "refresh_token"

    Remarque: Master Token est valable pendant 1 heure, Master Refresh Token est valable pendant 1 semaine. Si le site Master Refresh Token expire, vous devrez utiliser Master Credentials pour générer un nouveau site Master Token et Master Refresh Token.

    Conseil : rafraîchir les jetons

    Pour garantir une expérience optimale à l'utilisateur après l'établissement de la session, Rentals United gère l'autorisation continue (rafraîchissement des jetons du client) entre le sous-utilisateur et Rentals United. Lorsque la session du sous-utilisateur se termine dans votre logiciel, Rentals United cesse d'autoriser.

    Vous êtes responsable de l'actualisation des jetons, afin que vos clients (sous-utilisateurs) puissent utiliser le produit à tout moment. Il est recommandé, à un stade ultérieur, de développer une solution qui rafraîchira automatiquement vos jetons tant qu'ils sont encore valides. Vous éviterez ainsi que vos clients n'aient pas accès au produit en raison du délai d'expiration du jeton. Pour en savoir plus, consultez Refresh your master tokens without credentials(en anglais).

  2. Demander le code HTML de White Label Channel Manager à Rentals United WebAPI.

    Demande:

    URL : https://webapi.rentalsunited.com/api/white-pms/client?userName=[USER_NAME]&ownerId=[OWNER_ID]

    • ilisateur du compte client

    • [OWNER_ID] - optionnel ; il permet au compte principal de charger la page d'un sous-utilisateur donné (Owner ID) et de visualiser son inventaire et ses connexions. Vous pouvez obtenir la liste des identifiants des propriétaires par le biais de Pull_ListAllOwners_RQ.

    Type de contenu

    En-têtes:

    Clé :

    Valeur l

     

    En réponse, vous recevrez

    • Subuser Access Token: "token"

    • Subuser Refresh Token: "refresh_token"

    • White Label Channel Manager HTML

  3. Cliquez sur le bouton Copier et ajoutez le code HTML ci-dessous à votre site web. Sélectionnez l'endroit où vous souhaitez afficher le site Rentals United White Label Channel Manager et collez-le.

    Copier 
    <div id="ruApp"></div>

  4. Placez le script ci-dessous dans votre page. Cliquez sur le bouton Copy et collez l'extrait comme dernier élément dest de

    Copier 
    <script src="https://new.rentalsunited.com/white-pms-client/script?token=[access_token]&refreshToken=[refresh_token]&languageId=[ID]&uiVersion=2&ownerId=[ownerId]">
    </script>

  5. Remplacer certaines données dans le script.

    • Subuser Access Token - l'étape 2

    • Subuser Refresh Token - 'étape 2

    • White Label Channel Manager - o langue à charger

      • Anglais

      • Français

      • Espagnol

      • Italien

    • uiVersion=2 - optionnel ; il permet d'activer la version 2.0, voir ici

    • ownerId - facultatif ; il permet au compte principal de charger la page d'un sous-utilisateur donné (Owner ID) et de visualiser son inventaire et ses connexions. Vous pouvez obtenir la liste des identifiants des propriétaires par le biais de Pull_ListAllOwners_RQ.

  6. Allez sur votre site web et vérifiez que le site White Label Channel Manager a été correctement intégré.

Personnaliser l'aspect et la convivialité

La solution White Label Channel Manager est entièrement personnalisable et donc totalement transparente pour vos clients (sous-utilisateurs). Grâce à cette grande possibilité d'ajuster l'aspect et la convivialité de White Label Channel Manager, vous pouvez l'adopter pleinement à votre logiciel, y compris sur le plan visuel. Si vous souhaitez que le site White Label Channel Manager ressemble à l'apparence de votre logiciel, lisez la suite !

Pourquoi personnaliser

L'injection CSS vous permet d'ajouter un code CSS personnalisé à l'adresse White Label Channel Manager en attachant un fichier CSS supplémentaire à l'en-tête de la page HTML. Il vous permet de créer plusieurs règles de conception qui peuvent s'appliquer à l'ensemble de la page ou à des sections spécifiques de White Label Channel Manager.

Comment ça fonctionne

Le fonctionnement fondamental de l'injection CSS consiste à remplacer les styles existants. Le fichier CSS cible des éléments spécifiques du site White Label Channel Manager qui peuvent être personnalisés. Ensuite, à l'aide de règles CSS, ces éléments peuvent être stylisés selon la conception de votre propre logiciel.

Classes CSS des composants Angular

Le site White Label Channel Manager utilise l'encapsulation de style CSS. Cela signifie que les mêmes classes CSS peuvent avoir des significations différentes pour des composants différents. C'est pourquoi chaque règle de remplacement de style doit commencer par la classe du composant principal.

Nous avons deux branches principales de composants :

  • composants partagés entre les modules - classe du composant principal commençant par "sh-", c'est-à-dire .sh-extended-input

  • qui appartiennent à un certain module :

    • Paramètres de propriété - les classes commençant par "ps-", c'est-à-dire .ps-clusters-list-unit-details

    • Page des tarifs - classes commençant par "rp-", c'est-à-dire .rp-rate-tile

Liste des composants

Veuillez noter que la liste ci-dessous n'est pas exhaustive et qu'elle peut être complétée au cours du développement du site White Label Channel Manager.

  • Liste des grappes de données (ps-clusters)

  • ps-clusters-list-add-not-existing-property

  • ps-clusters-list-add-property

  • ps-clusters-list-cluster-tile

  • ps-clusters-list-unit-mapping

  • ps-cluster-unit-connections

  • ps-cluster-unit-connections-property-name

  • ps-advanced-settings-dropdown

  • ps-advanced-settings-currency

  • ps-advanced-settings-sync-model

  • ps-advanced-settings-item

  • ps-advanced-settings-payment

  • ps-advanced-settings-string

  • ps-advanced-settings-plus-minus

  • ps-advanced-settings-panel (panneau des paramètres avancés)

  • ps-advanced-settings-breadcrumb

  • ps-advanced-settings-breadcrumb-list

  • ps-advanced-settings-breadcrumb-dropdown-element-name

  • ps-advanced-settings-breadcrumb-select

  • ps-import-hotel

  • ps-manual-options-fsp-vector

  • ps-manual-options-fsp-editor

  • ps-manual-options-activate-manual-options

  • ps-manual-options-batch-edit

  • ps-manual-options-editor

  • ps-manual-options-tooltip-update-data

  • ps-manual-options

  • ps-manual-options-vector

  • ps-notifications-header

  • ps-notifications-tile

  • ps-notifications

  • rp-rate-tile-header

  • rp-rate-tile-header

  • rp-rate-tile

  • rp-rate-tile

  • rp-rates-page

  • rp-white-label-rates-page

  • ps-sdu-notifications-header

  • ps-sdu-notifications-tile

  • ps-sdu-notifications

  • sh-availability-calendar-input

  • sh-availability-calendar-month-view

  • sh-availability-calendar-with-time-input

  • calendrier des disponibilités

  • sh-calendar-row

  • sh-channel-logo

  • sh-currency-input

  • sh-date-range

  • sh-date-avec-heure

  • sélecteur de cases à cocher sh-days

  • sh-ellipsis

  • porte-manteau sh-empty

  • sh-error-modal

  • sh-extended-input

  • sh-filter-by

  • drapeau sh

  • sh-forceable-input

  • sh-générique-modal

  • sh-header-with-list (en-tête avec liste)

  • sh-hotel-room-rate-selector

  • sh-input-number-label

  • sh-avec-détecteur-d'édition

  • sh-is-busy

  • sh-label-avec-comportement

  • sh-label-with-edition

  • case à cocher étiquetée

  • sh-language-select

  • sh-manuel-options-legend

  • sh-message-box-title

  • sh-message-box-body

  • sh-message-box-footer

  • nombre d'invités

  • sh-page-size

  • sh-progress-bar

  • sh-property-dropdown-with-city

  • sh-property-dropdown

  • voir plus

  • sh-time-dropdown

  • Nombre de messages non lus

Exemple d'utilisation

Pour les besoins de cet exemple, nous nous concentrerons sur la modification de la couleur d'un exemple de texte dans White Label Channel Manager.

Par défaut, le nom de l'appartement actif (3) est bleu.

Créez une nouvelle règle CSS. Utilisez Dans ce cas, le code doit ressembler à ce qui suit :

Copier 
.ps-clusters-list-unit-details .apartment-name-cell span {
   color: red;
}

Le résultat est que le nom de l'appartement actif (3) est devenu rouge.

Note: Il peut être nécessaire d'uour remplacer certains styles.

Informations complémentaires

Rafraîchissez vos jetons maîtres sans informations d'identification

Cette méthode vous permet de rafraîchir les jetons sans avoir à fournir les informations d'identification complètes du compte. Il peut être utilisé pour rafraîchir régulièrement vos jetons et éviter leur expiration. Au lieu de fournir les informations d'identification du compte principal, utilisez l'adresse Master Refresh Token actuelle pour générer une nouvelle paire de jetons.

Demande:

URL:

Type de contenu

Le corps:

  • grant_type : refresh_token

  • refresh_token : [master_refresh_token]

 

En réponse, vous recevrez une nouvelle paire de jetons de compte principal :

  • Master Token: "access_token"

  • Jeton de rafraîchissem

 

Passer à la version 2.0

Si vous souhaitez ajouter des fonctionnalités supplémentaires à votre PMS, vous devez passer à la version la plus récente de White Label Channel Manager. Vous aurez accès aux fonctionnalités suivantes :

  • Gestion de plans tarifaires multiples pour Booking.com

  • Gestion de plans tarifaires multiples pour Expedia

  • Affichage de la majoration de prix sur la page Paramètres de propriété

  • Marge sur les redevances

 

Comment passer à la version 2.0 ?

Tous les clients PMS peuvent accéder à la version 2.0 dans les cas suivants.

  • S'ils ont implémenté White Label Channel Manager à l'aide de l'option de script en une ligne, ils doivent ajouter manuellement un morceau de code au script. Les nouveaux clients utilisant cette méthode auront automatiquement accès à la version 2.0.

     

    1. Vous trouverez ci-dessous un exemple de script d'une ligne permettant d'activer White Label Channel Manager dans votre PMS.

      Copier 
      <script src="https://new.rentalsunited.com/white-pms-client/script?token=[access_token]&refreshToken=[refresh_token]&languageId=[ID]">
      </script>

    2. Copiez l'extrait suivant : &uiVersion=2".

    3. Collez-la à la fin de l'URL. Vous recevrez le script suivant :

      Copier 
      <script src="https://new.rentalsunited.com/white-pms-client/script?token=[access_token]&refreshToken=[refresh_token]&languageId=[ID]&uiVersion=2">
      </script>

       

  • S'ils mettent en œuvre White Label Channel Manager à l'aide du code HTML, ils doivent ajouter manuellement un élément de code personnalisé à la réponse reçue de Rentals United API pour activer la version 2.0 dans leur PMS.

     

    1. Vous trouverez ci-dessous une réponse exemplaire de l'API Rentals United.

    2. Copiez l'extrait suivant : ui_version="2".

    3. Collez-la entre languageid="1" et ng-version="7.1.0".