Install & Customise

White Label Channel Manager can be installed within your software with very limited development by your team. This document is designed to provide you with information on what the process looks like as well as what may be useful in order to ensure efficient installation and client onboarding.

In short the process is as follows:

  1. Use your master account credentials to generate a pair of master tokens.

  2. Use the master tokens to generate subuser-specific tokens.

  3. Use the subuser-specific tokens to generate the White Label Channel Manager HTML.

  4. Embed the HTML in your page

Read more for instructions on how to set it up as well as advice on internal set-up in your system.

Before you start

In order for the installation to be smooth and quick, make sure that you have successfully finished all the steps: Integrate & Certify and Set up accounts. Only afterwards you can proceed with White Label Channel Manager installation in your PMS.

Note that in order to run White Label Channel Manager for your subuser account, this subuser account must be assigned to a master account in the Rentals United system.

Technical prerequisites

The following elements are needed to start the installation process for the first user:

  • jQuery 3.4.1 or newer installed in your software in order for Angular to run correctly;

  • White Label Channel Manager uses Bootstrap v3.3.7 and it is bundled with the styles, so it is not possible to use any other Bootstrap version on the page that hosts White Label Channel Manager;

  • optionally, your server IP can be white-listed on Rentals United server side;

  • a dedicated Channel Manager section in your software - a new section that will be used solely for Rentals UnitedWhite Label Channel Manager solution

Option 1: Request HTML code

  1. Generate your Master Token and Master Refresh Token by using the master account username and password.

    Request: POST

    URL: https://webapi.rentalsunited.com/whitepms/oauth2/token

    Content type: application/x-www-form-urlencoded

    Body:

    • grant_type: password

    • username: [user_name] - master account username

    • password: [user_password] - master account password

     

    In response, you will receive the master account tokens:

    • Master Token: "access_token"

    • Master Refresh Token: "refresh_token"

    Note: Master Token is valid for 1 hour, Master Refresh Token is valid for 1 week. In case the Master Refresh Token expires, you will need to use Master Credentials to generate a new Master Token and Master Refresh Token.

    Tip: Refreshing tokens

    To ensure the best user experience after the session is established, Rentals United that manages continuous authorization (refreshes the client tokens) between the subuser and Rentals United. After the subuser's session ends in your software, Rentals United stops authorising.

    You are responsible for keeping tokens refreshed, so that your clients (subusers) can use the product any time they need. It is recommended at a later stage to develop a solution that will automatically refresh your tokens while they are still valid. This way you will avoid a situation when your clients do not have access to the product due to token expiration time. Read more about it at Refresh your master tokens without credentials.

  2. Request the White Label Channel Manager HTML code from Rentals United WebAPI.

    Request: GET

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

    • [USER_NAME] - client account username

    Content type: application/x-www-form-urlencoded

    Headers:

    Key: Authorization

    Value: Bearer [access_token] of the master account

     

    In response, you will receive:

    • Subuser Access Token: "token"

    • Subuser Refresh Token: "refresh_token"

    • White Label Channel Manager HTML

    • This script is a runtime for our application: https://new.rentalsunited.com/app/pms-dist/runtime.js?v=1.0.0.0

    • The application is built on the latest standards of the web platform. To compensate for these older non-supportive browsers, the polyfill scripts are loaded: https://new.rentalsunited.com/app/pms-dist/polyfills.js?v=1.0.0.0

    • This script includes all libraries that we added into the project: https://new.rentalsunited.com/app/pms-dist/vendor.js?v=1.0.0.0

    • This script contains code of the application: https://new.rentalsunited.com/app/pms-dist/scripts.js?v=1.0.0.0

    • This script contains code of the application: https://new.rentalsunited.com/app/pms-dist/main.js?v=1.0.0.0

    • This script contains styles of the application: https://new.rentalsunited.com/app/pms-dist/styles.css?v=1.0.0.0

    • This script contains styles of the application: https://new.rentalsunited.com/Content/main.css

    Rentals United White Label Channel Manager supports multiple language versions. You can run White Label Channel Manager in the selected language. In order to do that, use the GET https://webapi.rentalsunited.com/api/white-pms/client?userName=[USER_NAME]&languageId=[ID] request and replace the [ID] with the actual language ID you wish to use. Currently supported language versions:

    • 1 English

    • 4 French

    • 5 Spanish

    • 6 Italian

    Additional client identification, based on your software account ID, is available for selected partners. [PROPERTYMANAGERCODE] is the software client account unique identifier. It requires additional arrangements with Rentals United. Please, reach out to us if you wish to use your software unique client identifiers.

    If you already have a [PROPERTYMANAGERCODE], you can use it to generate the White Label Channel Manager code. Replace the URLs in the above procedure with: 

    • 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]

    Step-by- step upgrade instructions can be accessed here.

  1. Copy the White Label Channel Manager HTML code received in the previous step and inject it into your software HTML where you want the White Label Channel Manager to display.

  2. Now, place the links to the external scripts. Click the Copy button and paste the snippet as the last item within the <head> and </head> elements in your software HTML.

    Copy 
    <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. Go to your website and verify if the White Label Channel Manager has been embedded correctly.

