How to use the editor to make your own HTML Templates

The WBE editor can be used to create your own, simple, HTML templates.

The most simple form is just text and images, but this never looks too good!

To get to the editor, go to https://cloud-reservations.net and login. Then navigate to either Hotels > Text (all bookings) or F&B > Text (restaurant bookings) depending on what template you wish to create.

In order to get the most out of our WBE editor, I recommend using Tables. Follow the below tips to get started.

1. Always create a 1x1 Table to act as the base of your template. I recommend setting it's width to no more than 600px.
   • You can change a tables settings by clicking  - This will also allow you to change the background colour of the table cells which can be useful for when you wish to make your own buttons.
2. For each "element" you wish to add to your template, i recommend adding a new table. For example, if you wish to add a header image, first add another 1x1 table and then add the image within that.
   1. If you do this right, you will likely have at least 3 or 4 tables within the main table - Header, Hero image, Content, Footer
   2. Tip regarding Header images - If you want them to be central, I recommend using a 3 column table with the image in the centre. This will ensure that all browsers display it in the centre as some will ignore styling and it will just align to the left.
3. If you wish to add multiple columns then add a table with multiple columns.

I have attached a template that was made using our WBE editor to show a basic overview of what can be done with it. Feel free to use it if you wish. 

I have also attached a template that we use as a base template for many hotels. You may also use this if you like.

Smart Tags

Templates use Smart tags to pull in the required data that you wish to pass to your customers. To do this, we encapsulate the tags in $ signs. i.e. $$Name$$ pulls in guest name.

To add smart tags to your WBE Template: 

1. In the Texts window, find the  button, click it and you will see a dropdown and an Add button.
2. Select the desired tag from the dropdown and click add.
   
3. You should then see the tag in the editor.