Search

System Email Templates

Rachael Norris
Rachael Norris
  • Updated

In this article, we’ll explain how to edit your System Emails using HTML templates.

Before starting, you should be familiar with:

 

What are HTML Templates?

HTML (Hypertext Markup Language) is code which controls how documents are displayed in web browsers.

HTML email templates let you add colour, images, fonts and other visual elements such as buttons and dividers to your emails.

Plain text emails don’t contain any HTML. These emails display in black and white and without any visual formatting.

Using HTML Email Templates for your System Emails means you can control the visual appearance of the emails that are delivered through Spektrix.

 

System Email Templates

There are three different types of System Email Templates:

  • Plain Text Templates which do not have any HTML formatting. These emails display in black and white and without any visual formatting.

  • Standard Templates can be copied and edited from your system. You can update the colours and text on these emails.

  • This example shows a Standard Template before it has been customised.

  • Custom HTML Email Templates are available to download from this article. You can add your brand colours, a header image, a footer and change the text to meet your organisation's needs.

  • This example shows a Custom Template before it has been customised.

 

Which template is on my system?

Depending on when your organisation started using Spektrix, your system may have Standard Templates or Plain Text Templates.  

Standard Templates using HTML begin with <!DOCTYPE html>.

If you do not see this at the start of your System Email then it’s likely you have the Plain Text Templates. 

If you have Plain Text Templates, you will need to replace them with Custom HTML Templates. Jump ahead to the Custom HTML Templates section to learn how to download and apply these templates.

WARNING: To ensure your email displays correctly across all email clients the below templates use inline styles. External and internal stylesheets may be stripped out or not supported by some email clients. You do not need to add an unsubscribe link to System Emails as these emails are transactional.

 

Standard Templates

Depending on when your organisation started using Spektrix, you may have Standard System Email Templates on your system.

This includes emails for:

You can also edit a HTML template for the Login Link email, but you’ll need to contact Support to upload your new template.

Standard Templates are provided in a neutral style but you can customise the colours, text and buttons by editing the HTML. 

Next, go to the How to edit Standard Templates section to learn how to customise and upload your templates.

 

Custom HTML Templates

Custom HTML Templates are available to replace plain text email templates which may already be on your system. Custom HTML Templates contain an image, header and customisable footer.

You can download and edit the following Custom HTML Templates:

You can also edit a HTML template for the Login Link email, but you’ll need to contact Support to upload your new template.

Next, go to the How to edit Custom HTML templates to learn how to customise and upload your templates.

 

How to edit Standard Templates

To edit Standard Templates, navigate to the System Email you want to edit.

REMINDER: You may not have Standard Templates on your system. Standard Templates using HTML begin with <!DOCTYPE html>. If you do not see this at the start of your System Email then it’s likely you have the plain text template. If you have the plain text email template, go to the Custom HTML Templates section below.

To edit the Standard Template, follow these steps:

  • Click Edit
  • Copy the text in the field 
  • Open Microsoft Notepad or a code editor program such as Notepad++
  • Save the file as a .html
  • Open the .html file in your web browser to preview the email
  • Go back to the .html file and make any required changes (instructions on how to make each of the changes are listed below)
  • Save the changes you make to the code
  • Refresh your web browser to see the updates
  • Once you’re happy with the template, copy the text from the .html file
  • Return to Spektrix and paste the code into System Email field you wish to edit
  • Click Save

 

On each of the Standard Templates, we’ve added notes to help you find the elements you can edit.

Notes can be found between two /* signs, for example:

/* Edit email background color here */

  • The bit of the code you will need to edit appears before the related note.
  • The words in curly brackets are data fields from Spektrix, for example: {Amount}. Do not edit or remove these fields.

TIP: You can use Ctrl + F (or Command/⌘ + F on a Mac) to find the bit of the code you need to edit.

Standard Templates are provided in a neutral style but you can customise the colours, text and buttons by editing the HTML. 

 

Editing colours

To edit the colours, you’ll need to specify them using a HEX code. There are multiple sections where you can edit colours throughout each template.

When editing the code in Notepad, follow these steps to update colours:

  • Locate the text <!--Edit header background and font color here -->
  • Locate background-color: This is where you can change the background colour.
  • Locate color:  This is where you can change the font colour.

For example, to change the header's background colour, you would find the text below and change the hex code for background-color from #f1f1f1 to your chosen colour.

<div class="header" style="background-color: #f1f1f1; color: #555555; text-align: center; padding: 20px; position: relative;"><!-- Edit header background and font color here -->

TIP: When editing the background to dark or light colours you may also want to change the font colour so that your email can be read by everyone, including those with accessibility needs". You can use a colour contrast tool to check this.  

 

Editing Text

To edit the text, you’ll need to write text into the code. There are multiple areas where you can edit or add text in each template.

When editing the code in Notepad, follow these steps to update the text:

  • Locate the text <!-- Edit text here -->
  • Edit the text between the <p> and the </p> tags which can be found to the left of the <!-- Edit text here --> text

