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 Template

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&amp;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 Template

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&amp;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 Template

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&amp;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 Template

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&amp;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 Template

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&amp;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 Template

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&amp;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

Invoice #{appointment_id}
Created: {appointment_created_date}
Due: {appointment_date}
{company_name}
{company_phone}
{company_address}
{customer_full_name}
{customer_phone}
{customer_email}
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


Invoice #{appointment_id}
Created: {appointment_created_date}
Due: {appointment_date}
{company_name}
{company_phone}
{company_address}
{customer_full_name}
{customer_phone}
{customer_email}
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>