Magic link email: what to include, with a free HTML and plain-text template
A magic-link email is the login. If it is slow, confusing or looks suspicious, the person cannot get into your product at all. Below is a checklist for writing one, and a complete working template (Mustache placeholders, table-based HTML plus a plain-text twin) you can copy. It is the same sign-in link email that ships in Mailroom Kit.
What a magic-link email needs
- A subject that names the product. "Your Northfield sign-in link" is findable in a crowded inbox and does not read like phishing. Avoid "Click here to log in".
- One button, one job. The button says "Sign in". Keep the raw link beneath it, because some clients and corporate scanners strip or rewrite buttons.
- Say when it expires, and that it works once. The template has
{{expires_in}}in both the preheader and the body. Fifteen minutes is a common choice; the number must match what your server enforces. - Show where the request came from. Device and time (
{{device}},{{requested_at}}) let the real user recognise the request and a different person notice they did not make it. Do not print an IP address or exact location unless you have a reason to. - Tell people what to do if it was not them. The honest answer for a magic link is usually "ignore this email": the link does nothing unless it is opened.
- Plan for link scanners. Some mail security tools open every link in a message, which can burn a one-time token before the person clicks. A common mitigation is to make the link open a page with a "Confirm sign-in" button and consume the token only on that click. That is server-side work this template cannot do for you.
- Make it short and send it fast. The person is waiting at a login screen. A short HTML message with no images and a text twin arrives and renders quickly; this one is 7.4 KB.
- Include a plain-text part with the same link. If the two parts differ, filters notice and some readers see the wrong one.
- Do not put the token in the subject or preheader. Those show in lock-screen previews and notification lists.
If you would rather send a numeric code than a link, the same layout works; the kit has a separate sign-in code email for that.
Plain-text version (copy as is)
Sign in to Northfield
Hi {{first_name}},
Use the button below to sign in. The link works once and expires in {{expires_in}}.
Sign in:
{{sign_in_url}}
Requested from: {{device}}
Requested at: {{requested_at}}
NOTE: If you did not ask for this link, you can ignore this email.
--
You received this because a sign-in link was requested for this address on Northfield.
Questions? Write to [email protected].
Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom
Replace Northfield, the support address and the postal address with yours. Placeholders are {{first_name}}, {{sign_in_url}}, {{expires_in}}, {{device}} and {{requested_at}}.
HTML version
Show the full HTML source (7.4 KB)
<!doctype html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Your Northfield sign-in link</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table{border-collapse:collapse}img{-ms-interpolation-mode:bicubic}a{overflow-wrap:anywhere}
@media only screen and (max-width:620px){.wrap{width:100%!important}.px{padding-left:20px!important;padding-right:20px!important}}
@media (prefers-color-scheme:dark){.pg{background-color:#10141b!important}.card{background-color:#1a212c!important}.tx{color:#eef1f6!important}.mu{color:#a9b4c4!important}.bd{border-color:#2f3a4a!important}.lk{color:#8fb0ff!important}.btn{background-color:#8fb0ff!important;color:#0d1526!important}.warn{background-color:#3a2c10!important;color:#ffe2a8!important}}</style>
</head>
<body class="pg" style="margin:0;padding:0;background-color:#f2f4f7;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Use this link within {{expires_in}} to sign in. It works once.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<table role="presentation" class="pg" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f4f7;"><tr><td align="center" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="wrap card" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;background-color:#ffffff;border-radius:10px;">
<tr><td class="px" style="padding:28px 32px 20px 32px;"><span class="tx" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:20px;line-height:28px;font-weight:700;color:#1b2330;">Northfield</span></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 8px 32px;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;"><h1 style="margin:0;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;" class="tx">Sign in to Northfield</h1></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Hi {{first_name}},</td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Use the button below to sign in. The link works once and expires in {{expires_in}}.</td></tr>
<tr><td class="px" align="left" style="padding:8px 32px 20px 32px;">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{sign_in_url}}" style="height:48px;v-text-anchor:middle;width:180px;" arcsize="14%" stroke="f" fillcolor="#2a56c6"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Sign in</center></v:roundrect><![endif]-->
<!--[if !mso]><!--><a class="btn" href="{{sign_in_url}}" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;display:inline-block;min-height:48px;line-height:48px;padding:0 28px;border-radius:7px;background-color:#2a56c6;color:#ffffff;font-size:16px;font-weight:700;text-decoration:none;">Sign in</a><!--<![endif]-->
</td></tr>
<tr><td class="mu px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 20px 32px;font-size:14px;line-height:21px;color:#556070;">If the button does not work, paste this address into your browser:<br><a class="lk" href="{{sign_in_url}}" style="color:#2a56c6;word-break:break-all;">{{sign_in_url}}</a></td></tr>
<tr><td class="px" style="padding:0 32px 20px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="bd" style="border-top:1px solid #dde2ea;border-bottom:1px solid #dde2ea;">
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:0px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">Requested from</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:0px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{device}}</td></tr>
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">Requested at</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{requested_at}}</td></tr>
</table></td></tr>
<tr><td class="px" style="padding:0 32px 20px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="warn" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;background-color:#fff4e0;color:#5c3a00;border-radius:7px;padding:14px 16px;font-size:15px;line-height:22px;">If you did not ask for this link, you can ignore this email.</td></tr></table></td></tr>
<tr><td class="px bd" style="padding:12px 32px 28px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;border-top:1px solid #dde2ea;padding-top:16px;font-size:14px;line-height:21px;color:#556070;">You received this because a sign-in link was requested for this address on Northfield.<br><br>Questions? Write to <a class="lk" href="mailto:[email protected]" style="color:#2a56c6;">[email protected]</a>.<br>Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom</td></tr></table></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr></table>
</body>
</html>
It uses nested tables with inline styles and Outlook conditional comments for the button, no web fonts and no images, the conservative pattern for email clients. It has not been tested in every client; send it to your own Gmail, Outlook and Apple Mail accounts before relying on it.
Check it before you send
Paste the HTML into the free email HTML checker to see its size, missing alt text, link problems and contrast, in your browser with nothing uploaded. The other thirteen emails are in the kit, and you can open four of them in the demo. Related free templates: password reset and payment failed.