Email Template Customization: Are you getting the most out of them?


Userlevel 3
Badge

Hi Everyone! 

I see that a lot of the time the email customization is a bit simple. With the HTML allowing you to fully customize these templates, I would love to see what you have done with yours. How have you customized your templates? Do you have any screenshot examples to show? Is there anything that you would suggest as a best practise? What softwares did you use to make the templates (if any)?

@BertSerry I know that Yalo Hotel is an incredible example of one. Would you possibly be able to share your confirmation email template?

I’m looking forward to see what you’ve all done!


14 replies

Userlevel 1

Hi all! 

 

Happy to share ours, they were done by a marketing agency. It was quite the cost, but we can obviously use them for a very long time and I feel like it makes a massive difference to the guests experience. 

 

 

Userlevel 6
Badge +5

G'day @Jason.Warnaar

We’ve recently redesigned our reservation email templates, our designer used Figma to design the templates and then converted to code. We then use litmus to validate & ensure they render correctly in all email clients. 

Thanks for sharing @BertSerry, i love the simplicity of your template.


 

Userlevel 6
Badge +2

I’m loving this thread already. 😄 Who else has some great templates they want to share and any tips on how you’ve achieved it and what you like most about it?
@IgorK @DamienJanssens @Robin Gustavsson ?

Userlevel 3
Badge

Hi all 👋

Great designs!
One thing we have a hard time achieving is changing the placeholder's alignment and column width.- Especially the {reservationDetails}. No matter how we’ve tried, the alignment is still set to “Left”.
I see that none of the above designs has the alignment of the placeholder any different than ours.

Has anyone else tried? or have a solution?

Thanks in advance!

Userlevel 3
Badge

Hi,

Our designs are managed by our Marketing team in house.

Alignment is on the left for us as well.

 

Cheers,

Igor

Userlevel 6
Badge +5

Hi all 👋

Great designs!
One thing we have a hard time achieving is changing the placeholder's alignment and column width.- Especially the {reservationDetails}. No matter how we’ve tried, the alignment is still set to “Left”.
I see that none of the above designs has the alignment of the placeholder any different than ours.

Has anyone else tried? or have a solution?

Thanks in advance!

Hi @Robin Gustavsson

Is this what you are trying to achieve? 
 

 

Userlevel 3
Badge

Hi @Robin Gustavsson

Is this what you are trying to achieve? 
 

 

Hi @Mick,
Definitely going in the right direction! I see that you have managed to get rid of some of the negative space on the right. What program have you used? 

We are unable to edit inside the {detailsHtml} placeholder so instead we’ve used the {ReservationdetailsHtml}, as it is more centered.

 

Userlevel 3

G'day @Jason.Warnaar

We’ve recently redesigned our reservation email templates, our designer used Figma to design the templates and then converted to code. We then use litmus to validate & ensure they render correctly in all email clients. 

Thanks for sharing @BertSerry, i love the simplicity of your template.


 

thx for the idea with Figma and litmus :)
Very helpful!

Userlevel 6
Badge +5

Hi @Robin Gustavsson

Is this what you are trying to achieve? 
 

 

Hi @Mick,
Definitely going in the right direction! I see that you have managed to get rid of some of the negative space on the right. What program have you used? 

We are unable to edit inside the {detailsHtml} placeholder so instead we’ve used the {ReservationdetailsHtml}, as it is more centered.

 

Hi Robin, 

Unfortunately the {detailsHTML} comes with styling from Mews and the styling can not be configured. It is possible to add style to the div or table however it won’t work perfectly in all email clients. 

example, The below centering will work in gmail but not outlook.

<div style="text-align: center;color:#333333!important">{detailsHtml}</div>


I was recently talking with our CSM and @AdamMews about more placeholders so we could recreate the reservation details in a format that works for us.

From memory, the biggest challenge is reservation groups with multiple reservations & how it that would work. 

There is this feature request which requests the fields, if you haven’t already it would be good to throw some votes on it. 

Regards

Mick

Userlevel 3
Badge

Hi Robin, 

Unfortunately the {detailsHTML} comes with styling from Mews and the styling can not be configured. It is possible to add style to the div or table however it won’t work perfectly in all email clients. 

example, The below centering will work in gmail but not outlook.

<div style="text-align: center;color:#333333!important">{detailsHtml}</div>


I was recently talking with our CSM and @AdamMews about more placeholders so we could recreate the reservation details in a format that works for us.

From memory, the biggest challenge is reservation groups with multiple reservations & how it that would work. 

There is this feature request which requests the fields, if you haven’t already it would be good to throw some votes on it. 

Regards

Mick


Hi @Mick,

I have tried this div style before - However, we use Outlook, so i have not seen any results…

We have also talked with our CSM about the same thing. Posibility to edit inside the placeholders, or split them all together, so that we can choose for ourselfves exactly what information to or not to include.

At the moment we use {ReservationdetailsHTML} that has a slightly better alignment in my opinion.

I have voted on the feature request!

Userlevel 3
Badge

@Blue Bay Curaçao Here's post i mentioned :) 

Hi there

 

We built our e-mail template from scratch. I followed this guide to come up with a simple slick template that doesn’t have so much bloat and we are able to understand. https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770?ec_unit=translation-info-language

 

