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

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!

Page 1 / 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.

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.

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 ?

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,

Our designs are managed by our Marketing team in house.

Alignment is on the left for us as well.

Cheers,

Igor

Hi all

Has anyone else tried? or have a solution?

Thanks in advance!

Hi @Robin Gustavsson,

Is this what you are trying to achieve?

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.

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

Hi @Robin Gustavsson,

Is this what you are trying to achieve?

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

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

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!

@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>

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?

Hi all

I am new to Mews. I would like to embed images into the e-mail template. Where are these stored? Is there an archive inside Mews?

@mauritsbots

Hi all

I am new to Mews. I would like to embed images into the e-mail template. Where are these stored? Is there an archive inside Mews?

There isn’t.

Best practice is probably to store this on the server of your website. We created an subdomain like assets.example.com that targets an folder in which we save the resources for our mailings.

With the subdomain an separate folder it is not as likely that these resources gets deleted when you change something with your website for example.

Alternatevely you probably can just upload the images you need into your website CMS and use them from there but at the risk of them getting deleted when something bigger changes with that system.

@claudio.berger nice stuff

I just want to point out that mews is wrapping additional code around the contents so using head and body is leading to invalid HTML. This may work probably but it would be better if you would use just the code inside the body tag of your code. Just to be sure

We had some problems with some of the styles and contents mews is adding in these mailings but below is our first shot with custom mailings and we’re pretty cool with that in comparison to the default ones. Were testing these in the demo right now and launching them soon in our production eviroment.

Better classes/ids to adjust the contents added by mews would be great though .

Reply

Join the Mews Community!

Login to the community

Scanning file for viruses.

This file cannot be downloaded