MailKit Pro documentation

Twenty SaaS emails in table-based HTML. This guide covers editing them, adding your merge tags and sending.

Quick start

Open index.html and choose a template. The viewer shows it at desktop and phone width, with its plain-text version.
Open the file from templates in a text editor.
Replace Nexus with your product name, change the colours, and edit the words. See Brand and colours.
Replace the sample values with merge tags from your sending tool.
Paste the HTML into your sending tool and send yourself a test.

MailKit-Pro/
  index.html            gallery of all templates
  preview.html          viewer: desktop, phone and plain-text
  documentation.html    this guide
  README.md             short version of this guide
  LICENSE.txt
  CHANGELOG.md
  templates/            20 HTML emails
    01-welcome.html
    02-invoice.html
    ...
  text/                 20 plain-text versions
    01-welcome.txt
    ...
  previews/             images used by the gallery

You only ever send what is inside templates and text. The other files are for you.

How a template is built

Every template follows the same order from top to bottom.

Head. A few meta tags, a small style block for phones, and an Outlook-only block that fixes scaling and fonts.
Preview text. A hidden line at the top of the body. It is shown after the subject in the inbox. Edit it for every email.
Outer table. Full width, carries the page background colour.
Container table. 600 pixels wide and centred, with the class email-container. On phones it becomes full width.
Rows. Header, content, button, footer. Each row is a <tr> with one <td>.

All visual styles are written inline on each element, because many email clients ignore or strip stylesheets. The style block in the head only holds the phone rules.

<!-- Preview text: shown after the subject line in the inbox. Edit it. -->
<div style="display:none; ...">Your workspace is ready. Here are three quick steps.</div>

Brand and colours

Name

The sample company is called Nexus. Use find and replace across the templates and text folders:

Find	Replace with
`Nexus` and `NEXUS`	your product name
`nexus.example`	your domain
`◆`	your own symbol, or delete it
`123 Example Street, Your City`	your postal address. Most countries require one in marketing email.
`Marcus`, `Acme Corp`	merge tags, see below

Colours

Colours are plain hex values. Replace them with find and replace. The main ones:

Colour	Used for
`#E94560`	red accent and buttons (01, 04, 10, 18, 19, 20)
`#667EEA` / `#764BA2`	blue to purple gradient (03, 04, 12, 13)
`#4F46E5` / `#7C3AED`	indigo to violet gradient (08, 11)
`#F97316`	orange (05, 14, 19)
`#EF4444` / `#DC2626`	warning red (05, 07, 09, 17)
`#16A34A`	success green (06, 12, 14, 15)
`#0A0A0A`	black text, headers and buttons (most templates)
`#1A1A2E` / `#16213E` / `#0F3460`	navy backgrounds (01, 10, 18, 19, 20)
`#F0F2F5` / `#F7F8FA`	page background and soft panels

When you change a gradient, change its fallback too. Each gradient has a solid colour next to it, in background-color and in the bgcolor attribute. Outlook shows only that solid colour. Keep it close to your gradient so light text stays readable.

<td bgcolor="#16213E"
    style="background-color: #16213E;
           background-image: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);">

Fonts

The templates use 'Helvetica Neue', Arial, sans-serif. Web fonts are unreliable in email, so this is deliberate. If you change the font, change it in every inline font-family.

Merge tags

