Client Templates
Our platform gives you the freedom and creativity to create your workflows and invoices however you like, but feel free to use/refer to these examples.
To customer
Subject line
New Appointment on {appointment_date}
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">
New appointment
</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {customer_full_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">You have successfully scheduled an appointment for {service_name}. </p><p style="margin: 0"><br></p><p style="margin: 0">Your
appointment will take place on {appointment_date_time} at {location_name} and will take
{service_duration}.</p><p style="margin: 0"><br></p><p style="margin: 0"><span style="color: rgb(52, 52, 52);">If you did not request this appointment, you can ignore this email.</span></p><p style="margin: 0"><br></p><p style="margin: 0">We look forward to our meeting.</p><p style="margin: 0"><br></p><p style="margin: 0">Employee contact:</p><p style="margin: 0">{staff_name}</p><p style="margin: 0">{staff_email}</p><p style="margin: 0">{staff_phone}<br><br>{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
To staff
Subject line
New appointment for {service_name}
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">
New appointment
</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {staff_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">You got a new appointment for {service_name} with {customer_full_name}. </p><p style="margin: 0"><br></p><p style="margin: 0">Your
appointment will take place on {appointment_date_time} at {location_name} and will take
{service_duration}.</p><p style="margin: 0"><br></p><p style="margin: 0">You can approve the appointment from the following link - <a href="{link_to_change_appointment_status_to_approved}" target="_blank">Approve</a></p><p style="margin: 0"> </p><p style="margin: 0"><br></p><p style="margin: 0">We look forward to our meeting.</p><p style="margin: 0"><br></p><p style="margin: 0">{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
To customer
Subject line
Your appointment is Approved!
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">
APPOINTMENT APPROVED</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {customer_full_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">Your scheduled appointment for {service_name} with {staff_name} is Approved. </p><p style="margin: 0"><br></p><p style="margin: 0">We look forward to seeing you on {appointment_date_time}.</p><p style="margin: 0"> </p><p style="margin: 0"><br></p><p style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Employee contact:</p><p style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">{staff_name}</p><p style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">{staff_email}</p><p style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">{staff_phone}</p><p style="margin: 0"><br></p><p style="margin: 0">{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
To staff
Subject line
Your appointment is Approved!
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">
APPOINTMENT APPROVED</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {staff_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">Your scheduled appointment for {service_name} with {customer_full_name} is Approved. </p><p style="margin: 0"><br></p><p style="margin: 0">Please join the appointment on {appointment_date_time}.</p><p style="margin: 0"> </p><p style="margin: 0"><br></p><p style="margin: 0">We look forward to our meeting.</p><p style="margin: 0">{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
To customer
Subject line
Your appointment is about to start!
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">
REMINDER</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {customer_full_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">Your scheduled appointment for {service_name} with {staff_name} is about to start in 2 hours. </p><p style="margin: 0"><br></p><p style="margin: 0"><span style="color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;">Please join the appointment on {appointment_date_time}.<br></span></p><p style="margin: 0"><span style="color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;"><br></span></p><p style="box-sizing: inherit; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;">Employee contact:</p><p style="box-sizing: inherit; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;">{staff_name}</p><p style="box-sizing: inherit; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;">{staff_email}</p><p style="box-sizing: inherit; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;">{staff_phone}</p><p style="margin: 0"><span style="color: rgb(52, 52, 52); font-family: Poppins, Arial, sans-serif;"><br></span></p><p style="margin: 0">We look forward to our meeting.</p><p style="margin: 0">{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
To customer
Subject line
How was your experience?
Email Preview
|
Email HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<title>Email Template</title>
<style>
/* 592 + 2*24 for padding */
@media (min-width: 640px) {
/* Fixed width in larger screens */
.container {
width: 592px;
}
}
</style>
<!-- Body for template -->
<table role="presentation" style="
width: 100%;
min-height: 100vh;
border: 0;
border-spacing: 0;
padding: 16px 24px 40px 24px;
background-color: #f5f7fa;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 400;
color: #343434;
">
<tbody>
<!-- Main content box -->
<tr>
<td style="padding: 0">
<!-- Container -->
<table role="presentation" style="
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
" class="container">
<tbody>
<!-- HEADER -->
<tr>
<td style="padding: 16px 24px; background-color: #6c70dc">
<h1 style="
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
font-size: 24px;
line-height: 32px;
font-weight: 600;
">Thank You</h1>
</td>
</tr>
<!-- BODY -->
<tr>
<td style="padding: 32px; font-size: 16px; line-height: 24px">
<!-- Container content -->
<p style="margin: 0">
Hi {customer_full_name}, </p><p style="margin: 0"><br></p><p style="margin: 0">Your scheduled appointment for {service_name} with {staff_name} is successfully completed. </p><p style="margin: 0"><br></p><p style="margin: 0">Thank you for choosing us. We look forward to having you back.<br></p><p style="margin: 0"><br></p><p style="margin: 0">{company_name}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Invoice Preview
|
|||
|
|||
Staff name | Staff number | ||
{staff_name} | {staff_phone} | ||
Service | Price | ||
{service_name} | {service_price} | ||
Total: {appointment_sum_price} |
Invoice HTML
<meta charset="utf-8">
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
<div class="invoice-box" style="line-height: 2;">
<table cellpadding="0" cellspacing="0">
<tbody><tr class="top">
<td colspan="2">
<table>
<tbody><tr>
<td class="title">
<img src="https://sonicbookie.com/wp-content/uploads/2023/03/cropped-sonic_bookie_full_logo.png" style="width: 100%; max-width: 300px">
</td>
<td>
Invoice #{appointment_id}<br>
Created: {appointment_created_date}<br>
Due: {appointment_date}
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tbody><tr>
<td>
{company_name}<br>
{company_phone}<br>
{company_address}
</td>
<td>
{customer_full_name}<br>
{customer_phone}<br>
{customer_email}
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="heading">
<td>Staff name</td>
<td>Staff number</td>
</tr>
<tr class="details">
<td>{staff_name}</td>
<td>{staff_phone}</td>
</tr>
<tr class="heading">
<td>Service</td>
<td>Price</td>
</tr>
<tr class="item">
<td>{service_name}</td>
<td>{service_price}</td>
</tr>
<tr class="total">
<td></td>
<td>Total: {appointment_sum_price}</td>
</tr>
</tbody></table>
</div>
Invoice Preview
|
|||
|
|||
Staff name | Staff number | ||
{staff_name} | {staff_phone} | ||
Service | Price | ||
{service_name} | {service_price} | ||
Total: {appointment_sum_price} |
Invoice HTML
<meta charset="utf-8">
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
<div class="invoice-box" style="line-height: 2;">
<table cellpadding="0" cellspacing="0">
<tbody><tr class="top">
<td colspan="2">
<table>
<tbody><tr>
<td class="title"><br></td>
<td><div style="text-align: center;"><span style="color: rgb(85, 85, 85); font-size: 16px;">Invoice #{appointment_id}</span></div><div style="text-align: center;"><span style="color: rgb(85, 85, 85); font-size: 16px;">Created: {appointment_created_date}</span></div><div style="text-align: center;"><span style="color: rgb(85, 85, 85); font-size: 16px;">Due: {appointment_date}</span></div></td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tbody><tr>
<td>
{company_name}<br>
{company_phone}<br>
{company_address}
</td>
<td>
{customer_full_name}<br>
{customer_phone}<br>
{customer_email}
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="heading">
<td>Staff name</td>
<td>Staff number</td>
</tr>
<tr class="details">
<td>{staff_name}</td>
<td>{staff_phone}</td>
</tr>
<tr class="heading">
<td>Service</td>
<td>Price</td>
</tr>
<tr class="item">
<td>{service_name}</td>
<td>{service_price}</td>
</tr>
<tr class="total">
<td></td>
<td>Total: {appointment_sum_price}</td>
</tr>
</tbody></table>
</div>