Ir al contenido principal

Diseño de correo electrónico personalizado

En ThinkReservations, los correos que se envían a los huéspedes constan de elementos de estilo que forman un contenedor o "layout", y del cuerpo del mensaje que proviene de una plantilla. En el nivel básico, el layout contiene un encabezado y un pie de página. El contenido del encabezado y del pie de página del layout estándar se obtiene automáticamente de las siguientes páginas:

  • Cinco colores de marca y de acento de la página Email Layout

  • El logotipo del encabezado, de la página Email Rules

  • Los íconos y enlaces de redes sociales de la página Social Media

  • El nombre del negocio, la información de contacto y el sitio web de la página Business Settings

El contenido del cuerpo del mensaje obtiene la información de forma dinámica de la plantilla de correo, la configuración de la habitación y la reserva o la cuenta. El contenido del mensaje (plantilla) admite variables personalizadas, tablas, imágenes, enlaces y más mediante HTML.

Usar el layout de correo estándar permite que cualquier persona haga ciertos cambios en el diseño y, al mismo tiempo, mantenga un correo estable, limpio y de aspecto profesional que tus huéspedes podrán ver en una gran variedad de clientes y programas de correo.

ThinkReservations ofrece una opción avanzada que permite a una persona con conocimientos de HTML y CSS crear un layout o contenedor personalizado que reemplace al estándar incluido en tu cuenta.

Si usas el layout de correo personalizado avanzado, ten en cuenta lo siguiente:

  • Los layouts de correo personalizados no son obligatorios para enviar correos. Se recomienda el layout de correo estándar.

  • ThinkReservations no ofrece soporte para los layouts de correo personalizados más allá de este documento. Cuando personalizas tu propio layout de correo en HTML, el negocio se hace responsable de él.

  • ThinkReservations no ofrece servicios de diseño personalizado para el layout de correo. Te recomendamos trabajar con tu empresa de marketing o con un diseñador o desarrollador web para recibir ayuda.

  • Casi como un castillo de naipes, mientras más complejos sean los estilos y diseños, menos probable es que el cliente o programa de correo del huésped los muestre como se pretendía.

  • La apariencia final de un correo depende, en última instancia, del programa de correo del destinatario. Haz pruebas en varios clientes y programas de correo, tanto de escritorio como móviles, para asegurarte de que tu diseño se vea bien para la mayoría de tus huéspedes.

  • Tanto los colores del layout de correo estándar como el código del layout personalizado se guardan, así que puedes alternar fácilmente entre ambos con el interruptor de la página de configuración Email Layout.

Cómo usar el layout personalizado

  1. Para usar el layout personalizado, ve a ThinkReservations > Settings > Email Layout

  2. Cambia el menú desplegable de No a Yes en "USE CUSTOM LAYOUT".

  3. Los 5 colores personalizados se reemplazan por un cuadro de texto grande. Aquí es donde pegarás en tu cuenta el código HTML del contenedor.

  4. Cuando hayas pegado el código en el cuadro, haz clic en el botón Save.

  5. Abre una reserva de ejemplo o de prueba y haz clic en el botón Email para previsualizar los cambios. Sigue probando y editando según sea necesario.

Variable del cuerpo del mensaje

Debes usar la variable especial ${yield} en el lugar donde debe ir el cuerpo del mensaje de las plantillas. Funciona de forma similar a las variables personalizadas. Sin esta variable, el sistema no sabrá dónde colocar el cuerpo del mensaje dentro del correo.
Por ejemplo, esta podría ser una plantilla de correo válida: ${yield}

Elimina todos los saltos de línea

Al pegar o trabajar con el código en el cuadro CUSTOM LAYOUT de ThinkReservations, debes eliminar todos los saltos de línea. Normalmente, tu webmaster programará el layout en su editor de código con saltos de línea para que sea más fácil trabajar con él. Por lo general, estos editores de código tienen una forma de eliminar todos los saltos de línea. Los saltos de línea en el código causarán problemas en el layout, por lo que es importante no omitir este paso.

Código de ejemplo:

<html><body><div style="padding: 20px 5% 20px 5%; background: #711414; margin-left: 10px; margin-right: 10px;"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="padding: 18px; border-bottom: 4px solid #000000;" align="center" bgcolor="#FFFFFF"> <img style="max-height: 200px; max-width: 100%;" src="https://production-thinkreservations-room-images.s3.amazonaws.com/uploads/SAMPLE/email_logo/small_logo.bmp" alt="logo" /></td> </tr> </tbody> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td bgcolor="#FDF8F2" width="5%"></td> <td bgcolor="#FDF8F2" width="90%"> <div style="padding: 36px 18px 36px 18px;"> ${yield} </div> </td> <td bgcolor="FDF8F2" width="5%"></td> </tr> </tbody> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-align: center; padding: 5px; border-bottom: 11px solid #FDF8F2; border-left: 11px solid #FDF8F2; border-right: 11px solid #FDF8F2;" align="center" bgcolor="#3C3C3C"> <div style="padding: 9px 0 15px 0;"> <a href="https://www.facebook.com/SAMPLE" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/thinkreservations-user-assets/common/facebook.png" alt="Facebook" height="24" border="0" /></a> <a href="https://business.google.com/b/468894_SAMPLE_72054737" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/thinkreservations-user-assets/common/google-plus.png" alt="Google Plus" height="24" border="0" /></a> <a href="https://twitter.com/SAMPLE" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/thinkreservations-user-assets/common/twitter.png" alt="Twitter" height="24" border="0" /></a> <a href="http://www.tripadvisor.com/Hotel_Review_SAMPLE" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/thinkreservations-user-assets/common/tripadvisor.png" alt="TripAdvisor" height="24" border="0" /></a> <a href="https://www.instagram.com/SAMPLE/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/thinkreservations-user-assets/common/instagram.png" alt="Instagram" height="24" border="0" /></a> </div> <div style="color: #ffffff; font-family: Arial; font-size: 12px; margin-bottom: 9px;"> <div class="name">The SAMPLE Hotel & Restaurant</div> <div class="street-address">123 4th Street</div> <div><span class="locality">Anytown</span>, <span class="region">OR</span> <span class="postal-code">12345</span></div> <div class="phone">Phone: <a style="color: #ffffff; text-decoration: none;" href="tel:541-555-1082">541-555-1082</a></div> <div class="website"> <a style="color: #ffffff; text-decoration: none;" href="http://www.SAMPLEhotel.com/">SAMPLEhotel.com</a></div> </div> </td> </tr> </tbody> </table> </div> </body></html>

Artículos relacionados
¿Ha quedado contestada tu pregunta?