Personalización de emails a través de etiquetas

En el presente manual se facilitan los pasos y la información necesaria para maquetar las plantillas de email de totalmente personalizadas.

1. La plantilla se deberá maquetar en lenguaje HTML utilizando el lenguaje de plantilla Mustache para renderizar la información de la reserva: http://mustache.github.io/mustache.5.html 
   
   
2. Para validar la plantilla con datos de prueba, seguir las instrucciones del apartado “Como probar los emails personalizados” de este manual (abajo).
   
   
3. Los estilos deben aplicarse en forma inline, para disminuir las posibilidad de que se visualicen incorrectamente en los distintos servicios de mailing. Una manera sencilla de hacer esto es a través de herramientas como la siguiente: https://putsmail.com/inliner
   
   
4. Deberán tener un tamaño máximo de 64KB. Puede utilizar minificadores de HTML para reducir el tamaño de la plantilla (este paso se deberá realizar después de hacer el inlining de los estilos). https://codebeautify.org/minify-html o https://www.willpeavy.com/tools/minifier/
   
   
5. Para probar como se ven los estilos de las plantillas cuando se envían por email puede utilizar el siguiente enlace:https://putsmail.com/tests/new
   
   

A modo de ejemplo, podrás consultar la maquetación del bono que se envía actualmente en el siguiente enlace.

TIPOS DE EMAILS

A través de etiquetas es posible configurar los tres tipos de emails, introduciendo la plantilla y seleccionando el "Tipo de Email" que corresponda:

• Email de confirmación
  Para que el cliente y el hotel reciban la confirmación de la reserva, el sistema envía de forma automática un e-mail a ambos en el momento que se produce la reserva.
  
  
• Email pre estancia
  Este email se enviará, automáticamente, a los huéspedes con reservas registradas en el motor y es posible programar el envío del mensaje a un número determinado de días previos al Check-in.
  
  Es útil para recordar al huésped que se acerca su día de llegada y además ofrecerles otros tipos de promociones o comunicarle cualquier información que pueda ser de su interés.
  
  
• Email post estancia
  Este tipo de e-mails sirven para agradecer la estancia al cliente, es posible programar el envío a un número determinado de días posteriores al Check-in.
  
  
• Email abandono de carrito
  Este tipo de e-mail sirve para intentar aumentar la conversión, y que el cliente que ha abandonado el proceso de reserva en checkout, acabe finalizando la reserva. Manual configuración.

A continuación encontrarás las etiquetas que se reemplazarán por los valores de cada reserva:  

Nota importante: las variables marcadas con HTML tienen contenido HTML, en este caso, para renderizarlas han de utilizar tres llaves {{{    }}}. 

Ejemplo: {{{conditionInfo.checkOut}}} 

DATOS DE LA RESERVA

roomStayId → Identificador de reserva (ej. P6017034).

reservationId → Identificador de reserva múltiple (ej. M2931360).

reservationStatus → Estado de la reserva (ej. confirmado).

property.name → Nombre del hotel.

property.address → Dirección del hotel.

property.city → Ciudad del hotel. 

property.country → País del hotel.

property.phoneNumber → Teléfono de contacto del hotel. 

property.email → Email de contacto del hotel.

DATOS DEL CLIENTE

customer.name→ Nombre del cliente.

customer.lastName → Apellido del cliente.

customer.email → Email del cliente. 

customer.idCard → Número de DNI.

customer.adress → Dirección del cliente. 

customer.country → País del cliente. 

customer.phoneNumber → Teléfono de contacto del cliente. 

arrivalTime → Hora de llegada definida por el cliente en el momento de realizar la reserva. 

comments → Comentarios adicionales definidos por el cliente en el momento de realizar la reserva.  

customer.tier → Tier o nivel de loyalty de un usuario. (Sólo en caso que el motor tenga activa la funcionalidad "sistema de fidelización"). 

FECHAS: 

startDate → Fecha de entrada (ej 22 diciembre 2017, vie) 

endDate → Fecha de salida (ej. 23 diciembre 2017, sab)

creationDate → Fecha de reserva (ej. 2017-12-22 12:03:19) 

cancellationDate → Fecha de cancelación (sólo en caso que el motor tenga activa la funcionalidad).

ROOMSTAY: 

units → Unidades de habitación.

occupation → Número de ocupantes (ej. 2 adultos).

mealPlan → Régimen reservado (ej. Sólo Alojamiento).