Here would be our template code (if this code embedment works, sorry first time for me). If anyone wants to use it as a structure, feel free. It’s not top notch, but it works for us.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Booking Confirmation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" width="600">
<tr>
<td align="left" bgcolor="#ffffff" width="100%" style="padding: 10px 0 10px 30px; font-family: Helvetica, Arial, sans-serif; font-size: large; font-weight: bold">
Dear {name}
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" width="100%" style="padding: 5px 27px 10px 30px; font-family: Helvetica, Arial, sans-serif; font-size: medium">
Thank you very much for your booking. We already look forward to your stay at Hotel Beau Séjour Lucerne.
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 0px 30px 40px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 10px 0 10px 0; font-family: Helvetica, Arial, sans-serif">
<tr>
<td style="font-size: large; font-weight: bold">
<hr/>
Your booking details
</td>
</tr>
<tr>
<td style="font-size:small">
{detailsHtml}<br/>
{summaryHtml}
</td>
</tr>

<tr>
<td style="font-size: large; font-weight: bold">
<hr></hr>
Your arrival
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="padding: 20px 5px 20px 0;font-family: Helvetica, Arial, sans-serif; font-size: medium; text-align: justify">
We recommend travelling by public transport. All our guests benefit from the Lucerne Guest Card, which includes free use of public transport in the city. <br></br>If you are arriving by car, you can view the various parking options in our area via the link below.<br></br>Please note that our reception is staffed until 11 pm. If you arrive later, please contact us.
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding-top:15px; padding-bottom:18px; padding-right:18px; padding-left:18px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="ButtonContentContainer" style="border-collapse: separate !important;border-radius: 10px;background-color: #f500d0;">
<tbody>
<tr>
<td align="center" class="ButtonContent" style="font-family: Helvetica, Arial, sans-serif ; font-size: 18px; padding: 18px;" valign="middle"><a class="Button " href="https://beausejourlucerne.ch/en/rooms/arrival/" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;" target="_blank" title="Arrival Info">Arrival Info</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size: large; font-weight: bold">
<hr></hr>
What to do in and around Lucerne
</td>
</tr>
<tr>
<td>
<table>
<tr>

<td style="padding: 20px 5px 20px 0; font-size: medium; text-align: justify">
If you want to find out in advance about restaurants, cultural highlights, shopping tips, walks in and around Lucerne, we recommend our "true holidays" guide. On the website, our team reveals what you should not miss during your stay.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding-top:15px; padding-bottom:18px; padding-right:18px; padding-left:18px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="ButtonContentContainer" style="border-collapse: separate !important;border-radius: 10px;background-color: #f500d0;">
<tbody>
<tr>
<td align="center" class="ButtonContent" style="font-family: Helvetica, Arial, sans-serif ; font-size: 18px; padding: 18px;" valign="middle"><a class="Button " href="https://www.true-holidays.ch/de/" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;" target="_blank" title="True Holidays">True Holidays</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size: large; font-weight: bold">
<hr></hr>
Any Questions?
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="padding: 20px 5px 20px 0;font-family: Helvetica, Arial, sans-serif; font-size: medium; text-align: justify">
On our website you will find practically all important information for your stay with us. If you have any unanswered questions, you can always contact us by e-mail or phone.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 0 0 30px 0;">
<img src="https://beausejourlucerne.ch/wp-content/uploads/2022/08/ZIMMER_17_IMG_7976-1.jpg" alt="room" width="530" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 0 0 0 30px; font-family: Helvetica, Arial, sans-serif; font-size: medium;" valign="top">
Best regards from Lucerne and see you soon<br/>
Your Hotel Beau Séjour Team
</td>
</tr>
<tr>

<td bgcolor="#ffffff" style="padding: 50px 0px 0px 30px; font-family: Helvetica, Arial, sans-serif" valign="top">
<img src="https://beausejourlucerne.ch/wp-content/uploads/2022/02/logo_hotel_beau_sejour.png" alt="logo" width="250" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 10px 0px 10px 30px; font-family: Helvetica, Arial, sans-serif; font-size: medium" valign="top">
Haldenstrasse 53<br/>
CH-6006 Luzern<br/>
+41 41 410 16 81<br/>
<a href="mailto:[email protected]" tabindex="-1" target="_blank">[email protected]</a><br/>
<a href="https://beausejourlucerne.ch/" tabindex="-1" target="_blank">www.beausejourlucerne.ch</a>
</td>
</tr>


<tr>
<td bgcolor="#ffffff" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 10px 0 10px 0; font-family: Helvetica, Arial, sans-serif">
<tr>
<td width="75%">
&reg; Hotel Beau Séjour Lucerne AG 2022<br/>
</td>
<td align="right" width="25%">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="https://www.instagram.com/beausejourlucerne/" target="_blank">
<img src="https://villamaria.swiss/wp-content/uploads/2022/07/insta.jpg" alt="Instagram" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

 

Userlevel 6
Badge +2

Thank you for sharing @claudio.berger 💪💥 I’m glad you’ve found an option to really personalise this.

We would like to set custom dates (+/- days) in automated email messages. Have any users discovered or utilized alternative solutions or third-party plugins to address the lack of customizable dates in automated email messages? If yes, could you please share your recommendations and experiences regarding these solutions?

Reply