Signatures Note: This article is for embedding static images, or dynamic image URLS sent in your data payload. This article does not cover sending documents off to e-signing services like Adobe Sign, DocuSign, etc. For e-signatures services post document creation, see: e-Signatures Tag or Delivery Methods category.
Fillable PDF Note: When dealing with dynamic images, the process is somewhat unique for fillable PDFs. For specific documentation, visit: Embed Dynamic Images in Fillable PDF
And for more detailed documentation, refer to the additional articles:
- Embed Dynamic Images in the Document Builder
- Embed Dynamic Images in Office Documents
- Embed Dynamic Barcodes & QR Codes
- Embed Dynamic Charts/Graphs
- Embed Dynamic e-Signatures
Let’s begin. When developing your templates and email deliveries, there may be instances where you want to embed static or dynamic images into your content. Images can be photos, logos, signatures, charts, barcodes, etc. Extensions supported are: jpg, jpeg, png, and gif.
- Static images are images that remain the same regardless of your incoming data. They don’t change. An example of this may be your logo, present on every invoice you’re generating using DocuMerge. Or it might be an image of your signature, at the bottom of every contract.
- Dynamic images are images that will alter based on your incoming data. An example of this may be barcodes that update based on your products’ unique identifier IDs. Or a QR code that links to different product URLs. Or you might be swapping signature images based on the user generating the document.
EMBED STATIC IMAGES
To embed static images within your uploaded office templates or fillable PDF, see:
If instead, you are using the DocuMerge Template Builder or Email Delivery, you’ll either be working with the Code Editor or WYSISYG Editor, you can embed an image using the WYSIWYG add “Image” menu item.
When using the Code Editor, simply include your img tag, source, and dimensions where you wish to include the image. Then save.
- <img src=”http://www.yourdomain.com/images/my-logo.jpg” width=”300″ height=”300″ />
If using the WYSIWYG/Visual Editor:
- Load Your Template
Open the Document Builder template from your documents list, or find the email delivery of a document or route where you wish to add the image.
- Select Location and “Insert”
From within your Document Builder or Email template, select where within your template you want to embed your image. Then from the WYSIWYG Editor menu, select “Insert” -> “Image“.
- Add the Image
– Use “General” (left-side option) to add a publicly accessible URL to your image, and adjust dimensions in px as needed (pixels; see image below).
– Use “Upload” (left-side option) to add an image from your local computer. Once added, a public URL is created under the “General” tab, where you again can adjust your dimensions in px (pixels; see image below). - Review Dimensions
Review your image dimensions, and adjust as needed. If you’ve supplied a valid image/path from the step above, the default image dimensions should appear. Note: for the visual editor to display the image, dimensions must be set.
- Click “Save”
Click “Save“. Once your image is added, you can drag it to another location as needed, or set the image alignment with the WYSISYG alignment buttons. Right-clicking the image will present you with options to link the image, or revisit the image settings (alt description, dimensions).
EMBED DYNAMIC IMAGES
Adding dynamic images is more complex, and the methods to accomplish it will vary depending on whether you’re:
- using an Office Document template, a Fillable PDF, or the DocuMerge WYSIWYG/Code editor (Document Builder or Email delivery)
- inserting already existing images, or are inserting dynamically created images from an image-generator service (barcodes, qr codes, etc)
- providing full paths to images in payloads, or are providing partial paths/parameters to images/image generation
No matter your payload inputs, when embedding images, you’ll be providing a variable containing a complete URL in your document/template. Examples below describe varying payload inputs you might submit, and examples of code used in the different template types to output an image successfully.
If your payload consists of a string or object/array of full URLs to the images. Examples:
| “clientLogo”: | “https://site.com/image/logo.jpg” |
Code Editor
<img src="{$clientLogo}" width="75" height="50" />Office Document
{$clientLogo|insert_image:75:50}| “clientLogos”: | “https://site.com/img/logo1.jpg”, “https://site.com/img/logo2.jpg” |
Code Editor
{foreach from=$clientLogos item=_logo}<img src="{$_logo}" width="75" height="50" />{/foreach}Office Document
{foreach from=$clientLogos item=_logo}{$_logo|insert_image:75:50}{/foreach}| “clientLogos”: | “[{“imgURL”: “https://site.com/img/logo1.jpg”},{“imgURL”: “https://site.com/img/logo2.jpg”}]” |
Code Editor
{foreach from=$clientLogos item=_logo}<img src="{$_logo.imgURL}" width="75" height="50" />{/foreach}Office Document
{foreach from=$clientLogos|sort:"imgURL" item=_logo}{$_logo.imgURL|insert_image:75:50}{/foreach}
If your payload consists of a string or object/array of unique subdirectories, paths, or query parameters to build a URL. Examples:
| “userSignature”: | “sig-John.png” |
Code Editor
<img src="https://site.com/signature-images/{$userSignature}" width="200" height="50" />Office Document
{$_url_path = "https://site.com/signature-images/"}{$_url_path = $_url_path|cat:$userSignature}{$_url_path|insert_image:200:50}| “userSignatures”: | “sig-John.png”, “sig-Judy.png” |
Code Editor
{foreach from=$userSignatures item=_sig}<img src="https://site.com/signature-images/{$_sig}" width="200" height="50" />{/foreach}Office Document
{foreach from=$userSignatures item=_sig}{$_url_path = "https://site.com/signature-images/"}{$_url_path = $_url_path|cat:$_sig}{$_url_path|insert_image:200:50}{/foreach}| “userSignatures”: | “[{“imgName”: “sig-John.png”},{“imgName”: “sig-Judy.png”}]” |
Code Editor
{foreach from=$userSignatures item=_sig}<img src="https://site.com/signature-images/{$_sig.imgName}" width="75" height="50" />{/foreach}Office Document
{foreach from=$userSignatures|sort:"imgName" item=_sig}{$_url_path = "https://site.com/signature-images/"}{$_url_path = $_url_path|cat:$_sig.imgName}{$_url_path|insert_image:75:50}{/foreach}
If your payload consists of a string or object/array of unique identifiers (like a barcode ID) for which a 3rd party service will utilize to generate images. Examples:
| “barcodeID”: | “4156600000001” |
Code Editor
<img src="https://www.webarcode.com/barcode/image.php?code={$barcodeID}&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197" width="167" height="50" />Office Document
{$_url_path = "https://www.webarcode.com/barcode/image.php?code="}{$_url_path = $_url_path|cat:$barcodeID|cat:"&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197"}{$_url_path|insert_image:167:50}| “barcodeIDs”: | “4156600000001”, “4156600000002” |
Code Editor
{foreach from=$barcodeIDs item=_bcode}<img src="https://www.webarcode.com/barcode/image.php?code={$_bcode}&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197" width="167" height="50" />{/foreach}Office Document
{foreach from=$barcodeIDs item=_bcode}{$_url_path = "https://www.webarcode.com/barcode/image.php?code="}{$_url_path = $_url_path|cat:$_bcode|cat:"&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197"}{$_url_path|insert_image:167:50}{/foreach}| “barcodeIDs”: | “[{“id”: “4156600000001”},{“id”: “4156600000002”}]” |
Code Editor
{foreach from=$barcodeIDs item=_bcode}<img src="https://www.webarcode.com/barcode/image.php?code={$_bcode.id}&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197" width="167" height="50" />{/foreach}Office Document
{foreach from=$barcodeIDs|sort:"id":"desc" item=_bcode}{$_url_path = "https://www.webarcode.com/barcode/image.php?code="}{$_url_path = $_url_path|cat:$_bcode.id|cat:"&type=C128B&xres=1&height=50&width=167&font=3&output=png&style=197"}{$_url_path|insert_image:167:50}{/foreach}
Tips:
- You can use the insert_image Modifier in your WYSIWYG/Code Editor if you prefer that to HTML <img tags.
- If your image urls are in a string CSV format, considering creating an array out of it using the csv_to_array Modifier.
- Learn more about looping through arrays/objects here.
- If your images variable is a JSON string, learn how to convert it to a DocuMerge recognized object here.
Email Attachments Note: Keep in mind that your email provider (set in your SMPT settings) will typically have a limit to the total attachment size allowed. This limit would include all embedded images as well as any files you may be attaching in the delivery. If you’re using the default mail server (DocuMerge server), we support up to 24MB attachments. However, recipients of your emails may only support 15MB on incoming messages. Including attachments totaling greater than this may result in your emails being undeliverable.
Fillable PDF Note: When dealing with dynamic images, the process is somewhat unique for fillable PDFs. For specific documentation, visit: Embed Dynamic Images in Fillable PDF
And for more detailed documentation, refer to the additional articles: