KBA-01586: Embedding Images (Signatures, Logos) in HTML fields

Questions:

1. How do I embed an image into the HTML editor in Chrome?
2. How do I get an image into the Signature field on the Connections tab of my Contact?
3. Why do I get a little red box in Microsoft Word instead of the image I pasted into the HTML editor?
4. Pasting my logo into Company | Site Logo doesn’t work, what do I do now?

Answer:

Internet Explorer usually does these steps for you automatically, but with certain network connection and devices the images are not stored in an Internet-friendly fashion. Here‘s how to do that manually:

1. Open NotePad and type or paste the following.  The height can be different or changed later.

   <img height = "50px" src='' />

2. Visit a base64 helper site such as  https://www.base64-image.de.
3. Drag your image onto the box or use the ‘Click Here‘ button to upload your GIF, PNG, or JPG.
   1. Click the Show Code button
   2. Use the copy to clipboard button to copy all the text for use in <img> elements.
4. Return to NotePad.
   1. Position the cursor in between the quote marks in notepad.
   2. Paste the base64 data.
   3. Press CTRL+A then CTR+C to copy everything from NotePad.
5. In the sfPMS HTML editor,
   1. Switch to HTML view (tab at bottom).
   2. Paste the IMG tag from your clipboard.  [Note: if the characters shown below appear right after what you type, ignore them. They may come back even after you delete them.]
      
   3. Switch back to DESIGN view. Your image should appear.
   4. Save.
   5. Test to see if you need to adjust the size of the image.

There are other sites that will do the image to base64 conversions.

• http://base64online.org/encode/ – similar to above, but must select the file and check the ‘format as data url check box.

KBA-01586; Last updated: January 20, 2022 at 8:50 am
Keywords:  base64; signature images, contact signature; add logo