<h2 style="margin: 0; font-size: 22px;">Gift Voucher Details</h2> <p style="margin: 10px 0; font-size: 18px;"><strong>From:</strong> {FromName}</p> <!-- Edit text here --> <p style="margin: 10px 0; font-size: 18px;"><strong>Amount:</strong> {Amount}</p> <!-- Edit text here --> <p style="margin: 10px 0; font-size: 18px;"><strong>Voucher Code:</strong> {VoucherCode}</p> <!-- Edit text here -->

REMINDER: The words in curly brackets are data fields from Spektrix, for example:{VoucherCode}. Do not edit or remove these fields.

 

Editing Buttons

The Password Reset and New Account (phone and counter) emails contain a clickable button.

You can edit the button and font colour by locating the <!-- Edit button color and font color here --> note.

When editing the code in Notepad, follow these steps to update the button style:

  • background-color: Change the background colour by specifying a HEX code.
  • color: Change the font colour by specifying a HEX code.

<a href="{link}" style="display: inline-block; padding: 10px 20px; background-color: #555555; color: #ffffff;text-decoration: none; border-radius: 5px; font-size: 16px;">Reset Password</a> <!-- Edit button color and font color here -->

Watch this video to learn how to edit colours, text and buttons in Standard Templates:

 

 

How to edit Custom HTML Templates

To edit the Custom HTML Templates, navigate to the System Email you want to edit.

REMINDER: You may not have Standard Templates on your system. Standard Templates using HTML begin with  <!DOCTYPE html>. If you do not see this at the start of your System Email then it’s likely you have the plain text template. If you have the plain text emails, jump ahead to the Custom HTML Templates section below.

  • Download the template for the email you want to update

    TIP: Each email template can be found in the Custom HTML Templates section below.

  • Open the file in Microsoft Notepad or a code editor program such as Notepad++
  • Make the required changes for the template 
  • Save the file as a .html
  • Open the .html file in your web browser to preview the email
  • Make updates to the code 
  • Save the changes 
  • Refresh your web browser to see the updates
  • Return to Spektrix and paste the code into the System Email you wish to edit
  • Click Save

 

On each of the Custom HTML Templates, we’ve added notes to help you find the elements you can edit.

Notes can be found between two /* signs, for example:

/* Edit email background color here */

  • The words in curly brackets are data fields from Spektrix, for example:{Amount}. Do not edit or remove these fields.

TIP: You can use Ctrl + F (or Command/⌘ + F on a Mac) to find the bit of the code you need to edit.

Custom HTML Templates are provided in a neutral style but the colours, text and buttons are customisable with HTML. 

You can edit the HTML templates in the same way as the Standard Templates, however, there are some additional options:

 

Image

You can add an image into the header of the email. To do this you’ll need the URL of the image which means it will need to be hosted online somewhere. This can be in your website’s CMS or through an alternative method such as a public image hosting platform.

  • To edit the image, first locate <!-- Edit image URL here --> in the HTML.
  • Then, locate the image tag: <img src="https://example.com/tickets-image.jpg" alt="Tickets Image">
  • Replace the URL in between the “” signs
  • Replace the alt text in between the “”


<img src="https://example.com/tickets-image.jpg" alt="Tickets Image" style="max-width: 100%; height: auto; border-radius: 8px; margin-top: 20px; max-height: 200px; object-fit: cover;"> <!-- Edit image URL here -->          <h1 style="margin: 0; font-size: 24px;">{ClientName} E-Tickets</h1> <!-- Edit header text here -->      </div>

TIP: Make sure you keep the quotation marks “” around the text.

If you’re adding an image to the header, you may wish to remove the header text. 

 

Removing the header text

Follow these steps to remove the header text:

  • Locate the <!-- Edit header text here --> text.
  • Remove the text which can be found between the <h1> </h1> tags.

<h1 style="margin: 0; font-size: 24px;">{ClientName} E-Tickets</h1> <!-- Edit header text here -->

REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

 

Footer

To edit the information in the footer of the email, follow the steps below.

  • First locate class='footer' in the HTML (1).
  • Then, locate the link tag <a href="https://www.yourtheatre.com" 
  • Replace the URL in between the “” signs
  • Locate the link text >https://www.yourtheatre.com</a>
  • Replace the link text (this does not have to be the URL)
  • Locate the phone number and address tags 
  • Replace the phone number and address within the <p> and </p> tags.

<div class="footer" style="text-align: center; padding: 10px; background-color: #f1f1f1; color: #555555; font-size: 14px;"><!-- Edit footer and font color here -->          <p style="margin: 5px 0;"><strong>Website:</strong> <a href="https://www.mytheatre.com" style="color: #0000EE; text-decoration: none;">https://www.mytheatre.com</a></p> <!-- Edit link and text here -->          <p style="margin: 5px 0;"><strong>Phone:</strong> 01234567879</p> <!-- Edit text here -->          <p style="margin: 5px 0;"><strong>Address:</strong> My address, Town, County, Post Code</p> <!-- Edit text here -->      </div>

 

