Overview
The signature builder is a three-pane interface: a block palette on the left, a canvas in the centre, and an inspector on the right. It produces email-safe table-based HTML that renders correctly in Gmail, Outlook, Apple Mail, and all major clients.
Block types
Drag blocks from the left palette onto the canvas. Reorder them by dragging up or down. Click a block to select it and edit its properties in the right-hand inspector.
Name
Full name — supports {{firstName}} {{lastName}} variables. Font, size, colour, and weight are all configurable.
Title
Job title or department. Typically displayed below the name in a lighter weight.
Clickable mailto: link. Displays the email address by default or custom label text.
Phone
Primary phone number. Optional second line for mobile. Each line is clickable on mobile devices.
Website
Clickable URL. Set display text separately from the actual URL.
Logo
Company logo image. Upload from your computer, use {{company.logoUrl}}, or paste a URL directly. Set width in the inspector.
Banner
Wide image for campaigns or branding. Recommended width: 600px. Upload PNG/JPG/GIF/WebP/SVG, use Canva, or AI-generate one.
Social Links
Row of icon links for LinkedIn, Twitter/X, Facebook, Instagram, YouTube, and more. Add/remove platforms and choose default icon badges or official logo icons in the inspector.
Divider
Horizontal rule. Customise colour, thickness, and width.
Spacer
Adds fixed vertical whitespace. Set height in pixels.
Text
Free-form rich text. Supports bold, italic, links, and variable substitution.
Tip
Use the Duplicate option on any block to quickly add a second phone number or a second text block without re-configuring from scratch.Info
Image, banner, and profile-card photo controls include an Upload button. Uploaded PNG, JPG, GIF, WebP, and SVG files are saved to SignatureHQ storage and inserted into the selected block automatically. Profile Card contact fields also include up/down controls so you can reorder phone, email, website, and other contact rows without recreating them. Social Links icon style includes Official logos for supported services while keeping the existing default badge styles available. Every block includes Position & Alignment controls for left, center, right, justify, and custom X/Y nudges in pixels or percent.Variables
Variables personalise one template for every employee. They use double-curly-brace syntax and are resolved from your synced Google Directory at deploy time.
| Variable | Source |
|---|---|
| {{firstName}} | Google Directory given name |
| {{lastName}} | Google Directory family name |
| {{fullName}} | Full display name |
| {{email}} | Primary Google Workspace email |
| {{title}} | Job title from Directory |
| {{department}} | Department from Directory |
| {{phone}} | Phone from Directory or user override |
| {{mobile}} | Mobile from user override |
| {{pronouns}} | Pronouns from the per-user Pronouns field |
| {{company.name}} | Organisation name in SignatureHQ settings |
| {{company.website}} | Website URL in settings |
| {{company.logoUrl}} | Logo URL in settings |
| {{company.address}} | Address in settings |
| {{photoUrl}} | Google profile photo |
| {{custom.linkedinUrl}} | Per-user LinkedIn URL |
| {{custom.youtubeUrl}} | Per-user YouTube URL |
| {{custom.pronouns}} | Per-user pronouns override |
| {{custom.*}} | Admin-set per-user custom field |
Info
The live preview in the builder shows your own real data so you can see exactly how the signature looks. At deploy time, each employee sees their own data. In Profile Card contact fields, use the Pronouns quick-add button or insert{{pronouns}}to pull from the user's saved Pronouns field.Container styles
Click the paint bucket icon in the toolbar to open the Signature Style panel. This wraps the entire signature in a styled outer container.
- Background — choose None, Solid colour, Gradient (two colours + angle slider), or Image (upload, Canva, or AI-generated)
- Border — width (px), style (solid/dashed/dotted), and colour
- Corner radius — rounded corners in pixels (0 = square)
- Padding — space around the content blocks (top/right/bottom/left in px)
Warning
Gmail clips signatures that are too wide. Keep total signature width under 600px including padding. Rounded corners display correctly in Gmail and Apple Mail but are ignored by some older Outlook versions.AI image generation — click Generate with AIin the background image picker, describe what you want (e.g. “subtle blue gradient with geometric pattern”), and Gemini creates a background image instantly.
Canva integration — if you have Canva connected (Settings → Integrations), click Design in Canva to open the Canva editor inline. Publish your design and it imports directly as the background image.
Saving your signature
Click Save in the top-right toolbar at any time. The button is enabled whenever there are unsaved changes. Once saved, the signature appears on the Signatures list page and can be assigned and deployed.
- Undo / Redo — use Ctrl+Z / Ctrl+Y (or Cmd+Z / Cmd+Shift+Z on Mac) to step through your edit history. The builder keeps up to 50 undo steps.
- Duplicate signature — from the Signatures list, click the … menu on any signature to duplicate it. Useful for creating department variants.
- Preview — the right-side preview panel updates in real time. Use the HTML tab to inspect the raw email-safe HTML.
Tip
Build one master signature, then duplicate it and adjust colours or logos to create department-specific variants without starting from scratch.