Documentation
A SigFinch template is email-safe HTML with two extra things: tokens that get filled in per person, and conditionals that drop a row when there's nothing to put in it.
A token is a name in double braces, like {{name}}. When a signature is
rendered for a person, each token is replaced with their value. A token with no value simply
renders as nothing, so an optional field never leaves a stray label or a gap — see conditionals
below for dropping the whole row.
Values are escaped on the way in, so a name with an ampersand or a quote in it can't break the markup.
Filled in by each staff member on their own signature page.
| Token | What it is | Example |
|---|---|---|
{{name}}
|
Full name | Alex Morgan |
{{first_name}}
|
Given name only | Alex |
{{last_name}}
|
Family name only | Morgan |
{{job_title}}
optional
|
Role title | Head of Strategy |
{{department}}
optional
|
Team or department | Strategy |
{{email}}
|
Work email address. Set by an administrator, never by the employee. | [email protected] |
{{pronouns}}
optional
|
Preferred pronouns | they/them |
Use the _e164 variants inside a tel: href. They strip spaces and punctuation so the number is dialable.
| Token | What it is | Example |
|---|---|---|
{{phone}}
optional
|
Landline, formatted for display | 03 9123 4567 |
{{phone_e164}}
optional
|
Landline for use in href="tel:{{phone_e164}}" | +61391234567 |
{{mobile}}
optional
|
Mobile, formatted for display | 0412 345 678 |
{{mobile_e164}}
optional
|
Mobile for use in href="tel:{{mobile_e164}}" | +61412345678 |
{{scheduling_link}}
optional
|
Booking page URL | https://cal.com/example |
{{scheduling_label}}
|
Link text for the booking link | Book a meeting |
{{card_url}}
|
The person's digital business card page. Always current: it renders from the same details as the signature. | https://sigfinch.com/card/abc123 |
Circle-cropped server-side, because Outlook on Windows ignores border-radius. Point src at the 2x variant and set width/height to the display size.
| Token | What it is | Example |
|---|---|---|
{{avatar}}
optional
|
Photo URL at display size | — |
{{avatar_2x}}
optional
|
Photo URL at twice display size, for retina screens | — |
Controlled centrally under Brand settings, so every signature stays consistent.
| Token | What it is | Example |
|---|---|---|
{{org.name}}
|
Organisation name | — |
{{org.website}}
optional
|
Website URL | — |
{{org.address}}
optional
|
Postal or street address, on one line | 12 Example Street, Melbourne VIC 3000 |
{{org.strapline}}
optional
|
Short positioning line for the footer bar | Polystyrene customised for your needs. |
{{org.hours}}
optional
|
Trading hours, shown beside the strapline | Mon–Thu 7:30 am–4:30 pm |
{{org.logo}}
optional
|
Hosted logo URL | — |
{{org.logo_width}}
optional
|
Intended logo display width in pixels | — |
{{org.mark}}
optional
|
Square logo URL, for a tile or circle. Falls back to the wide logo | — |
{{org.primary_color}}
|
Primary brand colour, for headings | — |
{{org.accent_color}}
|
Accent colour, for links and rules | — |
{{org.text_color}}
|
Body text colour | — |
{{org.muted_color}}
|
Secondary text colour, for labels | — |
{{org.font_stack}}
|
Body font stack. System fonts only. Mail clients strip web fonts. | — |
{{org.font_size}}
|
Base font size including the unit | 14px |
{{org.line_height}}
|
Body line height. Pair it with mso-line-height-rule: exactly or Outlook ignores it. | 20px |
{{org.row_spacing}}
|
Vertical cell padding between contact rows | 2px |
{{org.icon_row_padding}}
|
Row padding for an icon cell, nudged so the icon sits on the same line as its text | 5px 0 2px |
{{org.block_spacing}}
|
Gap between blocks. Name, contacts, banner, disclaimer | 10px |
{{org.column_gap}}
|
Gap between the logo or photo column and the details | 22px |
{{org.outer_padding}}
|
Padding around the whole signature | 0px |
{{org.heading_font_stack}}
|
Heading font stack. Falls back to the body font when none is set. | — |
{{org.heading_font_size}}
|
Heading size including the unit | 18px |
{{org.heading_style_extra}}
optional
|
Case, weight and letter-spacing chosen for the name, as inline CSS. Empty unless set | — |
{{org.title_style_extra}}
optional
|
Case, weight and letter-spacing chosen for the job title, as inline CSS. Empty unless set | — |
{{org.disclaimer}}
optional
|
Legal disclaimer text | — |
These URLs are permanent. What they serve is decided by whichever campaign is active, which is how a banner changes inside signatures that were installed months ago. Always wrap a banner block in sd-if.
| Token | What it is | Example |
|---|---|---|
{{banner.promo.image}}
optional
|
Banner image URL for the "promo" slot | — |
{{banner.promo.link}}
optional
|
Click-through URL for the "promo" slot | — |
{{banner.promo.width}}
optional
|
Configured display width of the slot | — |
A network that has not been set is absent entirely, so each link must be wrapped in sd-if to avoid a lint error.
| Token | What it is | Example |
|---|---|---|
{{social.linkedin}}
optional
|
LinkedIn URL | — |
{{social.instagram}}
optional
|
Instagram URL | — |
{{social.facebook}}
optional
|
Facebook URL | — |
{{social.twitter}}
optional
|
X / Twitter URL | — |
{{social.youtube}}
optional
|
YouTube URL | — |
Small PNG glyphs, tinted to the brand colour unless the organisation has uploaded its own. Always give the img an explicit width and height. Outlook ignores CSS sizing on images.
| Token | What it is | Example |
|---|---|---|
{{icon.phone}}
|
Handset glyph | — |
{{icon.mobile}}
|
Mobile glyph | — |
{{icon.email}}
|
Envelope glyph | — |
{{icon.website}}
|
Globe glyph | — |
{{icon.address}}
|
Map pin glyph | — |
{{icon.linkedin}}
|
LinkedIn mark | — |
{{icon.facebook}}
|
Facebook mark | — |
{{icon.instagram}}
|
Instagram mark | — |
{{icon.twitter}}
|
X / Twitter mark | — |
{{icon.youtube}}
|
YouTube mark | — |
An empty token renders as nothing, but its surrounding markup — a table row, a separator, a label — is still there, which can leave a gap or a stray bullet. Two attributes fix that by removing the element entirely.
sd-if="field" — keep this element only if field has a value.sd-if="!field" — keep it only if field is empty (a fallback).sd-unless="field" — the same as sd-if="!field", read the other way.
The attribute is stripped from the final HTML either way; it only decides whether the element
survives. A condition can name any token above, including a config.* toggle.
<!-- The job title row disappears if the person has no job title -->
<tr sd-if="job_title">
<td>{{job_title}}<span sd-if="department"> · {{department}}</span></td>
</tr>
<!-- Show the photo, or a coloured initial if there's no photo set -->
<td sd-if="avatar"><img src="{{avatar}}" width="64" height="64" alt=""></td>
<td sd-unless="avatar" style="background:{{org.accent_color}}">{{first_name}}</td>Mail clients are not browsers. A template that ignores this looks right in the editor and falls apart in an inbox, so the renderer expects, and the gallery templates all follow, a few rules:
<style> block is stripped by Gmail and others.border-radius is ignored in Outlook.Every gallery template is built to these rules, so the fastest way to start a custom one is to take a copy of the closest gallery layout and edit from there.
Ready to build one?
Custom templates live in the design section of your workspace, alongside the gallery.
Start free