HTML Images for Outbound E-mails
My client had the requirement for the forms used in their interaction center form to contain signatures with images and links to other online content.
On GoogleDrive or Microsoft OneDrive, or some internal corporate server you can store the images that you will use in the e-mail messages. GoogleDrive was our source. I stored all of the clients images on a google drive account that I created and affiliated with my client.them.
You can upload and share basically any image you want (be aware of copy write infringement). When you save and share the file you are given a link like:
Highlighted above is the unique key that identifies the image on the web. This can be combined with some html that will allow the message to download the images once it arrives in the customer’s inbox. So changing the code above we get.
The text “uc?export=download” is basic HTML that tells the e-mail system to download the image. I like to combine my images with hyperlinks to direct traffic to client’s websites. So ultimately you get something like:
<a href=”http://www.google.com“><img src=”http://drive.google.com/uc?export=download&id=KUVjdBaG9aVjk5c1E“></a>
The <a href=” is where you define a hyperlink – the website you want to direct traffic to like Twitter or Facebook. This is followed by the image source on google drive. The HTML is concluded with the </a> tag which closes the hyperlink.
Once displayed in a web browser or the customers inbox, it should look like a blog image and hyperlink to google.com.