How to insert HTML code to Outlook emails
June 9, 2013
Let’s say you are using Microsoft Outlook and you have to design & send a HTML email (for example, a HTML newsletter with some text & images). First of all, you will quickly learn that – if you design the email using Outlook or Word – the email source code will actually render badly on other email clients. This happens because Outlook is generating the email source code using mostly VML (Vector Markup Language) which is poorly supported by other email clients.
You will have to somehow import a clean HTML source code, to an Outlook email, in order to get it displayed correctly on most email client applications.
Outlook always alters imported HTML code, unless you use an OFT template file, a macro trick or Bells & Whistles for Outlook
To insert your own HTML email code, there are many articles on the web advising you to drag and drop the HTML file over Outlook or insert the HTML file using the “insert as text” feature. Well, they are simply wrong. You will soon discover that Outlook alters / converts your HTML code: there is no way to insert your own, clean HTML code to Outlook by simply doing a copy / paste or drag’n’drop operation.
Basically, to insert clean HTML code to an Outlook email, you have three solutions:
1. save your HTML file as an Outlook OFT email template, then pre-load your email with the OFT template (see this tutorial on how to create an Outlook OFT template from HTML );
2. use a macro script to load the HTML code directly to an Outlook email;
3. use Bells & Whistles for Outlook. it adds an “Insert HTML” button to your Outlook email editor, making it extremely easy for you to select a HTML file and insert its HTML code to your Outlook email.
How to insert clean HTML code to Outlook
Assuming you’ve downloaded Bells & Whistles (download link ), all you have to do is to open a new Outlook email, then go to the Bells menu and click on the big blue “Insert HTML” button and browse to select the HTML file that will be loaded in your email. That’s it!
If you don’t want to use the Bells & Whistles addin to insert HTML code, we will describe below a programmatic way to add your own HTML code to Outlook emails without having it altered by Outlook.
Make sure you are not using a trial-expired version of Office (Developer mode is disabled in expired Office trials). The following procedure was tested on Microsoft Outlook 2010 and 2013.
1. Enable the Outlook Developer mode by right clicking on the Outlook ribbon (menus area) -> choose Customize Ribbon -> mark / enable Developer ;
2. In the Developer tab, go to Macro Security -> enable “Notification for all macros” ;
3. In the Developer tab, click on Visual Basic -> Tools -> References -> enable “Microsoft WORD 15.0 Object Library” (don’t confuse it with “Microsoft Office 15.0 Object Library”). If you are using Office 2010, look for Word 14.0 (15.0 means Office 2013);
4. In the Developer Macros-> Macros menu, type a name for the new macro (for example, InsertHTMLFile) then click on Create;
5. In the Macro editor, copy & paste the following source code, between the Sub End Sub lines:
Dim insp As Inspector
Set insp = ActiveInspector
If insp.IsWordMail Then
Dim wordDoc As Word.Document
Set wordDoc = insp.WordEditor
wordDoc.Application.Selection.InsertFile "e:\test.html ". False, False, False
6. Replace “e:\test.html” with the actual path to the desired HTML file that you want to insert to the Outlook email message body. Make sure you use an absolute path to the HTML file (for example “C:\MyDocs\outlook-file.html” and not “MyDocs\outlook-file.html”);
7. Save the macro. Just in case, restart Outlook to activate the changes;
8. Create a new Outlook email, then go to the Developer tab -> Macros and select the newly created macro. It shall insert the non-altered HTML code to your Outlook email
While the above HTML insertion method is far from being a 2-clicks solution, it actually is the simplest method to insert non-altered, clean HTML code to Outlook emails. Although it surely is counter-productive to use this method on regular daily emails, it can be a helpful solution if you are sending an email newsletter through a mail merge add-in like Easy Mail Merge.
Outlook HTML limitations
Even if you insert your own HTML code to Outlook emails, Outlook will not render it properly unless you follow these simple guidelines:
1. all links and images must be linked as absolute URLs (using something like img src=”images/image1.png” will not work, you have to use an absolute URL like www.domain.com/images/image1.png);
2. do NOT load CSS styles from external CSS files – you have to use inline CSS. Here is a nice tool that can check & clean a HTML email file: http://premailer.dialect.ca/ ;
3. Make sure you use HTML tags & attributes that are actually supported by Outlook. Outlook is designed to support only a sub-set of HTML 4. so some HTML tags are simply ignored. These tags are not removed from your email code (they will display just fine on other email clients that support them), but Outlook skips them. Here is a list of ignored email HTML tags .
You can always use Bells & Whistles for Outlook to insert HTML files to Outlook emails with just a couple of clicks: