In ThinkReservations, emails sent to guests consist of styling elements that make up a wrapper or "layout", and the body of the message from a template. At the basic level, the layout contains a head and footer. The content in the header and footer for the standard layout automatically pull information dynamically from the following pages:
- Five brand and accent colors from the Email Layout page
- Logo in the header from the Email Rules page
- Social Media icons and links from the Social Media page
- Business name, contact information, and website from the Business Settings page
The content of the message body dynamically pulls information from the email template, room settings, and the reservation or bill. The message content (template) supports personalized variables, tables, images, links, and more using HTML.
Using the standard email layout allows anyone to make certain changes to the layout while maintaining a stable, clean, and professional-looking email that your guests will be able to view in a variety of email clients and programs. See here for a preview and understanding of the standard email layout.
ThinkReservations features an advanced option that allows an individual proficient in HTML and CSS to build a custom layout or wrapper to replace the standard one included in your account.
If using the advanced custom email layout, please note the following:
- Custom email layouts are not required to send emails. The standard email layout is recommended.
- Custom email layouts are not supported by ThinkReservations beyond this document. When you customize your own HTML email layout, the business becomes responsible for it.
- ThinkReservations doesn't offer custom design services for the custom email layout. We recommend you work with your marketing company or web designer/developer for assistance.
- Almost like a house of cards, often the more complex the styling and designs, the less likely they are to be rendered by the guest's email client or program the way intended.
- The way an email will look is ultimately up to the client's email program. Test in multiple email clients and programs, including desktop and mobile, to ensure your design looks great for the majority of your guests.
- The standard email layout colors as well as the custom layout code are both saved so you can go back and forth easily with the toggle on the Email Layout settings page.
Using The Custom Layout
- To use the Custom Layout, navigate to ThinkReservations > Settings > Email Layout
- Change the dropdown from No to Yes for "USE CUSTOM LAYOUT".
- The 5 custom colors are replaced by a large text box. This is where you will paste the HTML code for the wrapper into your account.
- Once you have pasted the code into the box, click the Save button.
- Open a sample or test reservation and click the Email button to preview the changes. Continue to test and edit as needed.
Message Body Variable
You must use the special variable ${yield} in place of where the message body from the templates should go. This is similar to how the personalized variables work. Without this variable in place, the system won't know where to place the message body into the email.
For example, this could be a valid email template: "<html><body>${yield}</body></html>".
Remove All Line Breaks
When pasting or working with the code in the CUSTOM LAYOUT box in ThinkReservations, you must remove all line breaks. Typically, your webmaster will code the layout in their code editor with line breaks to make it easier to work with. These code editors generally have a way to remove all line breaks. Line breaks in the code will cause problems with the layout, so it's important not to skip this step.
Sample Code:
<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>