Email template datasets - New

New confirmation email template has been implemented and are using simplified datasets (technical term for those datasets is handlebars), below is a list of pre-defined placeholders for data related to purchases such as purchaser details, package details, booking rate details, QR Codes etc.

Implemented change is related to ASD-51350 (Sprint 5-FX).

Datasets to insert into package confirmation email

Dataset Description

Dataset/Placeholder Code

Attendee email

Attendee name

Attendee phone

Full name (purchaser)

Booking date ^

Booking rate selected (if applicable)

Event date

Event location

Invoice ID

Item price

Item type (eg: add-on, package, session etc)

Package title

QR Code (URL/image)

QR Code title (display under QR Code)

Quantity of tickets purchased for the package

Total paid (invoice level)

Total paid (package level)

^ Booking date {{ItemDate}} value would be blank for packages that are Single date and Open date. This appears to be the case for the old confirmation emails as well (confirmation emails on production environment and original confirmation emails sent in UAT environments).

Example - Confirmation email template HTML code section

Important

When creating a new confirmation email template, please ensure the dataset are placed in the correct HTML loop. Refer to below HTML sample.

All item details (session, addon, booking rate) inside a {{#each Items}} .... {{/each}} loop.
Attendees: {{#each Attendees}} ... {{/each}} loop should be placed inside the {{#each Items}} {{/each}} loop, as Attendees object is a child object of Items. Misplacing their place will result in unresolved items.
QR Code URL: Always add the {{QRCodeURL}} placeholder inside an image tag as its source: <img src="{{QRCodeURL}}" />
QR Code: Dataset must be placed inside the {{#each Attendees}} loop as it is a property of the Attendee object

<div id="welcome-message">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body k-table" style="width:1317px;min-width:100%;background-color:#eaebed;max-width:700px;font-size:14px;">
<tbody>
<tr>
<td style="font-family:Roboto, Arial, sans-serif;vertical-align:top;">&nbsp;</td>
<td class="container" style="font-family:Roboto, Arial, sans-serif;vertical-align:top;display:block;max-width:700px;width:580px;margin:0px auto !important;">

<div class="header" style="padding:0px 0px;">
<table border="0" style="width:585px;min-width:100%;">
<tbody>
<tr>
<td>

<table role="presentation" border="0" bgcolor="#fff" cellpadding="0" cellspacing="0" width="580" style="width:580px;border-width:0px;min-width:100%;background-color:#ffffff;">
<tbody>
<tr>
<td class="align-center" border="0" height="60" style="border-width:0px;vertical-align:top;text-align:center;">
<img src="https://www.uplay.com.sg/images/default-source/uplay/uplay_banner.png" alt="UPlay" style="border:none;max-width:100%;" width="580" />
</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<div class="content" style="box-sizing:border-box;margin:0px auto;max-width:580px;padding:0px;">
<table role="presentation" class="main k-table" style="width:580px;min-width:100%;background:rgb(255, 255, 255);">
<tbody>
<tr>
<td class="wrapper" style="vertical-align:top;box-sizing:border-box;">

<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:567px;min-width:100%;">
<tbody>
<tr>
<td style="vertical-align:top;padding:10px;">
<p>Hi <strong>{{PayerFullName}}</strong>, </p>
<p>Thank you for your registration!</p>
<p>We are pleased to inform you that we have received your payment of&nbsp; <strong style="font-family:Roboto, Arial, sans-serif;font-size:14px;background-color:#ffffff;">${{InvoiceAmount}}</strong>. </p>
<p>Please see below for your confirmation details for&nbsp; <strong>{{PackageTitle}}</strong>. </p>

<div align="center" style="margin-bottom:12px;">
<table border="0" cellspacing="0" cellpadding="0" style="width:555.25px;min-width:100%;">
<tbody>
<tr>
<td width="434" valign="top" style="padding:20px 20px 0px;border-style:solid;border: 2px solid;vertical-align:top;">
<p><strong><span style="text-decoration-line:underline;">PURCHASE DETAILS</span></p>

<p><strong>Title:&nbsp;</strong>{{PackageTitle}}<br />
<strong>Date:</strong>&nbsp;{{PackageDate}}<br />
<strong>Location:</strong>&nbsp;{{PackageLocation}}<br />
<strong>Order and Invoice ID:</strong>&nbsp;{{InvoiceId}}<br />
<strong>Number of tickets:</strong>&nbsp;{{TicketQty}}<br /></p>

<p><strong><span style="text-decoration-line:underline;">PAYER DETAILS</span></strong></p>
<p><strong>Full Name: </strong>{{PayerFullName}}<br />
<strong>Email: </strong>{{PayerEmail}}<br />
<strong>Phone: </strong>{{PayerPhone}}</p>

<p><strong><span style="text-decoration-line:underline;">ITEMS DETAILS</span></strong></p>
<div>
{{#each Items}}
<p><strong>Booking Type: </strong>{{ItemType}} <br />
<strong>Booking rate (if applicable): </strong>{{ItemBookingRate}} <br />
<strong>Booking date: </strong>{{ItemDate}}<br />
<strong>Item Price: </strong>${{ItemAppliedPrice}}<br />

  {{#each Attendees}}
  <strong>Attendee Name: </strong>{{Name}}<br />
  <strong>Attendee Email: </strong>{{Email}}<br />
  <strong>Attendee Phone: </strong>{{Phone}}<br />
  <strong> Redeem using your QR Code(s) below: </strong>
                                                    
  <div class="row" style="clear:both;">
  <img src="{{QRCodeURL}}" style="width:75px;height:75px;"></div>
  <span><small style="font-weight:600;">{{QRCodeTitle}}</small></span>												
  {{/each}}
</p>
{{/each}}
</div>
</td>
</tr>
</tbody>
</table>
</div>

<p><strong>Please present this confirmation email on your mobile or printed to the staff before commencing the activity if required.</strong></p>

<p>In the meantime, here are a few upcoming <a href="https://www.uplay.com.sg/allexperiences" style="color:#e81515;">events</a> that we thought might be of interest to you and would be delighted if you could join us for our upcoming events too. </p>
<p>If you have any further questions or need to update your registration, please contact us at&nbsp; <a href="mailto:[email protected]" style="color:#e81515;">[email protected]</a></p>
<p>Thank you and we look forward to seeing you soon!</p>

<p>Best regards, <br /> Team UPlay </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div class="footer" style="clear:both;margin-top:10px;text-align:center;width:580px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:580px;min-width:100%;">
<tbody>
<tr>
<td class="content-block" style="font-size:12px;vertical-align:top;color:#9a9ea6;">&nbsp;</td>
</tr>

<tr>
<td class="content-block powered-by" style="font-size:12px;vertical-align:top;color:#9a9ea6;">Powered by&nbsp; <a href="https://www.avionsoftware.com/" style="color:#9a9ea6;text-decoration-line:none;">Avalon</a>. [AVTEST] </td>
</tr>
</tbody>
</table>
</div>
</div>
</td>

<td style="font-family:Roboto, Arial, sans-serif;vertical-align:top;">&nbsp;</td>
</tr>
</tbody>
</table>
</div>

Example - Email confirmation

Last updated 10 months ago