Two tags are already in place. Search the files for {{ to find them:

{{action_url}} on the main button of each email.
{{unsubscribe_url}} on every Unsubscribe link.

Rename them to whatever your sending tool expects. Everything else in the templates is sample content, such as the name Marcus, for you to replace with tags. Common syntax:

Tool	First name	Unsubscribe link
Mailchimp	`\|FNAME\|`	`\|UNSUB\|`
SendGrid	`{{first_name}}`	`{{{unsubscribe}}}`
Postmark	`{{first_name}}`	`{{{pm:unsubscribe}}}`
Brevo	`{{ contact.FIRSTNAME }}`	`{{ unsubscribe }}`
Klaviyo	`{{ first_name }}`	`{% unsubscribe %}`
Customer.io	`{{customer.first_name}}`	`{% unsubscribe_url %}`

These tools change their syntax from time to time, so confirm it in your tool's own documentation. If you send from your own code, use whatever your template engine uses (Handlebars, Liquid, Jinja, Blade and so on).

Transactional emails such as password resets, receipts and security alerts normally do not need an unsubscribe link. Marketing emails do.

What to replace in each template

Template	Sample values to turn into tags
01 Welcome	first name, workspace link
02 Invoice	invoice number, customer name, email, company and address, issue and due dates, status, line items, subtotal, tax, total, payment link
03 Password reset	first name, reset link (button and plain URL), expiry time, location
04 Newsletter	issue and month, intro, feature story, update list
05 Trial ending	days, hours and minutes left, usage numbers, price, upgrade link
06 Subscription confirmed	plan, billing cycle, amount, next payment date, first name, email
07 Payment failed	charge date, last four card digits, reason, amount, days until pause, update link
08 Team invitation	inviter name, workspace, role, team size, expiry, accept link
09 Account suspended	first name, amount owed, days outstanding, reactivate link
10 Feature announcement	feature name, three stats, feature list, link
11 Magic sign-in link	email, sign-in link (button and plain URL), expiry, time, location, device
12 Weekly digest	first name, week, four stats, top items, link
13 Onboarding step	first name, day and step, video link, three steps, link
14 Referral	first name, reward amount, referral link, three stats
15 Receipt	amount, date and time, description, payment method, transaction ID, next payment date
16 Feedback survey	first name, number of days, ten score links, survey link
17 Security alert	time, location, device, IP address, two action links
18 Cancellation	first name, plan, access-until date, offer, export link
19 Upgrade prompt	usage and limit, reset date, plan details, price, upgrade link
20 Win-back	first name, days away, feature list, offer and expiry, link

Repeating rows

The invoice lines are repeated blocks marked with comments such as . Digest items and feature lists repeat in the same way. Wrap one block in your template engine's loop and delete the others.

{{#each items}}
<table role="presentation" ...>
  <tr>
    <td ...>{{name}}</td>
    <td ...>{{quantity}}</td>
    <td ...>{{unit_price}}</td>
    <td ...>{{total}}</td>
  </tr>
</table>
{{/each}}

Links and buttons

Links that still read href="#" are placeholders. Replace each with a full address that starts with https://. Relative links do not work in email.

A button is a table cell with a link inside. Keep both parts when you copy one:

<td bgcolor="#E94560" align="center"
    style="background-color: #E94560; border-radius: 8px; mso-padding-alt: 16px 36px;">
  <a href="{{action_url}}"
     style="display: inline-block; padding: 16px 36px; color: #ffffff; text-decoration: none; ...">
    Open your workspace
  </a>
</td>

The padding appears twice on purpose. Most clients use the padding on the link, which makes the whole button clickable. Outlook on Windows ignores that and uses mso-padding-alt on the cell. If you change the size, change both. To recolour, change bgcolor and background-color together.

Rounded corners and shadows are not shown in Outlook on Windows. Buttons and cards appear with square corners there.

Adding a logo image

The templates use a text logo so nothing breaks when images are blocked. To use an image, upload it to your own site or your sending tool and replace the text logo:

<img src="https://yourdomain.com/email/logo.png" width="120" alt="Your product"
     style="display: block; border: 0; width: 120px; height: auto;">

Use a full https:// address.
Always set width as an attribute. Outlook needs it.
Always write alt text. It is what people see when images are off.
Export at twice the display size (240 pixels wide for a 120 pixel logo) so it is sharp on phones.
Use PNG or JPG. SVG is not supported by most email clients.

Plain-text versions

Email is best sent with two parts: HTML and plain text. Spam filters like it, and some people read text only. Each template has a matching file in text.

The first two lines of each text file are a suggested subject and preview. They are notes for you, not part of the email body. Copy what is under the dashed line into the text part of your email, and apply the same changes you made to the HTML.

Links are written as Label: https://example.com/your-link. Replace each address.

Sending and testing

Copy the whole file, from <!DOCTYPE html> to </html>, into your tool's HTML or code editor. Do not paste it into a drag-and-drop or rich-text editor, which rewrites the markup.
Paste the text version into the plain-text field, if your tool has one.
Set the subject. The <title> of each file is a suggestion.
Send a test to yourself and open it in the clients your customers use. At minimum: Gmail on the web, Gmail or Apple Mail on a phone, and Outlook on Windows if you sell to businesses.
Click every link in the test.

If your tool has an option to inline CSS, you can leave it off. The styles are already inline.

For checking many clients at once, services such as Litmus and Email on Acid show screenshots of your email in dozens of clients.

Email client notes

The templates were built to established email practices and checked in a browser at 320, 375 and 600 pixels wide. They were not run through every email client, and clients change. What to expect:

Client	What to expect
Apple Mail, iOS Mail	Full design, including gradients, rounded corners and the phone layout.
Gmail (web, Android, iOS)	Full design. Gmail cuts off emails larger than about 102 KB; the largest template here is under 20 KB.
Outlook on Windows	Solid colours instead of gradients, square corners, no shadows. Layout and buttons hold.
Outlook.com, new Outlook, Outlook on Mac	Close to the full design.
Yahoo Mail	Full design.
Dark mode	The templates ask clients to keep the light design. Some clients recolour emails regardless, so check yours in dark mode.

Icons are emoji. They look slightly different on each platform, which is normal.

Troubleshooting

The email looks unstyled or broken after pasting

It was probably pasted into a visual editor. Use the HTML or code editor of your sending tool.

White text has disappeared in Outlook

You changed a gradient but not its solid fallback. Set bgcolor and background-color to a dark colour that matches. See Brand and colours.

My merge tag shows as text

The syntax does not match your tool, or the test was sent without sample data. Check your tool's documentation.

The phone layout does not apply

Some clients remove the style block in the head when an email is forwarded, and a few older apps ignore it. The 600 pixel layout still reads correctly, scaled down.

Gmail shows "message clipped"

The email went over about 102 KB, usually from long content or tracking code added by the sending tool. Shorten the email.

Links are underlined or turn blue

A client is auto-linking a date, address or phone number. Wrap that text in a link of your own with the style you want, or break it with a zero-width character.

License

One purchase lets you use the templates in unlimited projects, for yourself and for clients, including commercial products. You may not resell, share or redistribute the templates or their source. The full text is in LICENSE.txt.

Need help? Reply to your purchase receipt email.