Embed Static Images Using Code

To embed static images, like a company logo, in your documents, you can use an image tag similar to the following in your S-Docs template source.

This may be the simplest approach if you are emailing HTML content or wish to embed an image pixel for email tracking. However, keep in mind that if this image is not stored in your Salesforce org or if the host server is not under your control, the linked image may change and therefore is not guaranteed to work.

Embed Static Images That Are Stored As Salesforce Documents

You can also embed images that are stored as Salesforce documents. 1. Use the Add Image button on the template editor toolbar to open a menu for adding images into S-Docs. 2. Click Browse Server to search and add the desired image from your Salesforce documents folder.

Embedding Static Images (0)

If you intend to send a document externally that requires access to the image at view-time (e.g. HTML S-Doc), be sure that the Salesforce document record, which contains the image, is set for public visibility and copy the image's full URL: 1. Check the Externally Available Image box to make the image visible on the public internet. 2. Right click the image itself and copy its full URL. In Google Chrome, you would right click the image and click Copy image address. In Firefox, you would right click the image and click Copy image location. In Internet Explorer, you would right click the image and click Properties, and then copy the URL from the "Address (URL)" field in the following pop-up window.

Embedding Static Images (2)

You can now add this image into your template by clicking the Add Image button icon in the template editor and pasting the URL you copied into the URL field of the"Image Properties" window.

Embedding Static Images (3)

Embed Static Images In DOC Templates

For DOC templates, in order to ensure that your images are scaled correctly in the final generated document, it is important to check Ms Embed Images in the Page Settings tab of the template editor.

Additionally, the image source should be in this format (using the style attribute):
Rather than this format:

Note the difference in the height and width. If you use the second example, the images will show up as tiny squares in the generated document.
Finally, the user must click Enable Editing in Microsoft Word for images to download in the generated document.

Note: For images that you need to have externally available, note that the Browse Server button will use the local path rather than the full path, and your image will not be available externally (even if Externally Available Image is checked).
If you want this image to be visible externally (such as including it in an email sent to your customers), you must append the base URL to the beginning of the local path in the source code; e.g. if the Browse Server button uses this path: /servlet/servlet.ImageServer?id=01536000001T3ZE&id=00D36000000v29C&lastMod=147065920900), you must add https://na30.salesforce.com to the beginning to make the image externally available.

You can also forgo using the Browse Server button and use the full path from Classic view rather than the local path (e.g. use: https://na30.salesforce.com/servlet/servlet.ImageServer?id=01536000001T3ZE&oid=00D36000000v29C&lastMod=147065920900 rather than: /servlet/servlet.ImageServer?id=01536000001T3ZE&id=00D36000000v29C&lastMod=147065920900) when referencing the image in your S-Docs template. This is why we copied the image's full URL and pasted it into the "URL" field of the "Image Properties" window in the steps above.