How to insert HTML code to Outlook emails
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. So how do you insert HTML code to Outlook emails?
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:
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
End If
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:
The macro listed above gives me the visual basic runtime error 91 `object variable or with block variable not set` for line 3. I assume it needs error handling? I don’t know Visual basic well.
Hi,
great article but I don’t seem to get the code to work though. I keep getting the error 5273 “invalid path or file-name”. I’ve copied the path and file name, I’ve tried solutions above, nothing works. My file is on a server so my collegues have access to it as well, but I’ve tried putting it local. That doesn’t work either. I’m working in Outlook 2010.
Bells and Whistles is not an option, because we do not have permission to download and install ourselves.
Tried the option with stationary as well but my file doesn’t appear in the list of stationary.
Any ideas left?
Good article, but it doesn’t work in Outlook 2016. Still convert to Word. Do you know any way how to send clear HTML via Outlook 2016?
I so much needed this. I just learned how to edit htm files here: http://www.coreldraw.com/en/pages/htm-file/ and I needed to send them to a friend via e-mail but I couldn’t find anywhere how to do that. Thank you very much for solving my problem. I was getting desperate to find this
Can you explain how to enter the “absolute path for the HTML file” when using the macro method? I put the file in my C: root folder and changed it to “C: test.htm” (the name of the file) but I get the error “The document name or path is not value. ( )” when trying to run the macro. If I try to specify the path using either forward or backslashes, I get a compilation error.
If your test.htm file is located in the root of the C drive, the absolute path is C:test.htm
Make sure you have no spaces left in the path. Also make sure the file extension is correct (check if it’s htm or html).
The curly quotes in the example are breaking the macro. Just delete them in the macro and retype regular quotes (“) and it should work.
Steve,
I got the same issue, when i tried to save i would get an
the entire line of
wordDoc.Application.Selection.InsertFile “c:test.html”, , False, False, False
would turn red.. and would not run
this is what i did.. I edited the macro again.
changed “C:test.html” to just C:test.html (no quotes) tried to save, but errored, then i changed it to ‘C;test.hmlt’ (single quotes) try to save and the , , False, False, False at then end of that line turned green, then changed it back to “C:test.hml” (quotes) and was able to save with no red line
then was able to run it successfully in creating new email.
It seems strange but this method also worked for me. I changed the double quotes ” to single quotes ‘ and the false turned green. then I changed them back and altered the path to “C:UsersusernameDesktopinserthtml.htm” and now it works 🙂 Thanks a lot for this answer!
I think I’m having the same problem, but I can’t seem to fix it.
I get a Run-time error ‘6102’: Outlook encountered an error processing the XML file index Reference to undefined entity ‘nbsp’. Location: Line 1, Column: 5
The entire line is highlighted in yellow:
wordDoc.Application.Selection.InsertFile “C:\Users\t447996\index.html”, , False, False, False
I’ve tried all the tips above of deleting, replacing, etc. the quotation marks. Does anyone have any other advice?
Yes, you can also use this option, but Outlook will scan the HTML code of the attached file and it will alter it.
Hi, you can also use “Attach File” button in “Include” tab of new email window in Outlook 2013. In attachment window, select HTML content file you want to add to and just choose “Insert as Text” option under “Insert” button menu.
great article
[…] “copy embed code”) and insert it in your email. Here is a tutorial explaining how to insert HTML code to Outlook emails. However, even if you decide to spend time and insert a video HTML code to your email, the embedded […]
[…] In this article we will explain how to create and insert an Outlook template (an email theme for Outlook). Once you do it, you can automatically apply your template / theme to all Outlook emails that you’re composing. The below instructions describe the required steps to create & use the template file on Outlook 2013, but similar template building steps apply to earlier Outlook versions, too. First of all, you need to create the Outlook template in HTML. You can do so by using the Outlook email editor (simply create a new message, design its content and make sure its format is set to HTML) or by using any other HTML editor. If you are designing the Outlook template using an external HTML editor, please make sure that all images are linked using absolute URLs. Here is a complete tutorial to create and insert HTML files to Outlook emails. […]