Content
Select Design
protel WBE 5 makes it easy for you to adjust its appearance. You simply select one of the prepared designs and a special index file will be generated for you. This file will then only need to be stored to your web server.
Should you want to design the appearance of your WBE individually, you can alternatively upload an exclusive Bootstrap-LESS file.
Open the select design in the "Channel configuration" dialog box and then open the "Designs" tab located to the far-right of the window.
Online Booking > Channel configuration > WBE > Designs
Click on the drop-down menu highlighted in red and then select a design.
Similarities and differences of the two designs are compared below.
|
Design 1 |
Design 2 |
|
|
|
|
|
As soon as you have selected a design, a list of the various themes for this design will be listed at the bottom part of the window. Themes are made up of the same design with varying color combinations. The following screenshot shows the list of themes for "Design 1".
Online Booking > Channel configuration > WBE > Designs
When clicking on a theme's small preview image, a large preview will open in a new tab. As a result, you can simply view all of the themes. Then, select the desired theme and click on the [Use selected theme] button.
As soon as you have clicked the [Use selected theme] button, a new window opens containing the WBE snippet generated for you.
At the top, your design and theme selection will be visible in a frame. Your API key is also contained in the snippet. You will only have to copy the HTML text and save it to the respective location on your webserver using the file name index.html.
Individually customize design
You can also have a web designer individually adjust your protel WBE to match the Hotel's corporate design.
We will therefore be providing you with two different archives containing LESS files (one for Design 1 and one for Design 2).
- In the archives, there is an exclusive LESS file for each theme which can be selected in the protel Cloud Center.
- Each LESS file contains numbered variables so that you can look up the respective elements in the WBE screenshots we have prepared. The screenshots are also comprised in each download archive.
- In order to exclusively adjust the values after having selected a theme, open the respective LESS file for the theme you selected and edit as desired.
- You can also add your own variables in a section at the very end of each LESS file.
| Design 1 | Design 2 | ||
 |
Download zip archive | |
Download zip archive |
After you have done all your changes, you can upload your style file to the protel Cloud Center.
- Select the design for which you have adjusted a theme
- Enter the storage location of the LESS file.
- Enter the name of your theme.
- Upload the file.
It then appears additionally in the list of available themes.
If you mark it and then click the [Use selected theme] button, a window containing the HTML snippet will appear in the standard themes. You will only have to copy the HTML text and save it to the respective location on your web server using the file name index.html.
 |
Note We do explicitly not recommend to implement the protel WBE into an existing page. This can lead to conflicts with other scripts and frameworks which cannot be influenced or fixed by protel. Furthermore, the protel WBE has a responsive design which automatically adjusts itself to any screen size. This, however, only functions when the WBE is accessed as a separate page and is not linked as a fixed container on another page. In addition, the script for Google Analytics only functions if the WBE is implemented on a separate page. |
It is also possible to link the WBE script to an existing page, but in this case the container must not be influenced by other scripts, for example by inherited styles. To make sure that the protel WBE 5 works properly, you have to implement the WBE in a separate page.
Implementing WBE
After you have saved the index file to your web server, enter the WBE base URL. This could look like this, for example:
Online Booking > Channel configuration > WBE > Settings
The WBE base URL must always be supplemented with the following suffix: /#/hotelbooking
Example
|
The URL to your WBE is: |
https://www.yourWebsite.com/WBE5 |
|
The WBE base URL must therefore read: |
https://www.yourWebsite.com/WBE5/#/hotelbooking |
As soon as you have entered the WBE base URL, you can access your WBE with the respective URL. The purely technical part of the integration is now finished. All other configurations will only be need to be done by means of the Cloud Center dialog box.
Making Settings
Alternatives
In the "Settings" tab, you can also determine alternatives, should there not be any rooms available for the desired date.
Place a checkmark next to the options you would like to use.
Languages
"Available Languages" gives you a list of the languages you can select in your WBE.
To add more languages, click on the [...] button. A new window opens.
To the left you will see a list of available languages. Double click on a language to be able to move them to the "Chosen languages" section to the right of the window. Instead of a double click, you can also Drag & Drop them or mark them and use the arrows in the middle to make your selection.
|
Note Please make sure to only select the name of the main language group without regional specifications. Only if you really want to use a regional version of your language, should you explicitly make the regional selection. In principle, an English hotel should select "English" and not "English (UK)". |
In the list of selected languages, use the Radio button to determine which language is to be the default language of your WBE.
Then, click on [Save].
Availability
If you like, you can also set the Countdown room type availability.
As in the example, if you enter a 5, a notice for the room type selection will appear in your WBE as soon as only 5 rooms are available in this room type.