Customization of the confirmation email via labels

Modified on Fri, 17 Mar, 2023 at 10:43 AM

This manual provides you with the steps and information necessary to create a fully personalized confirmation email template.

The template shall be laid out in HTML language using Mustache template language to render the booking information:

http://mustache.github.io/mustache.5.html

In order to validate the template with test data, follow the instructions in the section: "How to test the personalised confirmation email" of this manual (below).

The styles should be applied as inline to reduce the chance of them being displayed incorrectly in different mailing services. An easy way to do this is through tools like the following one: https://putsmail.com/inliner

They should have a maximum size of 64KB. You can use HTML minifiers to reduce the size of the template (this step should be done after inlining the styles). http://minifycode.com/html-minifier/

To test how the template styles look like when they are sent by email you can use the following link: https://putsmail.com/tests/new

As an example, you can consult the layout of the voucher currently being sent by clicking on the following link.

TYPES OF EMAILS

Via labels it is possible to configure the three types of emails by entering the template and selecting the appropriate "Email Type":

Confirmation email

In order for the customer and the hotel to receive confirmation of the booking, the system automatically sends an e-mail to both at the time the booking is made.

Pre-stay email

This email will be sent automatically to guests with bookings registered on the engine and it is possible to schedule the message to be sent a certain number of days before the Check-in.

It is useful to remind the guest that their arrival day is approaching and also to offer them other types of promotions or communicate any information that may be of interest to them.

Post-stay email

This type of email is used to thank the guests for their stay, and can be scheduled to be sent a certain number of days after the check-in.

Below you will find the labels that will be replaced by the values of each reservation:

Important: variables marked with HTML have HTML content, in this case, to render them you have to use three braces {{{ }}}}.

For example: {{{conditionInfo.checkOut}}}

BOOKING DETAILS

roomStayId → Reservation identifier (e.g. P6017034).

reservationId → Multiple reservation identifier (e.g. M2931360).

reservationStatus → Reservation status (e.g. confirmed).

property.name → Name of the hotel.

property.address → Address of the hotel.

property.city → City of the hotel.

property.country → Country of the hotel.

property.phoneNumber → Hotel contact phone number.

property.email → Hotel contact email.

CUSTOMER DATA

customer.name→ Customer's name.

customer.lastName → Customer's last name.

customer.email → Customer's email.

customer.idCard → Customer's ID number.

customer.adress → Customer’s address.

customer.country → Customer's country.

customer.phoneNumber → Customer's contact phone number.

arrivalTime → Arrival time defined by the customer at the time of the reservation.

comments → Additional comments defined by the customer at the time of reservation.

DATES:

startDate → Date of entry (e.g. 22 December 2017, Fri).

endDate → Departure date (e.g. 23 December 2017, Sat)

creationDate → Booking date (e.g. 2017-12-22 12:03:19)

cancellationDate → Cancellation date (only in case the booking engine has the functionality active).

ROOMSTAY:

units → Room units.

occupation → Number of occupants (e.g. 2 adults).

mealPlan → regime booked (e.g. Accommodation only)

condition → Rate booked (e.g. non-refundable).

inventoryFullName → Full name of the booked sales option (e.g. Double Room, 2 adults, Accommodation Only, Non-refundable).

numberOfOccupants → Total number of persons (e.g. 2).

stayNights → Total number of nights (e.g. 3)

ACCOMMODATION:

accommodationInfo.ticker → Room Ticker (e.g. dbl)

accommodationInfo.name → Room type (e.g. Double Room).

accommodationInfo.description → Room description. HTML

accommodationInfo.media → List of media objects. Each object has the following properties:

url: url of the object

title: title

description: description

Examples of use:

Show all images:

<div>

</div>

Show only the first image:

Show only the last image:

DISCOUNTS:

(*) List of discounts where each item has the following variables:

name → Name of the promotion (e.g. Early Booking Promotion).

baseAmount → Taxable base of the promotion (e.g. 250.00)

percentage → Discount applied by the promotion (e.g. 10%)

amount → Total amount discounted (e.g. 25.00)

E.g. of use

