Email wrapper HTML

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Email Wrapper HTML (left-hand list)

Prefer to watch?

Prefer a video walkthrough? Watch our Customise QuickFile with CSS, HTML and scripts tutorial on the QuickFile Help Guides YouTube channel.

Introduction

The email wrapper is the design around every email QuickFile sends to your clients, such as invoices, reminders and statements.

The message itself comes from your email templates. The wrapper adds the frame, heading and footer around it.

Tokens

QuickFile replaces these placeholders when it sends each email:

Token	Replaced with
`@EmailBody@`	The message. Required: without it, your emails will arrive with no message.
`@CompanyName@`	Your company name
`@PBQF_IMG@`	The small “Powered by QuickFile” image

The default wrapper

Click Import Default to load it into the editor. It’s a white, rounded card on a grey background, with your company name as the heading:

<div style="word-spacing: normal; background-color: #f2f3f4; width: 100%; overflow-y: auto;">
  <table cellpadding="6" cellspacing="0" style="max-width: 600px; width: 90%; background-color: white; padding: 22px; margin: 30px auto; box-sizing: border-box; font-family: Arial, Helvetica; border-radius: 6px;">
    <tr>
      <td colspan="2" style="text-align: left; padding: 22px; font-size: 22px; font-weight: normal; color: #333333; border-bottom: solid 1px #ccc;">@CompanyName@</td>
    </tr>
    <tr>
      <td colspan="2" style="color: #333333; text-align: left; font-size: 14px; padding: 20px 20px 10px 20px; min-height: 200px;">@EmailBody@</td>
    </tr>
    <tr>
      <td></td>
      <td style="width: 120px;">@PBQF_IMG@</td>
    </tr>
  </table>
</div>

Email HTML is not web HTML

The editor itself says to avoid CSS includes and page tags such as <html>, <head> and <body>, and to put every style inline. Email programs such as Outlook and Gmail strip out a lot of web HTML.

Do	Don’t
Lay out with `<table>`	Use flexbox, grid or floats
Put styles in `style="…"` on each element	Use `<style>` blocks or linked CSS files
Keep content about 600 px wide	Use full-width layouts
Give images a full `https://` URL, a `width` and `alt` text	Rely on background images (Outlook ignores them)
Use fonts such as Arial, Helvetica or Georgia	Use web fonts

Recipe: A branded header bar

This replaces the plain heading with a coloured bar and your logo, and adds a footer with your company details:

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f2f3f4;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <table width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background:#ffffff;">
        <tr>
          <td style="background:#0f2a44;padding:20px 28px;border-bottom:4px solid #f5a623;">
            <img src="https://www.yourcompany.co.uk/logo-white.png" width="180" alt="@CompanyName@" style="display:block;border:0;">
          </td>
        </tr>
        <tr>
          <td style="padding:28px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#333333;">
            @EmailBody@
          </td>
        </tr>
        <tr>
          <td style="padding:20px 28px;background:#f7f7f7;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#888888;">
            @CompanyName@ &middot; 1 High Street, Town, AB1 2CD &middot; 01234 567890<br>
            Registered in England &amp; Wales No. 01234567
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

To change the bar, edit background for its colour and border-bottom for the accent line. Change padding to make it taller or shorter.

Recipe: The same signature on every email

Add this row straight after the @EmailBody@ row:

<tr>
  <td style="padding:0 28px 28px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#333333;">
    Kind regards,<br>
    <strong>Accounts Team</strong><br>
    <img src="https://www.yourcompany.co.uk/signature-logo.png" width="120" alt="Your Company"
         style="display:block;margin-top:8px;border:0;">
  </td>
</tr>

Avoid two signatures: if your email templates already use @EmailSignature@, remove it from them when you add a signature here.

Test before you activate

The Email Wrapper has no Preview button. After saving and activating, send a test invoice to yourself and check it:

in Gmail, Outlook and on a phone
to make sure the message text appears
to make sure every image loads

The two images above are the wrapper HTML rendered in a browser with a sample message. Real email programs may show small differences.