Install & Customise

This article explains how to install the White Label Channel Manager within your software with minimal development. You will learn how to generate authorization tokens, request the necessary HTML or script, and embed the solution into your platform to provide a seamless experience for your clients.

Getting started

Before you begin the installation, ensure you complete the "Integrate & Certify" and "Set up accounts" stages. The subuser account must be assigned to a master account in the Rentals United system for the White Label Channel Manager to function correctly.

Technical prerequisites

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

jQuery 3.4.1 or newer: This is required for the application to run correctly.
Bootstrap v3.3.7: The White Label Channel Manager is bundled with these styles. You can't use other Bootstrap versions on the same page.
Dedicated section: Create a new, dedicated area in your software solely for the White Label Channel Manager.
IP Whitelisting (optional): You can request to whitelist your server IP on the Rentals United side.

Setting up authorization

To display White Label Channel Manager in you page, you must first generate master tokens and then use them to obtain subuser tokens.

Step by step

Generate a Master Token and Master Refresh Token using your master account credentials.
Send a POST request to: https://webapi.rentalsunited.com/whitepms/oauth2/token.
Use the following body parameters:
- grant_type: password
- username: [PMS master account username]
- password: [PMS master account password]
Save the access_token and refresh_token from the response.

Note: The Master Token is valid for 1 hour, and the Master Refresh Token is valid for 1 week. If the refresh token expires, you must use your master credentials to generate a new one.

Refreshing tokens

You are responsible for keeping tokens refreshed so your clients can access the product at any time. We recommend developing an automated solution to refresh tokens while they are still valid. This prevents service interruptions for your subusers.

Installing White Label Channel Manager

You can choose between two installation methods: requesting the full HTML code or using a one-line script.

Option 1: Request HTML code

This method involves requesting the HTML block and injecting it directly into your page.

Request the HTML code from our WebAPI.
Send a GET request to: https://webapi.rentalsunited.com/api/white-pms/client?userName=[USER_NAME]&ownerId=[OWNER_ID].
- [USER_NAME] - client account username
- [OWNER_ID] - optional; it allows the master account to load the page for a given subuser (Owner ID) and view their inventory and connections. You can obtain the list of Owner IDs through Pull_ListAllOwners_RQ.
Use the following header:
- Authorization: Bearer [master access_token]
Copy the following details from the response.
- "token": Subuser Access Token
- "refresh_token": Subuser Refresh Token
- White Label Channel Manager HTML
Inject the HTML code into your software where you want the White Label Channel Manager to appear.
Copy the following snippet ui_version="2" and paste it between languageid="1" and ng-version="7.1.0". This snippet allows enabling the newest version of White Label Channel Manager in your website.

Add the following external scripts and styles within the <head> tags of your page.

<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">

Verify that the White Label Channel Manager displays correctly on your website.

Option 2: One-line script

One-line script is a more streamlined approach using a single script tag to load the application.

Step by step

Obtain the subuser token and refresh_token as described in the authorization steps here.
Add the following <div> element to your website where you want the White Label Channel Manager to show.
```
<div id="ruApp"></div>
```

Add the script below as the last item within the <head> tags of your website.

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

Replace the placeholders in the script:
- [access_token] - Subuser Access Token
- [refresh_token] - Subuser Refresh Token
- [ID] - optional; language to be loaded
  - 1 English
  - 4 French
  - 5 Spanish
  - 6 Italian
- uiVersion=2 - parameter enabling the newest version
- ownerId - optional; it allows the master account to load the page for a given subuser (Owner ID) and view their inventory and connections. You can obtain the list of Owner IDs through Pull_ListAllOwners_RQ.
Verify that the White Label Channel Manager displays correctly on your website.

Customizing look & feel

White Label Channel Manager is fully customizable and completely transparent to your clients (subusers). You can fully adopt it to your software visually.

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.

Clusters list

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

Advanced settings

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

Manual options:

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

Rates page

rp-rate-tile-header
rp-rate-tile-header
rp-rate-tile
rp-rate-tile
rp-rates-page
rp-white-label-rates-page

Notifications

ps-sdu-notifications-header
ps-sdu-notifications-tile
ps-sdu-notifications

Shared components

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:

.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.