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. Image blocks and Profile Card photos also support frame masks such as round, square, rounded rectangle, rectangle, oval, and triangle; triangle is best-effort and may fall back to a rectangular image in stricter email clients. 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. Use a Layout Table block when you want custom columns, such as a Profile Card on the left and a logo or social links on the right; it renders as email-safe nested tables instead of CSS grid. The Layouts button includes ready-made 2-, 3-, and 4-column table layouts that you can apply and then customize like normal blocks. Blocks inside Layout Table columns include top, right, bottom, and left padding controls for fine-tuning spacing within each column.Layouts
Click Layouts in the builder toolbar to start from polished predefined structures, including 2-, 3-, and 4-column email-safe table layouts. Layout Table blocks can contain nested Text, Image, Profile Card, Divider, CTA, and Social Links blocks.
Tip
You can drag an existing top-level block from the preview into a Layout Table column. SignatureHQ moves the configured block into that cell so you do not have to recreate it.Image tools
Image blocks support uploaded assets, variable-based image URLs, manual URLs, frame masks, optional click-through links, and Canva design/import. Canva exports are saved to SignatureHQ storage and written directly into the selected Image block URL.
Warning
Keep image URLs public before deployment. Gmail cannot load private local URLs or data URLs from a deployed signature.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}} | First name from Directory or user override |
| {{lastName}} | Last name from Directory or user override |
| {{fullName}} | Display name from Directory or user override |
| {{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}} | Per-user uploaded photo override, then 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. Admins can also override a user's display name, first/last name, and photo from the Users page, upload a replacement image, and adjust the focal point used by Profile Card frames. Image blocks can also be designed in Canva and imported directly into the selected block.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 in background or Image block controls to open Canva. Publish your design and import it directly back into the selected asset field.
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.