Option 2: One-line script

  1. Generate your Master Token and Master Refresh Token by using the master account username and password.

    Request: POST

    URL: https://webapi.rentalsunited.com/whitepms/oauth2/token

    Content type: application/x-www-form-urlencoded

    Body:

    • grant_type: password

    • username: [user_name] - master account username

    • password: [user_password] - master account password

     

    In response, you will receive the master account tokens:

    • Master Token: "access_token"

    • Master Refresh Token: "refresh_token"

    Note: Master Token is valid for 1 hour, Master Refresh Token is valid for 1 week. In case the Master Refresh Token expires, you will need to use Master Credentials to generate a new Master Token and Master Refresh Token.

    Tip: Refreshing tokens

    To ensure the best user experience after the session is established, Rentals United that manages continuous authorization (refreshes the client tokens) between the subuser and Rentals United. After the subuser's session ends in your software, Rentals United stops authorising.

    You are responsible for keeping tokens refreshed, so that your clients (subusers) can use the product any time they need. It is recommended at a later stage to develop a solution that will automatically refresh your tokens while they are still valid. This way you will avoid a situation when your clients do not have access to the product due to token expiration time. Read more about it at Refresh your master tokens without credentials.

  2. Request the White Label Channel Manager HTML code from Rentals United WebAPI.

    Request: GET

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

    • [USER_NAME] - client account username

    Content type: application/x-www-form-urlencoded

    Headers:

    Key: Authorization

    Value: Bearer [access_token] of the master account

     

    In response, you will receive:

    • Subuser Access Token: "token"

    • Subuser Refresh Token: "refresh_token"

    • White Label Channel Manager HTML

  3. Click the Copy button and add the below HTML code to your website. Select the place where you want to show the Rentals United White Label Channel Manager and paste it.

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

  4. Place the below script in your page. Click the Copy button and paste the snippet as the last item within the <head> and </head> elements in your page.

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

  5. Replace some data in the script.

    • [access_token] - Subuser Access Token obtained in Step 2

    • [refresh_token] - Subuser Refresh Token obtained in Step 2

    • [ID] - optional; White Label Channel Manager language to be loaded

      • 1 English

      • 4 French

      • 5 Spanish

      • 6 Italian

    • uiVersion=2 - optional; code responsible for enabling version 2.0, see here.

  6. Go to your website and verify if the White Label Channel Manager has been embedded correctly.

Customise look & feel

The White Label Channel Manager solution is fully customizable and, therefore, completely transparent to your clients (subusers). With this great possibility to adjust the look & feel of White Label Channel Manager, you can fully adopt it to your software also visually. If you wish to make the White Label Channel Manager resemble your software look & feel, read on!

Why customize

CSS injection allows you to add custom CSS code to the White Label Channel Manager by attaching an additional CSS file to the HTML page’s header. It lets you create multiple design rules that can apply to the whole page or specific sections of White Label Channel Manager.

How it works