{{#discounts}}

<b>{{name}}:</b>

{{baseAmount}}

{{#percentage}}

x {{reduction}} %

{{/percentage}}

{{^percentage}}

- {{reduction}} {{currency}}

{{/percentage}}

{{amount}} {{currency}}

{{/discounts}}

EXTRAS:

Services

(*) List of extras where each item has the following variables:

name → Name of the extra service (e.g. Late check out)

units → Number of units of the extra service (e.g. 2)

pricePerUnit → Unit price of the extra service (e.g. 10.00)

amount → Total amount of the extra service resulting from multiplying units by unit price (e.g. 20.00)

{{#services}}

<b>{{name}}:</b>

{{units}}

x {{pricePerUnit}}

= {{amount}} {{currency}}

{{/services}}

TOTAL:

baseAmount → Total amount of accommodation booked without discounts and extras. (e.g. 500.00)

totalAmount → Total amount of the booking. (e.g. 600.00)

currency → Currency of the booking (e.g. EUR).

guaranteeAmount→ Amount of advance payment in case of deposits (e.g. 200.00).

pendingAmount → Amount pending payment (e.g. 400.00).

BREAKDOWN OF THE PRICE PER NIGHT:

dailyPrices

(*) List of dates and prices of the stay where each element has the following variables:

date → Date of stay (e.g. 22-12)

amount → Price per night (e.g. 200.00)

E.g. of use

{{#dailyPrices}}

{{date}}:

{{amount}}

{{/dailyPrices}}

CONDITIONS:

conditionInfo.cancellation → Text defined by the hotel containing information about the cancellation policy and prepayment. HTML

conditionInfo.checkIn → Text defined by the hotel used to determine the check-in time. HTML

conditionInfo.checkOut → Text defined by the hotel used to determine the check-out time. HTML

conditionInfo.child → Text defined by the hotel containing information about the specific policy for children and extra beds. HTML

conditionInfo.pet → Text defined by the hotel containing information about the specific policy for pets. HTML

conditionInfo.group → Text defined by the hotel containing information about group-specific policies. HTML

conditionInfo.additional → Text defined by the hotel containing additional information about privacy policy and other legal conditions. HTML

isCancelable → Parameter sent to indicate that the booking is cancellable. It will be used to define content only for cancellable or non-cancellable options.

reservationUrl → Link that redirects to the reservation voucher and from where the user will have the option to cancel.

LOGO:

logo.src → Logo of the establishment loaded in the booking engine.

logoEmail.src → Email logo of the establishment loaded in the booking engine.

*For rendering lists, see the Mustache manual in the Non-Empty Lists section.

CANCELLATION POLICIES:

Implement the cancellation restrictions box (Dates / Penalty):

First of all, you have to contact the support team to activate this functionality.

Then add the following snippet to the custom email template:

<br/>

<div>

<b style="font-weight: 700;text-transform: capitalize;">Restricciones cancelación</b>

</div>

<br/>

<tr>

<th style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">Fechas</th>

<th style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">Penalización</th>

</tr>

</thead>

<tbody>

<tr>

<span>Hasta el</span> <span>{{this.startDate}}</span>

<span>Desde</span>

<span>{{this.startDate}}</span>

<span>{{this.endDate}}</span>

</td>

<span>{{this.currency}}</span> <span> {{this.penalty.amount}} <span>(Primera noche)</span></span>

<span>{{this.currency}}</span> <span> {{this.penalty.amount}} <span>({{this.penalty.percentage}}%)</span></span>

</td>

</tr>

</tbody>

</table>

</div>

Implement the description of cancellation policies:

Add to the custom email template the following snippet:

<div>

<p>{{{cancellationPolicyHtml}}}</p>

</div>

In this case, in order for the label to be displayed, the checkbox "Deadline for online cancellation" must be activated under "Settings" > "Behaviour".

HOW TO TEST THE PERSONALISED CONFIRMATION EMAIL:

During the development of the personalised mail you can validate the programming of the JSON file on the following website: http://tryhandlebarsjs.com

Once in the interface, paste the layout of the personalised mail in the "Handlebars Template" section and the following code in the "Context (JavaScript literal or JSON)" field:

{

"idConfirmation": "P5203525",

"reservationId": "M6004856",

"reservationStatus": {

"isCanceled": false,

"isConfirmed": true,

"isPaymentPending": false,

"isPending": false,

"isPaymentConfirmed": true,

"isPaymentFailed": false,

"isPaymentExpired": false

"reservationUrl": "http://engine.witbooking.com/demo_urbano/booking-confirmation/M6004856",

"locale": "es",

"roomStayId": "P5203525",

"agentName": null,

"customHeader": null,

"customFooter": null,

"property": {

"name": "Demo Hotel Urbano",

"address": "Aribau 230-240, 5ºB",

"phoneNumber": "930 013 880",

"email": "m.carreno@witbooking.com",

"country": "ES",

"city": "Barcelona"

"customer": {

"name": "Miguel",

"lastName": "Carreno",

"address": null,

"phoneNumber": null,

"email": "m.carreno@witbooking.com",

"idCard": null,

"country": "ES"

"arrivalTime": null,

"comments": "",

"startDate": "27-08-2018",

"endDate": "31-08-2018",

"creationDate": "30-07-2018 09:23:44",

"cancellationDate": null,

"cancellationCause": null,

"stayNights": 4,

"units": 1,

"numberOfOccupants": 2,

"accommodation": "Superior",

"mealPlan": "Sólo alojamiento ",

"condition": "No reembolsable",

"occupation": "2 adultos",

"inventoryFullName": "Superior, 2 adultos, Sólo alojamiento , No reembolsable",

"dailyPrices": [{

"date": "27-08-2018",

"amount": 95.00

}, {

"date": "28-08-2018",

"amount": 95.00

}, {

"date": "29-08-2018",

"amount": 95.00

}, {

"date": "30-08-2018",

"amount": 95.00

}],

"discounts": [{

"name": "Early bird",

"amount": -38.00,

"reduction": -10.00,

"baseAmount": 380.00,

"percentage": true

}],

"services": [{

"name": "Late Check-out",

"units": 1,

"pricePerUnit": 10.00,

"amount": 10.00

}, {

"name": "Recogida en Aeropuerto",

"units": 1,

"pricePerUnit": 45.00,

"amount": 45.00

}],

"currency": "EUR",

"baseAmount": 380.00,

"totalAmount": 397.00,

"guaranteeAmount": 198.50,

"pendingAmount": 198.50,

"conditionInfo": {

"ticker": "nr",

"cancellation": "<p><strong>Política de Reservas y Cancelaciones:</strong></p>\r\n<p class=\"full\"><strong>Cancelaciones: </strong>Atención: si cancelas, modificas o no te presentas, el establecimiento cargará la estancia completa.</p>\r\n<p class=\"full\"><strong>Pago por adelantado:</strong> Se cargará el importe total en el momento de efectuar la reserva.</p>",

"checkIn": "<p>12:00</p>",

"checkOut": "<p>14:00</p>",

"child": "",

"pet": "",

"group": "",

"additional": ""

"accommodationInfo": {

"ticker": "superior",

"name": "Superior",

"description": "<p>Nuestra habitación Superior consta de 30 m² acondicionados para tu confort con una cama extra grande de 200 x 200 cm. De estilo moderno, acogedor y minimalista. Cuarto de baño equipado y con ducha.</p>",

"media": [{

"index": 0,

"first": true,

"last": false,

"value": {

"url": "https://s3.eu-central-1.amazonaws.com/witbooking.content.user/demo_urbano/tiposalojamiento/15/superiormotor.jpg",

"title": "",

"description": "",

"order": 1

}

}, {

"index": 1,

"first": false,

"last": true,

"value": {

"url": "https://s3.eu-central-1.amazonaws.com/witbooking.content.user/demo_urbano/tiposalojamiento/15/superiormotor2.jpg",

"title": "",

"description": "",

"order": 2

}

}]

"logo": {

"url": "https://engine.witbooking.com/demo_urbano",

"src": "https://s3.eu-central-1.amazonaws.com/witbooking.content.user/demo_urbano/logo/2/LogoWitbooking_2017_Blanco-urb.png"

"logoEmail": {

"url": "https://engine.witbooking.com/demo_urbano",

"src": null

"emailSettings": {

"showLogo": true,

"showHeader": false,

"useCustomHeaderAndFooter": true,

"showConditionsInHotelEmail": false,

"showFooterInHotelEmail": false,

"showAgent": true

"isCancelable": true

}

From the booking engine’s extranet you can test the sending of the uploaded templates by going to Communication > Personalised email > Upload templates and leaving the "Active" field unchecked.

To test how the template styles look like when they are sent by email you can use the following link: https://putsmail.com/tests/new

Once saved, a test email can be sent via the envelope icon on the interface:

Finally, once you have checked that the personalised email is received and displayed correctly, you can proceed with the activation of the sending of the personalised email.