Email signatures can be a great marketing tool. However, I often run into people and business owners who struggle trying to get their HTML versions into Microsoft Outlook. The process to add the code to emails is a bit different. Below are two ways you can add them.
For this tutorial, I’m using Microsoft Office 365, but the procedures are very similar for Outlook 2016 and Outlook 2019. However, they will not work for Outlook.com.
The problem usually arises because people try to paste the HTML code that a developer or generator provided in the wrong place such as the message window area or Outlook’s Edit Signature box. Even though this is a rich text editor, it doesn’t provide a code button on the toolbar.
Why Use an HTML Signature
HTML signatures do offer many benefits. You can do more styling and layout options that work with your business branding. For example, it would be difficult to do a column or table layout in Outlook’s edit signature box.
In this instance, I have a 2 column layout with a company logo, clickable social media images, and a “Call to Action” (CTA) button to book a demo.
If you use any CTA buttons, you might want to add some parameters so you knew the booking lead came from the email signature. For example, you can do that in the HTML by adding the URL campaign parameters to the button.
If you go to many of the online signature generator tools, you can find business card image galleries where people created beautiful image signatures. Another good source of inspiration is Dribble.
Some HTML Considerations
The disadvantage of using HTML signatures is you can only use these if your Outlook message format type is HTML. It won’t work if you send plain text emails or rich text formats. In fact, you won’t even see the signature listed in the drop-down list. Outlook omits it.
Another issue is that these HTML signatures require you to put your CSS code in the .HTM file. Often times designers use tables and cells so the code can get pretty elaborate.
And you’ll want to verify any image such as a logo or social media icon is accessible from the internet and not locally stored on your computer.
Adding the Outlook HTML Signature
There are 2 ways you can add your signature file. The first is best if you plan to use it on a regular basis such as automatically adding the email signature to all new emails. With this method, it will show in your Signature drop-down list.
Before you start, I’d suggest making sure your HTML template file renders properly in the browser. If it doesn’t show correctly in a browser, it will most likely fail in an email. In the example below, I’ve used Google Chrome to open my .htm file.
You may have noticed that I referenced a .HTM file and not .HTML. It seems odd since we call them HTML signatures, but Microsoft Outlook will only render the .HTM file. If you load a .HTML file, you’ll never see the HTML email signature. Your web browser doesn’t care and will display either file.
- Rename your email signature file if needed. Outlook will use the portion before the .htm as the email signature name.
- Test your .htm file in a browser.
- From the File menu, select Options.
- From the Outlook Options dialog, click Mail.
- On the right side press CTRL and click the Signatures… button.
- Copy your .htm file into this folder.
- Make sure your Compose messages in this format: shows as HTML.
- Close the folder and return to Outlook Options.
- Click OK.
This will open the apps folder that contains your Microsoft Outlook signatures. Usually, it is the appdata\roaming\microsoft\signatures folder.
Your newly added HTML email signature should show in your Signature drop-down list. You should go to the Outlook’s Signatures and Stationery dialog and make sure you’ve assigned this to the proper account and if it should apply to new messages as well as replies and forwards.
Inserting a HTML File in an Email
Another approach some people take is to insert their HTML file directly into the email. This would be good for one-off scenarios. I wouldn’t want to do this process all the time because it requires more steps. The first process can automatically add them.
The benefit to this method is you can use it for almost any type of HTML file and not just email signatures. And that includes both .htm and .html file extensions. The downside is you have to add in a command that probably doesn’t show on your Quick Access bar.
The command is related to Attach File. Now, that command does exist on the Insert menu when you’re in Email. However, it doesn’t display some sub-commands. In particular, Insert as text.
- Open Microsoft Outlook.
- From the File menu, select Options.
- On the Outlook Options dialog, select Quick Access Toolbar.
- From the Choose commands from: drop-down, select All Commands.
- Scroll down the list and select Attach File…
- Click theAdd button. Your command will move to the right side.
- Click OK.
- Click the New email button.
- Click the Customize Quick Access Toolbar and check Attach file. You’re just checking that the sub-command is enabled.
- Write your new email.
- Move your cursor to the end of the email and click the paperclip button on the Quick Access Toolbar.
- The Insert File dialog opens. Navigate to the folder with your HTML email signature file.
- Choose your Outlook email signature file.
- Click the small triangle next to the Insert button.
- Select Insert as Text from the drop-down menu.
Your new HTML signature will be inserted into the email.
While using an HTML signature is a nice feature, try not to complicate things with your design unless you love HTML and CSS. To give an example, while the signature I created above may look great as 2 columns with images, it doesn’t work well for people viewing on a mobile phone. You always want to test these items before putting them into production. I’ve seen some HTML signatures with images that were quite big in file size which can also impact people on mobile devices.