condition → Tarifa reservada (ej. No reembolsable).

inventoryFullName → Nombre completo de la opción de venta reservada (ej. Habitación Doble, 2 adultos, Sólo alojamiento, No reembolsable)

numberOfOccupants → Número total de personas (ej. 2).

stayNights → Número total de noches (ej. 3)

ALOJAMIENTO: 

accommodationInfo.ticker → Ticker de habitación (ej. dbl) 

accommodationInfo.name → Tipologia de habitación (ej. Habitación Doble).

accommodationInfo.description → Descripción de la habitación. HTML

accommodationInfo.media → Listado de objetos media. Cada objeto tiene las siguientes propiedades:

url: url del objeto
title: titulo
description: descripción

Ejemplos de uso: 

DESCUENTOS: 

discounts

(*) Listado de descuentos donde cada elemento tiene las siguientes variables:

name → Nombre de la promoción (ej. Promoción Early Booking)

baseAmount → Base imponible de la promoción (ej. 250.00)

percentage → Descuento que aplica la promoción (ej. 10%)

amount → Importe total descontado (ej. 25.00) 

Ej, de uso

{{#discounts}}

{{name}}:
{{baseAmount}}
{{#percentage}}
    x {{reduction}} %
{{/percentage}}
{{^percentage}}
    - {{reduction}} {{currency}}
{{/percentage}}
=
{{amount}} {{currency}}

{{/discounts}}

EXTRAS: 

services

(*) Listado de extras donde cada elemento tiene las siguientes variables:

name → Nombre del servicio extra (ej. Late check out)

units → Número de unidades del servicio extra (ej. 2)

pricePerUnit → Precio unitario del servicio extra (ej. 10.00)

amount → Total del servicio extra resultante de multiplicar unidades por precio unitario (ej. 20.00) 

{{#services}}

{{name}}:
{{units}}
x {{pricePerUnit}}
= {{amount}} {{currency}}

{{/services}} 

TOTAL: 

baseAmount → Importe total del alojamiento reservado sin descuentos ni extras. (ej. 500.00)

totalAmount → Importe total de la reserva. (ej. 600.00)

currency → Divisa de la reserva (ej. EUR).

guaranteeAmount→ Importe del pago anticipado en caso de depósitos (ej. 200.00).

pendingAmount → Importe pendiente de pago (ej. 400.00). 

DESGLOSE DEL PRECIO POR NOCHE: 

dailyPrices

(*) Listado de fechas y precios de la estancia donde cada elemento tiene las siguientes variables:

date → Fecha de estancia (ej. 22-12)

amount → Precio de la noche (ej. 200.00) 

Ej. de uso

{{#dailyPrices}}
    {{date}}:
    {{amount}}
{{/dailyPrices}}

IMPUESTOS Y TASAS:

• totalAmountBeforeTaxes → importe total  de la reserva descontando impuestos (ej: 112.23)
• totalAmountWithFees →  importe total de la reserva agregando tasas (ej. 123.00)
• taxations →   lista de información de impuestos y tasas ordenados primero por tipo (primero impuestos y luego tasas) y segundo por el orden en BO. 

• Cada item de la lista tiene:
  • ticker →  ticker del impuesto o tasa (ej. iva - ej. city_tax)
  • name →  nombre del impuesto o tasa (ej. VAT Percentage)
  • type →   identificador del item, si es impuesto o tasa. Posibles valores:
    • TAX →   impuesto
    • FEE →   tasa
      
      
  • typology→   identificador para la forma del calculo del impuesto o tasa. Posibles valores:
    • PERCENTAGE →  : calculo por porcentaje
    • PER_PERSON →  calculo por persona
    • PER_PERSON_PER_NIGHT→calculo por persona por noche
    • PER_STAY→   calculo por estancia
    • PER_STAY_PER_NIGHT →   calculo por estancia por noche
    • BALEARIC →   calculo por normativa de baleares
      
      
  • amount →   monto  de apoyo para el calculo de impuesto y tasas. Para cada typology representa un valor diferente 
    • PERCENTAGE →  porcentaje de impuestos (ej. 15 significa 15%)
    • PER_PERSON →   monto por persona 
    • PER_PERSON_PER_NIGHT→   monto por persona por noche
    • PER_STAY→  monto por estancia
    • PER_STAY_PER_NIGHT→   monto por estancia por noche
    • BALEARIC →   monto por tipo de hotel para baleares
      
      
  • totalAmount →  monto total del impuesto o la tasa (ej. 3.00)
    
    
• ejemplo info en taxations:

[
                {
                    "ticker": "iva",
                    "name": "IVA",
                    "type": "TAX",
                    "typology": "PERCENTAGE",
                    "amount": 10,
                    "totalAmount": 60.00
                },
                {
                    "ticker": "city_tax",
                    "name": "Taxa turística",
                    "type": "FEE",
                    "typology": "PER_PERSON_PER_NIGHT",
                    "amount": 3.3,
                    "totalAmount": 9.90
                }
]

{{#if this.taxations}}
<div>
    <div translate>
        "reservation_confirmed.reservation_price.TAXES_EXCLUDED" ({{this.currency}}): {{this.totalAmountBeforeTaxes}}
    </div>
</div>
{{#each this.taxations}}
<div>
    &nbsp; + {{this.name}} ({{currency}}): {{this.totalAmount}}
</div>
{{/each}}
{{/if}}
{{#if this.taxations}}
<div>
    <b translate style="font-weight: 700;">
        "reservation_confirmed.total" ({{this.currency}}):
        {{this.totalAmountWithFees}}
    </b>
</div>
{{else}}
<div>
    <b translate style="font-weight: 700;">
        "reservation_confirmed.total" ({{this.currency}}):
        {{this.totalAmount}}
    </b>
</div>
{{/if}}

CONDICIONES: 

conditionInfo.cancellation → Texto definido por el hotel que contiene información acerca de la política de cancelación y el pago por adelantado. HTML

conditionInfo.checkIn → Texto definido por el hotel que se utiliza para definir la hora de entrada. HTML

conditionInfo.checkOut → Texto definido por el hotel que se utiliza para definir la hora de salida. HTML

conditionInfo.child → Texto definido por el hotel que contiene información acerca de la política específica para niños y camas supletorias. HTML

conditionInfo.pet → Texto definido por el hotel que contiene información acerca de la política específica para mascotas. HTML

conditionInfo.group → Texto definido por el hotel que contiene información acerca de la políticas específicas para grupos. HTML

conditionInfo.additional → Texto definido por el hotel que contiene información adicional acerca de la política de privacidad y otras condiciones legales. HTML

isCancelable → Parámetro que se envía para indicar que la reserva es cancelable. Se utilizará para definir contenidos sólo para opciones cancelables o no cancelables.  

reservationUrl → Enlace que redirige al bono de la reserva y desde dónde el usuario tendrá la opción de cancelar. 

LOGO: 

logo.src → Logo del establecimiento cargado en el motor.  

logoEmail.src → Logo email del establecimiento cargado en el motor. 

*Para renderizar listas, consultar el manual de Mustache en la sección Non-Empty Lists

DATOS DE LA AGENCIA Y/O EMPRESA*

*(Utilizar en motores que usen la funcionalidad "sistema de fidelización" y tengan creadas empresas y/o agencias).

loyaltyCustomerOrganization → Empresa.
loyaltyCustomerOrganization.isAgency → Agencia.

loyaltyCustomerOrganization.name → Nombre de la empresa/ agencia.
loyaltyCustomerOrganization.phone → Teléfono de la empresa/ agencia. 

loyaltyCustomerOrganization.cif → CIF de la empresa/ agencia. 
loyaltyCustomerOrganization.iata → IATA de la empresa/ agencia. 

loyaltyCustomerTier.promotedDiscount → Información comisión.

loyaltyCustomerTier.promotedDiscount.amount → Información  importe comisión.

loyaltyCustomerTier.promotedDiscount.percentage → Información  porcentaje comisión.

loyaltyCustomerTier.promotedDiscount.baseAmount → Importe base.

Ejemplos  de código (contienen estilos de nuestra plantilla default):

Detalles de la empresa/ agencia:

{{#loyaltyCustomerOrganization}}
                <div class="panel panel-default" style="margin-bottom: 20px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.05); webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);background-color: #fff;border: 1px solid transparent;max-width: 723px;border-color: #ddd;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;">
                    <div class="panel-heading" style="color: #333;border-color: #ddd;font-family: Arial, Helvetica, sans-serif;font-size: 12px; border-width: 1px;box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);margin-bottom: 0;padding: 10px 15px;border-bottom: 1px solid transparent;border-top-right-radius: 3px;border-top-left-radius: 3px;background-color: #E9E9E9 !important;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;">
                        <h3 class="panel-title" style="margin-top: 0;margin-bottom: 0;font-size: 16px;color: inherit;">
                            {{#if loyaltyCustomerOrganization.isAgency}}
                            <b style="font-weight: 700;">Información Agencia </b>
                            {{else}}
                            <b style="font-weight: 700;">Información Empresa:</b>
                            {{/if}}
                        </h3>
                    </div>
                    <div class="panel-body" style="background-color: #fff;padding: 15px;">
                        {{#if loyaltyCustomerOrganization.isAgency}}
                        <b style="font-weight: 700;">Nombre Agencia:</b> {{loyaltyCustomerOrganization.name}}<br>
                        {{else}}
                        <b style="font-weight: 700;">Nombre Empresa:</b> {{loyaltyCustomerOrganization.name}}<br>
                        {{/if}}
                        <b style="font-weight: 700;">E-mail:</b> {{loyaltyCustomerOrganization.email}}<br>
                        <b style="font-weight: 700;">Dirección:</b> {{loyaltyCustomerOrganization.address}}<br>
                        <b style="font-weight: 700;">CIF:</b> {{loyaltyCustomerOrganization.cif}}<br>
                        {{#loyaltyCustomerOrganization.iata}}
                        <b style="font-weight: 700;">IATA:</b> {{loyaltyCustomerOrganization.iata}}<br>
                        {{/loyaltyCustomerOrganization.iata}}
                        {{#loyaltyCustomerOrganization.isAgency}}
                            {{#loyaltyCustomerTier.promotedDiscount}}
                                <b style="font-weight: 700;">Comisión:</b> {{loyaltyCustomerTier.promotedDiscount.amount}} {{#loyaltyCustomerTier.promotedDiscount.percentage}}%{{/loyaltyCustomerTier.promotedDiscount.percentage}}<br>
                            {{/loyaltyCustomerTier.promotedDiscount}}
                        {{/loyaltyCustomerOrganization.isAgency}}
                        <b style="font-weight: 700;">Teléfono:</b> {{loyaltyCustomerOrganization.phone}}
                    </div>
                </div>
                {{/loyaltyCustomerOrganization}}

{{#loyaltyCustomerOrganization.isAgency}}
                            {{#loyaltyCustomerTier.promotedDiscount}}
                                <b style="font-weight: 700;">Comisión:</b>{{loyaltyCustomerTier.promotedDiscount.amount}} {{#loyaltyCustomerTier.promotedDiscount.percentage}}%{{/loyaltyCustomerTier.promotedDiscount.percentage}} ({{loyaltyCustomerTier.promotedDiscount.baseAmount}} {{currency}})<br>
                            {{/loyaltyCustomerTier.promotedDiscount}}{{/loyaltyCustomerOrganization.isAgency}}

POLÍTICAS DE CANCELACIÓN:

Implementar el recuadro con las restricciones de cancelación (Fechas / Penalización) y la descripción de la política de cancelación. 

En este caso, para que se muestre la etiqueta, el motor debe tener configuradas y visibles tanto en el motor como en el bono de reservas las políticas de cancelación correctamente en la extranet del motor. (Consultar con el establecimiento o con nuestro departamento de soporte):

• Políticas configuradas
• Activo el check-box de mostrar "Fecha limite para cancelación online"  (en "Configuración" > "Comportamiento" > "Mostrar elementos") 
• Activo el check-box para mostrar la tabla de restricciones de cancelación en el bono de la reserva. 

A continuación hay que añadir el siguiente fragmento a la plantilla de email personalizada (los estilos son los de nuestra plantilla default):

<div class="panel-body conditions" style="background-color: #fff;padding: 15px;">
                        {{#conditionInfo}}
                        {{#cancellation}}
                        <div class="condition-entry">
                            <b style="font-weight: 700;text-transform: capitalize;">"reservation_confirmed.cancellation.cancelPrepay":</b>
                            <br/>
                            <p>{{{cancellationPolicyHtml}}}</p>
                            <div>
                                <a style="text-transform: none !important;text-decoration: none;" class="link-cancel"
                                   href="{{reservationUrl}}" target="_blank">"reservation_confirmed.reservation_information.seeConditions"
                                </a>
                            </div>
                            {{#cancellationRestrictions.show}}
                            <br/>
                            <div>
                                <div class="condition-entry">
                                    <b style="font-weight: 700;text-transform: capitalize;">"cancellation_restrictions.title"</b>
                                </div>
                                <br/>
                                <div style="background-color: #fff;">
                                    <div style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin-bottom: 15px;color: rgb(34, 34, 34);">
                                        <table style="width:100%;border:1px solid rgb(225, 225, 225);border-radius: 5px;border-spacing: 0;text-align: left;border-collapse: collapse;">
                                            <thead style="font-weight: 700;background-color: rgb(246, 246, 246);">
                                            <tr>
                                                <th style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">"cancellation_restrictions.dates"</th>
                                                <th style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">"cancellation_restrictions.penalty"</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {{#each cancellationRestrictions.restrictionList}}
                                            <tr>
                                                <td style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">
                                                    {{#unless this.endDate}}
                                                    <span>"cancellation_restrictions.from"</span> <span>{{this.startDate}}</span>
                                                    {{else}}
                                                    <span>"cancellation_restrictions.from"</span>
                                                    <span>{{this.startDate}}</span>
                                                    <span>"cancellation_restrictions.to"</span>
                                                    <span>{{this.endDate}}</span>
                                                    {{/unless}}
                                                </td>
                                                <td style="padding: 12px;border: 0.5px solid rgb(225, 225, 225);">
                                                    {{#if this.penalty.firstNight}}
                                                    <span>{{this.currency}}</span> <span> {{this.penalty.amount}} <span>("cancellation_restrictions.firstNight")</span></span>
                                                    {{else}}
                                                    <span>{{this.currency}}</span> <span> {{this.penalty.amount}} <span>({{this.penalty.percentage}}%)</span></span>
                                                    {{/if}}
                                                </td>
                                            </tr>
                                            {{/each}}
                                            </tbody>
                                        </table>
                                        <div style="padding: 10px;">"cancellation_restrictions.local_time"</div>
                                    </div>
                                </div>
                            </div>
                            {{/cancellationRestrictions.show}}
                            {{{cancellation}}}
                        </div>
                        {{/cancellation}}
                        {{/conditionInfo}}
                    </div>

COMO PROBAR LOS EMAILS PERSONALIZADOS:

Durante el desarrollo del mail personalizado se puede validar la programación del archivo JSON en el siguiente sitio web: https://pismute.github.io/Try-Dashbars/

Una vez en la interfaz se pegará la maquetación del mail personalizado en el apartado de "Handlebars Template" y el siguiente código en el campo de "Context (JavaScript literal or JSON)": 

{
  "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": "Política de Reservas y Cancelaciones: Cancelaciones: Atención: si cancelas, modificas o no te presentas, el establecimiento cargará la estancia completa. Pago por adelantado: Se cargará el importe total en el momento de efectuar la reserva.",
    "checkIn": "12: 00",
    "checkOut": "14: 00",
    "child": "",
    "pet": "",
    "group": "",
    "additional": ""
  },
  "accommodationInfo": {
    "ticker": "superior",
    "name": "Superior",
    "description": "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.",
    "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
}

Para probar como se ven los estilos de las plantillas cuando se envían por email puede utilizar el siguiente enlace: https://putsmail.com/tests/new 

Desde la extranet del motor puede realizar test de envío de las plantillas cargadas dirigiéndose a Comunicación > Emails personalizados > Cargar las plantillas y dejar deseleccionado el campo de "Activo".

Una vez guardada, se podrá enviar un email de prueba a través del icono del sobre que aparecerá en la interfaz: 

Finalmente, una vez comprobado que se recibe y se visualiza correctamente el email personalizado podrá proceder con la activación del envío.

EMAIL DE CANCELACIÓN

La plantilla de email que se envía al cliente es siempre la misma por eso es necesario personalizar el texto para los diferentes estados de reserva mediante etiquetas.

En el caso de querer mostrar un texto diferente cuando la reserva se haya cancelado hay que ponerlo entre las siguientes etiquetas:

{ { #reservationStatus.isCanceled} } Reserva cancelada { { /reservationStatus.isCanceled } }

Del mismo modo el texto para la reserva confirmada deberá de ponerse entre las siguientes etiquetas:

{ { #reservationStatus.isConfirmed } } Reserva confirmada { { /reservationStatus.isConfirmed } }

Todo el texto que compartan las dos plantillas (confirmada / cancelada) no es necesario ponerlo entre estas etiquetas.