Adding an Anchored Logo to Your HTML Email Template

A friend and fellow Salesforce Geek wanted to know how she could insert a company logo as the header in an HTML email template, such that when the user clicked on the logo, their browser would navigate to her company's website. I tried to describe it in email, but I suspect not very well. I promised her I'd blog about it ... so here we are.

Disclaimer: As with most things in Salesforce, there are a dozen different ways to get from Point A to Point B. This is certainly not the only approach, just the first that popped into mind.

Let's do it by the numbers. First, I created a quick logo image:

Host the Logo Image

Store the logo image in a location where it can be accessed over the internet. For this exercise, I'm going to store the image on the Salesforce servers, under the Documents tab:

1.) Click the Documents Tab.

2.) Click the "Create New Folder" link (we're going to create a new folder to store email images)

3.) In the Document Folder Label field, type "_Images". Click tab and set the other fields to their defaults. Save.

NOTE: The underscore "_" character in front of the word "Images" is intentional. Folders sort in alphabetical order, and this will push your Images folder down to the bottom of the folder list. That's my personal preference, so that my Image folders don't get mixed in with my "real documents" folders.

4.) Now that you're in the "_Images" folder, click "New Document".

5.) Enter the logo name, unique name, description, and browse to the path where the image is located. Because we will be including this image on an external email template, set the "Externally Available Image" checkbox.

Creating the Email HTML Template

Now that the logo image is "hosted" in a public location, create the email HTML Template:

6.) Click Setup -> Email templates. Specify the folder (or create a new one), and click "New Template".

7.) Select the "Custom (without using Letterhead)" option. Click "Next".

8.) Set the "Available for Use" checkbox, give your new email template a name and fill in the description field.

9.) This sample HTML code starts with an anchored logo, then continues with the "form letter" that recipients can read:


<a href="http://forcemonkey.blogspot.com">
<img src="https://na3.salesforce.com/servlet/servlet.ImageServer?id=01550000000Nqqc&oid=00D500000007zyA"/>
</a>
<br>
<br>
Dear {!Contact.FirstName} ,<br>
<br>
Check out our new logo! Interested in the latest tips and tricks? Click the logo in the top left corner, and it will take you to our website!<br>
<br>
Best Regards,<br>
<br>
From the Force Monkey Troop

Let's rewind a little bit, to explain the HTML code:

The anchor tag, which starts with a href="http://.../" creates a link to the target website, referenced in the href arguement. In this case, I used the URL for this blug (http://forcemonkey.blogspot.com). Substitute your own target website after the href arg.

The image that we're wrapping the anchors around is specified in the img src="https://na3.salesforce..." tag. But what is that crazy long string after the "src" arg? That's the location where the image is stored on Salesforce servers.

To get this URL information for the logo you stored, do this (assumes you're on a PC):

1.) Click on the Documents tab

2.) Select your Logo image "document"

3.) Right click on the image. Click "Properties".



Copy the "Address URL" field to your text buffer. Be sure to capture the entire field, by holding the left mouse button down as you click from the left of the "https:" and drag the cursor downward until all characters of the field are highlighted. Press CTRL-C to copy to your text buffer.

4.) Open your email HTML template and press CTRL-V to paste it in the "src" arg of the img HTML tag.

Add the remaining HTML text for your email template, as necessary. Viola!

If the steps here are still just a little confusing, let me know -- I'll post a video blog of the whole process.