Embedding Images in Standard Compensation Statements

[pmacgovern]

Overview

This process may be used to embed images into SuccessStore compensation/variable pay/combined statement templates without having to upload any images to FTP sites or worry about internal hosting. The most common use of this method is to embed digital signatures into statements.

Key to this process is a web page technology that provides a way to include data in-line in Web pages as if they were external resources. For more information, reference https://en.wikipedia.org/wiki/Data_URI_scheme

Restrictions

Please be aware that there are some restrictions to this process:

• Not supported at all on Internet Explorer versions prior to 8


• Different browsers have different size restrictions. IE, for example, has a limit of 32KB. Images should be below this limit to be safe

Process

There are four steps to this process:

1. Obtain suitable JPG or PNG image file


2. Convert image file to text using an external website


3. Copy converted image from external website


4. Paste converted result in Statement editor

This tutorial will assume that step 1 has been completed already.

Convert Image

There are several online resources that can encode images into “Base64”, which is the technical name of the text version of binary data. Recommended is https://www.base64-image.de/

base64-image.de

Either drag & drop your image into the space provided or click on the indicated button to upload your image. After a moment, you will see this:

Remember, try to keep the size under 32KB.

Copy Image

Click on the button “show code”. This screen pops up:

Right click on the image in the top left and choose “Copy Image” (different browsers may appear differently:

Paste Converted Image

Open the statement in Manage Statement Templates in Compensation Home:

Paste the image from the clipboard where it is required. Customers often want multiple signatories – maybe a different one per business unit, etc. If so, a new Text Section that appears only when a condition is met is appropriate:

Save the template and use it like normal – your image is embedded in the template itself and doesn’t need to be uploaded anywhere.

Logos

The process to embed logos is slightly different. In the “Copy Image” step above, rather than right-clicking on the image, instead click on the “copy to clipboard” item and copy that text into the editor.

Once copied, click on the pencil icon, choose “Use Custom Logo URL” and paste the resulting text:

Once saved, the new logo will appear: