Here’s how we created a professional email signature for our client’s customer service communications using HTML.
Our client, Zyfe, needed a way to keep track of customer service emails for their brand, and maintain a consistent aesthetic throughout all emails. We set up email forwarding from their email domain to their HubSpot inbox and built a custom email signature using HTML.
Once we connected our client’s email account to HubSpot, set the From name to Zyfe and From address to hello@zyfesoap.com, and set up email forwarding from their hosted email account, it was time to customize the customer service team's email signature.
Your HubSpot team's email signature can be set by first navigating to HubSpot Settings > Tools > Inbox > Inboxes. Then, under Channels, hover over your hosted email, and click Edit. Scroll down the page and you'll find a place to edit your Team Signature. Users can choose between a Simple and an HTML signature. If you want to use our template, be sure to select HTML.
This is how the final product looks:
We'll go over the basics of how this signature is set up.
The format is created using HTML table formatting. Each line of the signature block is split into a horizontal row. The first line sets the formatting for the table as a whole.
<table style="text-align: left; width: 500px"> |
 |
Then, the first row, containing the heading with the CEO's name on the left, and the company phone number on the right, is set up. First, the CEO's name is formatted:
<tbody><tr style="height: 35px; vertical-align: middle"> |
 |
After that, the phone icon and number are set up. The phone icon image URL is pulling from our client's HubSpot portal. The portal ID number has been changed.
<th> |
 |
To link to an image in your HubSpot portal, the link is as follows:
https://[Portal ID here].fs1.hubspotusercontent-na1.net/hubfs/[Portal ID here]/[image file name here].[image file format here]
That's the gist. Below is the full template; feel free to copy and paste it into your portal and fill in your information. The only other thing you'll need to worry about is downloading iconography.
<table style="text-align: left; width: 500px">
<!---Row 1---------------------------------------------------->
<tbody><tr style="height: 35px; vertical-align: middle">
<td style="vertical-align: bottom;">
<h1 style="margin: 0">Your Name Here</h1>
</td>
<th>
<a href="tel:yourphonenumberhere">
<img style="width:35px; height:35px;" src="img link here" alt="">
</a>
</th>
<th style="padding-left: 20px">
<p>Your phone number here</p>
</th>
</tr>
<!---Row 2---------------------------------------------------->
<tr style="height: 35px; vertical-align: middle">
<th>
<h2 style="margin: 0">CEO</h2>
</th>
<th>
<a href="mailto:your email here">
<img style="width:35px; height:35px;" src="img link here" alt="">
</a>
</th>
<th style="padding-left: 20px">
<p>your email here</p>
</th>
</tr>
<!---Row 3---------------------------------------------------->
<tr style="height: 35px;">
<th>
</th>
<th>
<a href="Location link here">
<img style="width:35px; height:35px;" src="img link here" alt="">
</a>
</th>
<th style="padding-left: 20px">
<p>Location here</p>
</th>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td>
<a href="Facebook page link here">
<img style="width:35px; height:35px;" src="Facebook icon link here" alt="">
</a>
</td>
<td>
<a href="Instagram page link here">
<img style="width:35px; height:35px;" src="Instagram icon link here" alt="">
</a>
</td>
<td>
<a href="YouTube link here">
<img style="width:35px; height:35px;" src="YouTube icon link here" alt="">
</a>
</td>
<td>
<a href="Amazon link here">
<img style="width:35px; height:35px;" src="Amazon icon link here" alt="">
</a>
</td>
</tr>
</tbody></table>