Signature Hound’s built-in templates cover most use cases — but sometimes you need a signature that’s entirely your own.
Custom HTML templates give you full control over the design, layout, and logic of your team’s email signatures, while still letting Signature Hound handle the hard parts: user data, image hosting, and installation.
Whether you want to start from a blank canvas or turn an existing signature into a reusable template, Signature Hound now gives you both options.
In this guide, we’ll cover:
Signature Hound offers a library of pre-built signature layouts that you can customise with your branding, colours, and content. These cover the majority of use cases and are the fastest way to get a professional signature up and running.
A custom HTML template goes further. It’s a raw HTML file that you write (or export) yourself, with special Signature Hound template variables embedded in the markup. When a team member fills in their details in Signature Hound, those variables are replaced with their actual data — name, job title, phone number, profile photo, and more.
Custom templates are the right choice when:
When you click Add Custom Template in the Templates section of the Signature Editor, you’ll see two options:
Blank Template
Starts you with an empty HTML file. This is the right choice if you’re building a signature from scratch — for example, if your designer has handed you a coded HTML file, or if you want full control over every element from the start. You’ll add the Signature Hound template variables manually where you want user data to appear.
Export Current Signature
Takes the signature you’ve already built in Signature Hound and converts it into a custom HTML template. This is the fastest way to create a custom template — you get a fully working HTML file with all the template variables already in place, based on the layout you’ve already configured. From there, you can open the HTML in any code editor and make structural changes that aren’t possible through the standard editor.
Which should you choose?
Template variables are placeholders in your HTML that Signature Hound replaces with each user’s actual data when they fill in their signature. They use a double curly brace notation: {{variable}}.
Here’s the full list of supported variables:
{{name}} – User’s full name
{{job}} – Job title or role
{{department}} – Department
{{email}} – Email address
{{phone}} – Phone number (with spaces)
{{_phone}} – Phone number without spaces — use inside href=”tel:” links
{{mobile}} – Mobile number (with spaces)
{{_mobile}} – Mobile number without spaces — use inside href=”tel:” links
{{avatar}} – URL of the user’s uploaded profile image
{{schedulingLink}} – User’s scheduling link (e.g. Calendly URL)
{{schedulingTitle}} – Label displayed for the scheduling link
Important: If a variable is not included in your template, the corresponding input field will not appear when users edit their signature. This means you can keep the editing interface clean and only show fields that are relevant to your design.
Phone number links: Use the underscore-prefixed versions for clickable tel: links, so the number is formatted correctly:
<a href=”tel:{{_phone}}”>{{phone}}</a>
Profile images: To embed a user’s profile photo, use the {{avatar}} variable in an <img> tag and make sure the element has class=”avatar”. This ensures the circle crop preview works correctly in the editor:
<img src=”{{avatar}}” class=”avatar” alt=”” width=”100″ height=”100″ style=”display: block; border: 0; max-width: 100px;”>
Profile images are available on the Basic plan and above.
One of the most powerful features of custom templates is conditional logic. This lets you show or hide specific HTML elements depending on whether a user has filled in a particular field.
This is especially useful for optional fields like a mobile number or profile photo — if a user hasn’t provided one, you don’t want an empty gap or a broken image in their signature.
Showing an element only if a value exists:
Add a sh:if=”variable” attribute to any HTML element. That element (and everything inside it) will only render if the user has provided a value for that variable:
<tr sh:if=”avatar”>
<td>
<img src=”{{avatar}}” class=”avatar” alt=”” width=”100″ height=”100″ style=”display: block; border: 0; max-width: 100px;”>
</td>
</tr>
Showing an element only if a value is empty:
Use the negation operator sh:if=”!variable” to render an element only when the field is blank. This is useful for adding fallback spacing or placeholder content:
<tr sh:if=”!avatar”>
<td style=”padding: 40px 0px 0px;”></td>
</tr>
Conditional logic can be applied to any HTML element — table rows, divs, paragraphs, or entire sections of your signature.
Email HTML is notoriously inconsistent across clients. A signature that looks perfect in Gmail can render differently in Outlook, Apple Mail, or on mobile. Before rolling out a custom template to your whole team, thorough testing is essential.
Test within Signature Hound:
After uploading your custom template, fill in all the fields in the Signature Editor and use the live preview to check how it looks. Try it with and without optional fields (like a profile photo or mobile number) to make sure your conditional logic is working correctly.
Test across email clients:
Install your signature in each email client your team uses and send a test email to yourself. Pay particular attention to:
Use a dedicated email testing tool:
For thorough cross-client testing, a tool that lets you preview your signature across dozens of email clients and devices simultaneously. This is especially recommended if you’re supporting Classic Outlook, which uses Microsoft Word as its rendering engine and has the most limited CSS support.
Remember: Email HTML should use table-based layouts and inline CSS styles. Avoid external stylesheets, CSS classes and modern CSS properties like flexbox or grid — these are not supported in most email clients.
Custom HTML templates are available on all paid Signature Hound plans. If you’re already using a Signature Hound signature, the fastest way to get started is to export your current signature as a custom template and modify it from there.
If you need help getting your template right, our full documentation covers every variable and attribute in detail.
You’re viewing the Signature Hound Cookbook website on an outdated browser. Please upgrade for the full experience .