Skip to main content
To ensure your new accounting product’s emails match with the rest of your brand’s design language, Tight offers the ability for report and invoicing emails to go out from your domain and with customizable design templates that align with your brand.

Domain (SMTP) Configuration

Tight uses SMTP to send emails from your domain. Here’s what Tight needs from you:
  1. SMTP Username
  2. SMTP Password
  3. SMTP Host URL (e.g., smtp.mandrillapp.com for Mandrill)
  4. SMTP Port (generally 465 for SSL or 587 for TLS)
  5. Preferred “From” Address for specific email types:
    1. Reports: e.g., reports@yourcompany.com
    2. Invoices: e.g., invoices@yourcompany.com

Email Design Customization

Tight can customize two email categories: report emails and invoice emails. Report emails can be split into emails with an attachment and emails with a link to a download. For each of these report email types, there can be a separate email for PDF reports and for XLS reports, for a total of four different report-related emails:
  1. Report Emails
    1. Emails with report attachments
      1. XLS
      2. PDF
    2. Emails with links to reports
      1. XLS
      2. PDF
  2. Invoice Emails
To customize these, please provide an HTML template for each email type (5 total templates).

Dynamic Content in Templates

Templates can include both dynamic and static content:
  1. Dynamic Content: Use double braces with a descriptive name (e.g., {{ companyName }}) to denote fields Tight will populate automatically.
  2. Static Content: Include any fixed elements as plain HTML, such as a recurring message or footer.

Templates

  1. Invoice Email HTML Template An HTML document with the following elements:
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. Dynamic Placeholders:
      1. Company Information: {{ companyName }}, {{ companyLogo }}, {{ brandColor }}
      2. Invoice Information: {{ invoiceName }}, {{ dueDate }}, {{ balanceDue }}, {{ clientName }}, {{ discount }}, and {{ notes }},
      3. Line items: {{ unitPrice }}, {{ quantity }}, {{ totalAmount }}
        1. Tight can handle line items in a loop, so you only need to indicate line item fields once in your template
    5. A button linking to the invoice (Tight will handle the link insertion).
    6. Messaging - Tight uses the same email template for a variety of invoice-related updates. You can provide messaging for these as desired, otherwise you can use Tight’s default messaging in your email template (e.g., Invoice Sent, Reminder, Paid, Refunded, Cancelled)
  2. Report Email HTML Template with the report attached
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. Optional alternate static content between attached XLS and PDF reports
  3. Report Email HTML Template with a link to download the report
    1. Inline CSS styles
    2. Static content as needed
    3. Optional <img> tags linking to remote images
    4. A download button (Tight will add the link)
    5. Optional alternate static content between XLS and PDF linked reports

Best practices

  1. Many email clients do not support certain common CSS properties, notably box-shadow, justify-content, and flex. Tight recommends using a table (<table>) for your email layout.
    1. For a comprehensive list of supported CSS properties by email client, see Campaign Monitor’s CSS Guide.
    2. To test your HTML email, there are various online tools available. Check out this list of email preview tools.
  2. Web fonts are often unsupported by email clients, so using a web-safe font as a backup is recommended. For a list of web-safe fonts and their support by operating system, see CSS Font Stack’s Guide.
  3. For any static images, consider publicly hosting them and providing Tight with a link to embed in your template. Email clients may encounter issues rendering images, leading to potential resolution drops, slower load times, or blocking the image altogether. If you decide to use images, make sure your design still stands without them.
  4. Embedded CSS using the <style> tag is allowed, but inline styling renders more consistently in email clients.
    1. Consider using the Premailer tool to convert CSS stylesheets to inline CSS
  5. Checking emails on mobile devices is becoming increasingly common, so make sure your template renders correctly for mobile email clients as well.

Example Templates

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <style>
          body {
          -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
        }
          img {
          -ms-interpolation-mode: bicubic;
        }
          img {
          border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;
        }
          body {
          height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;
        }
          body {
          -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
        }
          img {
          -ms-interpolation-mode: bicubic;
        }
          img {
          border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;
        }
          body {
          height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;
        }
          @media screen and (max-width:600px) {
          h1 {
          font-size: 32px !important; line-height: 32px !important;
        }
        }
        </style>
</head>
<body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; margin: 0; padding: 0;" bgcolor="#f4f4f4">

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

  <tr>
    <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#2a8c19{{/brandColor}}" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 10px;">
    </td>
  </tr>

  <tr>
    <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#2a8c19{{/brandColor}}" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">

      <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; border-radius: 4px 4px 0px 0px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
        <tr>
          <td bgcolor="#ffffff" align="center" valign="top" style="border-radius: 4px 4px 0px 0px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 40px 20px 0px;">
            {{#brandColor}}
            {{#logoUrl}}
            <img alt="Brand logo" src="{{ logoUrl }}" style="max-width: 550px; max-height: 200px; -ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; border-width: 0;" border="0">
              <br>
                <br>
                  {{/logoUrl}}
                  {{/brandColor}}
                  {{^brandColor}}
                    <img alt="Harold from Hurdlr" src="https://uploads-ssl.webflow.com/59a6e87e38c73b0001ee52f6/5ab56f1455ae527c30124f24_hurdlr%20logo%201100.png" width="550" height="70" border="0" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; border-width: 0;">
                    <br>
                    <br>
                  {{/brandColor}}
                    </td>
                    </tr>
                    </table>

                    </td>
                    </tr>
                    <tr>
                    <td bgcolor="#f7f7f7" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">

                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

                    <tr>
                    <td bgcolor="#ffffff" align="left" style="color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 30px 20px;">
                    <p style="margin-bottom: 16px; color: #666666;" align="center">
                  {{ message }}
                </p>

                {{#invoiceTotal}}
                <p style="margin-bottom: 16px; color: #666666;" align="center">
                  {{ totalLabel }}: {{ invoiceTotal }}
                </p>
                {{/invoiceTotal}}

                {{#payButtonName}}
                  <table style="border-radius: 100px 100px 100px 100px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;" align="center">
                  <tr>
                  <td bgcolor="{{#brandColor}}{{brandColor}}{{/brandColor}}{{^brandColor}}#fd9724{{/brandColor}}" align="center" style="border-radius: 4px 4px 4px 4px; color: #000000; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 12px 40px 10px;">
                  <p style="margin: 0;"><a href="{{ payURL }}" target="_blank" style="text-decoration: none; color: {{#buttonTextColor}}{{buttonTextColor}}{{/buttonTextColor}}{{^buttonTextColor}}#ffffff{{/buttonTextColor}}; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;"> <b>{{ payButtonName }}</b></a></p>
    </td>
  </tr>
</table>
{{/payButtonName}}
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f7f7f7" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
<tr>
<td bgcolor="#f7f7f7" align="center" style="color: #666666; font-family: 'Bryant', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 60px 30px 30px;">
{{#partnerName}}
<p style="color: #2323; font-weight: 500; letter-spacing: 0.34px; margin: 0;">
{{ poweredBy }} {{ partnerName }}
</p>
{{/partnerName}}
</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>