Download Custom HTML Templates

In each section below you’ll find a link to download a Custom HTML Template and instructions on how to make edits before uploading into your system.

  • Gift Voucher and Gift Membership

  • To apply the HTML Template to the Gift Voucher or Gift Membership email follow the steps below.

    • Navigate to Document Designs > Gifts (read more about how to navigate this section of the system in System Emails)
    • Download the Gift Voucher [.html] or Gift Membership [.html] email Template
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++
    • Edit the Template with the following information:
      1. Header image
      2. Website
      3. Phone number 
      4. Address

    TIP: If you’re adding an image into the header, you may also wish to remove the header text.

    Optionally, you can also change the headings, background colours, text and colours in the body of the email.

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{Amount}. Do not edit or remove these fields.

    • Copy and paste the HTML into the Email Body Text box

    • Click Save

     

  • New account

  • To apply the HTML Template to your New Account email follow the steps below.

    Navigate to Document Designs > Account Emails (read more about how to navigate this section of the system in System Emails)

    • Download the New Account (website) [.html] or email Template
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++
    • Edit the Template with the following information:
      1. Header image 
      2. Website
      3. Phone number 
      4. Address

    TIP: If you’re adding an image into the header, you may also wish to remove the header text.

    Optionally, you can also change the headings, text and colours in the body of the email. 

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

     

    • Copy and paste the HTML into the Email Body Text box

    • Click Save

     

    • Edit the Template with the following information:
      1. Header image 
      2. Button
      3. Website
      4. Phone number 
      5. Address

    Optionally, you can also change the headings, text and colours in the body of the email. 

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

     

     

    • Copy and paste the HTML into the Email Body Text box

    • Click Save

     

  • Gift Aid (UK only)

  • To apply the HTML Template to your Gift Aid emails follow the steps below.

    • Navigate to Document Designs > Gift Aid (read more about how to navigate this section of the system in System Emails)
    • Download the Gift Aid [.html] email template
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++

    Edit the Template with the following information:

      1. Header image 
      2. Website
      3. Phone number 
      4. Address

    Optionally, you can also change the headings, text and colours in the body of the email. 

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

    • Copy and paste the HTML into the Email Body HTML box

    • Click Save

     

  • Password reset

  • To apply the HTML Template to your Password reset emails follow the steps below.

    • Download the Password Reset [.html] email Template
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++
    • Edit the Template with the following information:
      1. Header image 
      2. Button
      3. Website
      4. Phone number 
      5. Address

    TIP: If you’re adding an image into the header, you may also wish to remove the header text.

    Optionally, you can also change the headings, text and colours in the body of the email. 

    REMINDER: The words in curly brackets are datafields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

    • Copy and paste the HTML into the Email Body Text box

    • Click Save

     

  • Membership

  • To apply the HTML Template to your Account emails follow the steps below.

    TIP: If you are adding an image into the header, you may wish to remove the header text.

    Optionally, you can also change the headings, text and colours in the body of the email. 

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

    • Copy and paste the HTML into the Email Body Text box on the email you want to update.

     

    • Click Save

     

  • Login link email

  • To update the HTML template for the Login Link email, follow the steps below.

    • Download the email Template: Loginlink.html
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++
    • Edit the Template with the following information:
      1. Header image
      2. Website Address
      3. Phone number 
      4. Address

    TIP: If you’re adding an image into the header, you may wish to remove the header text.

    Optionally, you can also change the headings, text and colours in the body of the email.

    REMINDER: The words in curly brackets are data fields from Spektrix, for example:{ClientName}. Do not edit or remove these fields.

    • Save the file.
    • Contact Support to ask them to update the email. You’ll need to send the html file to our Support team as an attachment.

     

  • Print at Home Ticket Delivery with Digital Pass Template

  • To apply the HTML Template to the Print at Home Ticket Delivery email follow the steps below.

    • Navigate to Document Designs > Print at Home (read more about how to navigate this section of the system in System Emails)
    • Download the Print at Home Ticket Delivery with Digital Pass [.html] email Template
    • Open the HTML file in Microsoft Notepad or a code editor program such as Notepad++
    • Edit the Template with the following information:
      1. Header image
      2. Website
      3. Phone number 
      4. Address

    TIP: If you’re adding an image into the header, you may also wish to remove the header text.

    Optionally, you can also change the headings, background colours, text and colours in the body of the email.

    REMINDER: The words in curly brackets are data fields from Spektrix, for example: {ClientName}. Do not edit or remove these fields.

    pah_ticket_delivery_email.png

    • Copy and paste the HTML into the Email Body Text box

    pah_ticket_delivery_email_body.png

    • Click Save

     

Further Reading

To continue learning about System Emails, we recommend the following articles:

For more information, take a look at the Communicate with your Customers section of the Support Centre.

 

Templates download links: