Email Signature Generator — Help v1.0.0

Overview

The Email Signature Generator creates polished, branded email signatures that look the same in every email program. Pick a template, fill in your details, adjust the visual settings in the Brand & Visuals / Type & Layout / Footer panels, and copy the result into your email client. No technical knowledge required.

Two modes are available: Single for one signature at a time, and Bulk (CSV) for generating signatures for an entire team from a spreadsheet. The mode toggle sits at the very top of the builder — that's the first decision to make.

The builder uses a 3-column layout. Column 1 is the section navigator — Templates, Your Info (or Upload CSV in Bulk mode), Brand & Visuals, Type & Layout, Footer, and Customize HTML. Column 2 shows one section's edit form at a time. Column 3 is a sticky preview with light / dark toggle, Template Preview / Final Output switch, Export as HTML, and the Generate button.

On screens narrower than 1024px the preview collapses behind a toggle in column 2. Below 768px the section navigator is replaced with Previous / Next pager buttons under the active panel, and the Generate button sits inline at the end of the builder rather than pinned to the viewport.

Before you start

Have these handy before opening the tool:

• Your brand color as a hex code (e.g. #1f2937). If you don't have one, the tool defaults to a tasteful dark gray.
• A logo URL (optional). The image must already live somewhere public — most often your website. The tool does not host images.
• A photo URL (optional). Same rule — public URL only.
• Your company name and website. Set once in the Brand & Visuals panel and used across every signature.

Single or Bulk

Switch between modes using the toggle at the top of the builder:

Choose a Template

The Templates section (first item in the section navigator) holds the template dropdown plus two helpers: Load a saved signature for re-opening a prior export, and Download a sample CSV for bulk generation. The preview in column 3 updates as you switch templates — you won't lose anything by trying a different one.

Available templates

Load a saved signature

Every signature exported as an HTML file carries an invisible payload that captures the template + your settings (brand color, font, etc.). The Load a saved signature button lets you re-upload that file later and the tool reseeds itself to where you left off. Useful when you want to revisit a design from months ago without remembering every setting.

Signature Editor

The Signature Editor is the large text area showing the template's HTML. For most presets you'll never need to touch it — the Brand & Visuals / Type & Layout / Footer panels handle all the visual changes. The editor matters most for the Custom Template option, where you paste in your own HTML.

The editor lives inside the Customize HTML section (the last item in the section navigator, flagged with an "Advanced" badge so first-time users aren't pushed into raw HTML). Selecting Custom Template from the dropdown automatically opens it. You can also open it manually any time you want to peek at or edit a built-in template's markup.

Variables

The Variables card (when shown) lists every variable your template references — these are the placeholders the renderer substitutes with real data. The card is contextual: it appears automatically in Bulk mode (so you can see which CSV columns are required) and when you've selected Custom Template (so you have a reference while editing). In Single mode with a preset template the card stays hidden because the Your Information form already labels every field. Each pill is color-coded:

• Matched — the variable has a corresponding CSV column or Brand & Visuals field set.
• Missing — the variable has no source. The signature will render with an empty value at that spot.
• Unused — your CSV has a column the template doesn't reference. The column is ignored.

Template Variables (drag-and-drop)

Inside the Customize HTML section, below the editor, the Template Variables card shows draggable pills — drag any of these into the editor at the cursor location to insert the token. They include the branding tokens (configured in the Brand & Visuals / Type & Layout / Footer panels) plus structural tokens like {{Divider}}, {{Spacer}}, and {{CtaButton}}.

Warnings

The variables panel surfaces warnings in colored callouts:

• Missing CSV columns — your CSV is missing one or more required headers.
• Unguarded row — a variable inside a table row that isn't wrapped in {{#if Variable}} guard. Empty values would leave a blank row.
• Missing Website — your template links to {{Website}} but the Brand & Visuals panel's Website field is empty. The link won't work until you fill it in.
• Template errors — unclosed {{#if}}, orphan {{else}}, etc.

Upload CSV

In Bulk mode, drag a .csv file into the dropzone (or click to browse). The first row of the file is the header row — it tells the tool what each column represents.

Tips

• Header spelling must match exactly. Phone Number ≠ Phone.
• Empty cells are fine. The template will skip that line for that person if you guard the variable with {{#if Variable}}.
• Save as .csv (not .xlsx). Most spreadsheet apps offer this under File → Export → CSV.
• Maximum batch size is 500 rows. Split larger lists into batches.

Your Information

In Single mode, this panel is where you enter your personal details. Each field maps to a variable in the template:

A small status dot appears on the Your Info navigator button: amber until at least one field is filled in, green once any data has been entered. Use it as a glance-able progress indicator across the whole builder.

Branding

Branding holds the firm-wide visual identity — set these once and they apply to every signature. These settings live in the Brand & Visuals panel (Colors · Logo · Company · Photograph · Call to Action sub-sections).

Brand Color and Font Color

Two color pickers. {{BrandColor}} controls the accent (dividers, headings, links, optionally social icons). {{FontColor}} is the body text color. Either accepts a hex value typed manually.

Brand presets — if you've saved color combinations in the QR Code Generator on the same device, they appear as one-click chips above the Brand Color picker. Picking a chip applies its foreground to Brand Color and its background to Font Color. The presets live in your browser's local storage; nothing is transmitted between tools and nothing is stored on the server.

Logo

The Logo URL field holds a public URL pointing to your firm's logo image (PNG/JPG/SVG). The Logo Width sets the rendered width in pixels (height auto-scales).

The template uses {{Logo}} to insert the rendered <img> block. If the template also references {{Website}}, the logo is automatically wrapped in a link to that URL.

Company Name and Website

Two fields:

• {{CompanyName}} — the firm's display name, used in headings or the linked logo's alt text.
• {{Website}} — the firm's website URL. Used as the destination when the logo is wrapped in a link, and as a visible website line in the signature when the template references it.

Tracking Parameters

A single editable query string appended to outbound links so clicks show up in your analytics. The default — utm_source=email-signature&utm_medium=email&utm_campaign=brand — is a working starting point; edit the parameter values to match your campaign naming, or clear the field entirely to disable tracking.

Where it's applied:

• Website link — the destination of {{Website}}-linked anchors. The visible URL text stays clean; only the href attribute carries the parameters.
• Logo link — when the template wraps the logo in a {{Website}} anchor.
• CTA Button URL — the destination of the Call to Action button.

Not applied to social icons. Tracking-tagged social profile URLs frequently break platform-side redirects, look unprofessional in the address bar, and pollute the social network's own analytics. Tracking is reserved for first-party destinations.

Input is normalized on read: leading ? or & are stripped (so you can paste either form), whitespace and attribute-breaking characters (", ', <, >) are removed, and the final value is appended after the URL's existing query string when present.

Call to Action button

Optional button row that renders below the signature body. Four fields control it:

• Button Text — the visible label (e.g. Schedule a Consultation). Max 48 characters. Token: {{CtaText}}.
• Button URL — the link destination. Token: {{CtaUrl}}.
• Button Color — background hex. Default #2563eb. Token: {{CtaColor}}.
• Button Text Color — text hex. Default #ffffff. Token: {{CtaTextColor}}.

{{CtaButton}} expands to a complete table-based button row using all four values. The block only renders when both Button Text and Button URL are set — leaving either empty collapses the button entirely so an unused CTA won't leave a stray empty row.

Custom Templates can use the scalar tokens ({{CtaText}}, {{CtaUrl}}, etc.) directly for bespoke button layouts. The conditional {{#if CtaButton}}…{{/if}} evaluates truthy only when both text and URL are present.

Typography

Controls how the text reads. These settings live in the Type & Layout panel (Typography Preset + Fonts sub-sections, at the top of the panel above the Divider, Spacer, and Rendering Options).

Preset

A quick toggle between three combinations:

• Modern — Arial, 14px, 1.6 line-height
• Traditional — Georgia, 13px, 1.5 line-height
• Minimal — Helvetica, 12px, 1.4 line-height
• Custom — set everything individually

Font Family, Size, Line Height

The tool offers a short list of email-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) because email programs don't reliably display custom fonts. Font size is in pixels; line height is a multiplier.

Tokens: {{FontFamily}}, {{FontSize}}, {{LineHeight}}.

Photograph

Controls how the headshot displays. These settings live in the Brand & Visuals panel (Photograph sub-section, alongside Colors / Logo / Company / Call to Action).

• Photo URL — a public URL pointing to the headshot image. Token: {{PhotoURL}}.
• Photo Width — width in pixels. Recommended range 80–120 px. Token: {{PhotoWidth}} (alias of {{PhotoSize}}).
• Photo Border Radius — accepts a CSS value. 50% for a circle; 6px for rounded corners; 0 for square. Token: {{PhotoBorderRadius}}.

Templates that reference {{#if PhotoURL}} hide the photo block entirely when the URL is empty — no broken image icon.

Footer

Controls the small disclaimer line that appears at the bottom of every signature. These settings live in the Footer panel — its own section in the navigator, separate from Brand & Visuals and Type & Layout.

• Disclaimer Footer Text — multi-line text. Newlines become <br>. Leave blank to skip the footer entirely. Token: {{Disclaimer}}.
• Disclaimer Font Size — 8–24 px. Token: {{DisclaimerFontSize}}.
• Disclaimer Color — hex value. Default gray (#6b7280). Token: {{DisclaimerColor}}.

Layout

Structural elements between content rows. These settings live in the Type & Layout panel (Divider / Spacer / Rendering Options sub-sections, below Typography Preset and Fonts).

• Divider — the horizontal line some templates draw between blocks. You can tune thickness, padding, color, and style (solid, dashed, dotted, double). Token: {{Divider}} expands to the full row markup; the individual scalars ({{DividerThickness}}, {{DividerColor}}, etc.) are also substitutable.
• Spacer Height — the height of {{Spacer}} rows, in pixels.
• Force Brand Color on Links — overrides any link color inside the signature with the Brand & Visuals brand color.

Preview Window

The right column of the builder (the inspector) shows a live preview that updates as you type. On screens narrower than 1024px the inspector hides behind a Preview toggle button at the top of column 2; tap it to swap between the edit form and the preview. The preview includes:

• Template Preview / Final Output toggle — Template Preview shows the laid-out signature with every variable rendered as {{TokenName}} verbatim; Final Output shows the substituted result.
• Theme toggle — switch between light and dark previews to see how the signature reads against either backdrop.
• Row navigation (Bulk mode only) — arrow through each row of your CSV to verify how a real entry renders.
• Export as HTML — saves the previewed signature as a standalone HTML file. Useful for previewing in a browser before pasting.

After generating, the result area below the builder shows every signature with per-row Copy and Copy HTML buttons.

Pasting into your email program

• Gmail: Settings → See all settings → General → Signature → paste.
• Outlook (web): Settings → View all → Mail → Compose and reply → paste under Email signature.
• Outlook (desktop): File → Options → Mail → Signatures → New → paste.
• Apple Mail: Mail → Settings → Signatures → "+" → paste.

If the signature appears as raw HTML code, your email program is in "plain text" mode. Switch to "rich text" or "HTML" first.

Sample CSV

The Download a sample CSV button in the Templates panel generates a CSV file with all the column headers your currently-selected template references. Two example rows are pre-filled to show what valid data looks like.

Use it as a starter:

1. Pick the template you want to roll out.
2. Click Download a sample CSV.
3. Open the file in your spreadsheet app and replace the example rows with your team's data.
4. Save as .csv, switch the builder to Bulk mode, and upload it on the Upload CSV panel.

Template Variables

A reference of every token a template can use. Tokens are written {{Name}} and substituted at render time. Most templates already use these correctly — this reference matters mainly for Custom Templates.

Per-person tokens

Filled in from the Your Information form (Single mode) or from CSV columns (Bulk mode).

Branding tokens

Filled in from the Brand & Visuals panel. Apply to every signature in the batch.

Photograph tokens

Typography tokens

Layout tokens

Footer tokens

Social icon tokens

Each expands to a small icon link sized for email. The icon hides itself when the underlying URL is empty.

Conditional syntax

Wrap optional content in {{#if Variable}}…{{/if}} so empty values don't produce blank rows. The block renders only when the variable has a value.

{{#if Phone Number}}
				<tr><td>T: {{Phone Number}}</td></tr>
			{{/if}}

An optional {{else}} branch renders when the variable is empty:

{{#if Phone Number}}
				T: {{Phone Number}}
			{{else}}
				(no phone on file)
			{{/if}}

How tokens compose

{{Logo}} depends on three other tokens internally:

• {{LogoWidth}} sets the rendered width.
• If the template references {{Website}}, the image is wrapped in <a href="{{Website}}">…</a>.
• {{CompanyName}} populates the link's alt text and aria-label.

Similarly, {{Divider}} internally uses {{DividerThickness}}, {{DividerPadding}}, {{DividerColor}}, and {{DividerStyle}} to build the row markup.

Customizing your template

This section is the deep guide for writing or editing the raw HTML behind your signature. Most users will never need it — the built-in templates plus the Brand & Visuals / Type & Layout / Footer panels cover the common cases. Read this when you've chosen Custom Template from the dropdown and want to understand what you can do, what to avoid, and how the variable + conditional system works under the hood.

Anatomy of an HTML email signature

Email clients are not browsers. Outlook for Windows uses Word's rendering engine; Gmail strips most CSS; Apple Mail respects more than Gmail does but still has quirks. The rules below are the safe baseline:

• Use tables for layout. Wrap the whole signature in a single <table>. Use nested tables for columns. Flexbox and grid don't work in Outlook.
• Inline styles only. Move every CSS rule onto the element itself: style="color:#333;font-size:13px;". External and embedded <style> blocks are stripped by Gmail.
• Fixed width, max-width safety net. Set width="600" on the outer table for desktop, plus style="max-width:600px;" so it shrinks gracefully on mobile clients that respect viewport.
• Always set cellpadding="0" cellspacing="0" border="0" on every table — Outlook adds default spacing otherwise.
• Font family fallback chains. Use font-family:Arial,Helvetica,sans-serif; rather than a single name. Outlook may not have your preferred font.
• Alt text on every image. Many clients block images by default; alt text is what your recipient sees first.
• No JavaScript. All clients strip it. Anything dynamic must be done at render time, not on the recipient's side.
• Web-safe colors as hex. Stick to #RRGGBB. Named colors and rgb() work but hex is the most reliable.
• No external CSS or fonts. Don't link to a stylesheet or Google Fonts. The signature must be fully self-contained.

Variables — the basics

Anything inside {{double curly braces}} is a variable. At render time the tool replaces each token with its value:

<td>{{Name}}</td>
<td>{{Position}}</td>
<td><a href="mailto:{{Email}}">{{Email}}</a></td>

After substitution this becomes plain HTML like <td>Jane Smith</td>. The tool escapes the values so they can't break out into surrounding markup — your template's structure stays safe even if a data field contains an apostrophe or stray angle bracket.

Where the values come from

• In Single mode they come from the "Your Information" form panel.
• In Bulk mode they come from the CSV's columns — the column header name must match the variable name (case-sensitive on spelling, case-insensitive on letter case).
• Branding tokens ({{Logo}}, {{Website}}, {{BrandColor}}, {{FontFamily}}, etc.) always come from the Brand & Visuals / Type & Layout / Footer panels — they are firm-wide, never per-person.

Type hints — sanitizing what gets substituted

Append |type after a variable name to apply a sanitizer:

Conditional blocks — {{#if Field}}

Wrap markup in {{#if Field}}…{{/if}} to render it only when the field has a value. The most common use is gating an entire table row:

{{#if Phone Number}}
				<tr>
				<td>Phone:</td>
				<td><a href="tel:{{Phone Number}}">{{Phone Number}}</a></td>
				</tr>
			{{/if}}

When Phone Number is empty, the whole <tr> is dropped. When it has a value, the row renders normally. This is how the built-in templates avoid blank "Phone:" lines for people who don't have a phone column populated.

What counts as "empty"

A field is considered empty (falsy) when its value, after stripping all whitespace and invisible Unicode characters (non-breaking spaces, zero-width joiners, BOM marks), is the empty string. Excel often pastes invisible characters into "empty" cells — the renderer handles this automatically. You don't need to clean your CSV first.

{{else}} — fallback content

Add {{else}} inside an if block to render alternate content when the field is empty:

{{#if Cell Phone Number}}
				<tr><td>Mobile: {{Cell Phone Number}}</td></tr>
			{{else}}
				<tr><td>Available by email</td></tr>
			{{/if}}

Either branch can be empty:

• {{#if X}}A{{else}}{{/if}} — renders A when X is set, nothing otherwise. (Same as the no-else form.)
• {{#if X}}{{else}}B{{/if}} — renders nothing when X is set, B otherwise. (Useful for "missing data" placeholders.)

Nesting conditionals

Conditional blocks nest to any depth:

{{#if Phone Number}}
				<tr><td>
				{{#if Cell Phone Number}}
					Office: {{Phone Number}} · Mobile: {{Cell Phone Number}}
				{{else}}
					Office: {{Phone Number}}
				{{/if}}
				</td></tr>
			{{/if}}

The outer block hides everything when there's no Phone Number at all; the inner block adjusts the wording based on whether a cell phone is also available.

Structural tokens — Divider, Spacer, Logo

Some tokens expand to full HTML blocks rather than substituting a scalar value. Use them inside <table> exactly where you'd write the equivalent <tr>:

Tips & common patterns

A clickable phone number with fallback

{{#if Phone Number}}
				<tr><td>
				<a href="tel:{{Phone Number}}" style="color:{{BrandColor}};text-decoration:none;">
				{{Phone Number}}
				</a>
				</td></tr>
			{{/if}}

The renderer normalizes the digits inside tel: hrefs to RFC-3966 (strips spaces, hyphens, parens) so mobile dialers handle them correctly. The visible text keeps your formatting.

A photo block that drops when no photo

{{#if PhotoURL}}
				<td width="{{PhotoWidth}}" valign="top">
				<img src="{{PhotoURL}}" width="{{PhotoWidth}}"
				style="border-radius:{{PhotoBorderRadius}};display:block;"
				alt="{{Name}}">
				</td>
			{{/if}}

The photo column disappears entirely when the row has no PhotoURL — no empty cell, no Outlook-quirky blank box.

Bar admissions or credentials per person

{{#if Bar Admissions}}
				<tr><td style="font-size:11px;color:#6b7280;">
				Admitted: {{Bar Admissions}}
				</td></tr>
			{{/if}}

Add a custom column called Bar Admissions to your CSV. Attorneys with credentials get the row; others don't. The template variable can be any column name you invent.

Dark-mode-friendly colors

Email clients increasingly auto-invert dark mode. Pure black backgrounds get inverted to white in some clients and stay black in others — the result is unpredictable. Use mid-tone grays (#1f2937, #374151) and brand accent colors that read on both backgrounds.

Common mistakes

Testing your template

• Template Preview — see the laid-out signature with every variable visible as {{TokenName}}. This is the structural view; use it while editing the HTML.
• Final Output — see fully rendered output as the recipient would receive it. Use this to verify substitution and color choices.
• Light / Dark toggle — flip the preview's surface to gauge dark-mode behavior.
• Export as HTML — opens the rendered signature as an .html file in a new tab. Open it in a browser to confirm what the recipient sees.
• Send a test email — copy the rendered HTML and email it to yourself. Open in your three most-used clients (typically Gmail web, Outlook desktop, Apple Mail). This is the only way to catch real-world rendering issues; client-side previews can only approximate.
• Byte counter — the small "x.x / 20KB" under the editor turns amber at 80% and red at 100%. Once red, the Generate button refuses to submit. See Limits for why this cap exists.

When to start from a built-in template

Custom Template is powerful but you do not need to start from a blank page. Pick the built-in template that's closest to your intended design, switch to Custom Template (which copies the preset into the editor), and edit from there. The 19 built-in templates are all production-tested across major email clients — they are the right starting point unless you have a very specific design that none of them match.

Privacy

The tool is privacy-conscious by design. Signatures are generated in your browser; the content you type or upload is processed, rendered, and returned without being kept.

What we don't store

• Names, emails, phone numbers, addresses, photos, or any other personal data you type or upload.
• Your template HTML, including custom templates.
• The rendered signature HTML.
• CSV file contents. The file is processed in memory and discarded.

What we do store (per generation)

A small analytics row records that a generation happened. None of these values can be traced back to an individual signature's content.

• Timestamp — when the generation ran.
• Mode — Single or Bulk.
• Signature count — how many rows were processed.
• Template slug — which template was selected (e.g. executive-left-photo). Not the template content.
• Brand color — the hex value used. Not your firm name.
• Font family key — a short tag like arial indicating which font family was used.
• Booleans: whether a logo, photo, or social link was present (yes/no — no URLs stored).
• IP address — see below for why.

Why we store the IP address

The IP is anonymized (hashed by default) before storage — not joined to any personal data, since no personal data is stored. The retention window is 365 days; older rows are automatically deleted. Hashing is configurable in Settings → Privacy.

Bot protection

When CAPTCHA is enabled by the administrator, public submissions must pass a Cloudflare Turnstile challenge. The challenge prevents automated submissions and is independent of the analytics described above.

Limits

All operational caps in one place. These exist to keep the public-facing tool fast for legitimate users and resilient against automated abuse.

Per-visitor rate limits

Two independent counters apply per IP address. Logged-in administrators are exempt; both limits run against anonymous (public) submissions and any authenticated non-admin users.

When a limit triggers, the response shows the reset time in your local timezone — for example, "You've reached the hourly generation limit (10 per hour). Try again at 3:00 PM (in 23 minutes)."

Bulk submission caps

• Maximum CSV rows: 500. Hard ceiling. Larger lists must be split into batches. Configurable down (not up) via the lct_email_signatures_max_rows filter and the admin Maximum CSV Rows setting.
• Maximum upload size: 5 MB. Configurable via the lct_max_upload_size filter.
• Per-row analytics fields: template_slug, brand_color, font_family_key, generation_mode, three booleans. No row content is stored; see Privacy.

Field caps

• Logo URL / Photo URL: validated as a public URL. The image itself isn't downloaded or hosted by the tool — recipients fetch it from your server.
• Disclaimer font size: 8–24 px.
• Logo width: 40–400 px.
• Photo width: 40–200 px.
• Brand color / Font color / Disclaimer color: must be a valid #RRGGBB hex value. Invalid input falls back to a tasteful default.

Retention

• Tool run records: 365 days. Filter: lct_run_retention_days.
• Logs: 30 days. Filter: lct_log_retention_days.
• Rate-limit buckets: automatically pruned after their window expires (1 hour or 1 day).

A daily cron job (lct_daily_retention_prune) handles all three. The Logs admin page surfaces the last run + next scheduled run at the top — a missing schedule indicates WP-Cron has stopped firing.

Validation rate limit

The template-validation endpoint (/signature/validate) used by the live editor is rate-limited to 30 requests per minute per user/IP. Filter: lct_signature_validate_rate_max / lct_signature_validate_rate_window.