The fundamental way the CSS injection works is overriding existing styles. The CSS file targets specific elements in the White Label Channel Manager that can be customized. Then, with the use of CSS rules, these elements can be styled according to your own software design.

Angular components' CSS classes

The White Label Channel Manager uses CSS style encapsulation. This means that the same CSS classes can have different meanings for different components. That is why every style override rule should start with the main component’s class.

We have two main component’s branches:

  • components shared between modules - main component’s class starting with “sh-” i.e. .sh-extended-input

  • component that belong to certain module:

    • Property Settings - classes starting with “ps-“, i.e. .ps-clusters-list-unit-details

    • Rates page - classes starting with “rp-” i.e. .rp-rate-tile

Components list

Please note that the list below is not exhaustive and may be extended during White Label Channel Manager development.

  • ps-clusters-list

  • 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

  • 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

  • sh-availability-calendar

  • sh-calendar-row

  • sh-channel-logo

  • sh-currency-input

  • sh-date-range

  • sh-date-with-time

  • sh-days-checkbox-selector

  • sh-ellipsis

  • sh-empty-placeholder

  • sh-error-modal

  • sh-extended-input

  • sh-filter-by

  • sh-flag

  • sh-forceable-input

  • sh-generic-modal

  • sh-header-with-list

  • sh-hotel-room-rate-selector

  • sh-input-number-label

  • sh-with-edition-detector

  • sh-is-busy

  • sh-label-with-behaviour

  • sh-label-with-edition

  • sh-labeled-checkbox

  • sh-language-select

  • sh-manual-options-legend

  • sh-message-box-title

  • sh-message-box-body

  • sh-message-box-footer

  • sh-number-of-guest

  • sh-page-size

  • sh-progress-bar

  • sh-property-dropdown-with-city

  • sh-property-dropdown

  • sh-see-more

  • sh-time-dropdown

  • sh-unread-messages-count

Sample usage

For the purposes of this example, we will focus on changing the colour of a sample text in White Label Channel Manager.

By default, the active apartment's name (3) is blue.

Create a new CSS rule. Use the .ps-clusters-list-unit-details .apartment-name-cell span element and set required attributes. In this case, the code should look like below:

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

The result is that the active apartment's name (3) changed to red.

Note: It may be necessary to use !important in order to override some styles.

Additional information

Refresh your master tokens without credentials

This method allows you to refresh tokens without the need to provide full account credentials. It can be used to regularly refresh your tokens and avoid their expiration. Instead of providing master account credentials, use the current Master Refresh Token to generate a new pair of tokens.

Request: POST

URL: https://webapi.rentalsunited.com/whitepms/oauth2/token

Content type: application/x-www-form-urlencoded

Body:

  • grant_type: refresh_token

  • refresh_token: [master_refresh_token]

 

In response, you will receive a new pair of master account tokens:

  • Master Token: "access_token"

  • Master Refresh Token: "refresh_token"

 

Upgrade to 2.0

If you want to add additional features to your PMS, you need to upgrade to the newest version of White Label Channel Manager. You will get access to the following features:

  • Multiple rate plans management for Booking.com

  • Multiple rate plans management for Expedia

  • Channel mark-up display in the Property Settings page

  • Special feature coming soon: Channel mark-up on fees and taxes

 

How to upgrade to 2.0?

All PMS clients can get access to the 2.0 version in the following cases.

  • If they implemented White Label Channel Manager using the One-line script option, they need to manually add a piece of code to the script. New clients using this method will get access to the 2.0 version automatically.

     

    1. Below you can see an exemplary one-line script that enables White Label Channel Manager in your PMS.

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

    2. Copy the following snippet: &uiVersion=2" .

    3. Paste it to the end of the URL. You will receive the following script:

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

       

  • If they implement White Label Channel Manager using the HTML code, they need to manually add a custom piece of code to the response received from Rentals United API to enable the 2.0 version in their PMS.

     

    1. Below you can see an exemplary response from Rentals United API.

    2. Copy the following snippet: ui_version="2" .

    3. Paste it between languageid="1" and ng-version="7.1.0".