Home | Dynamic Content | Inserting Images via FreeMarker in the ClickDimensions New Drag and Drop Email Editor

Inserting Images via FreeMarker in the ClickDimensions New Drag and Drop Email Editor

One of the many great features in the ClickDimensions new drag and drop email editor is an HTML block. In this block, you can insert your own HTML code to customize your drag and drop emails like never before. So, you get the best of both worlds – the ease of a drag and drop editor with the flexibility of HTML.

The HTML block has a lot of potential uses, but one of the best ones is inserting images dynamically. This can be achieved by leveraging FreeMarker, the syntax used to pull in dynamic personalization for each recipient on your email send. While FreeMarker is compatible with the original drag and drop editor, this particular method could not be used in that editor because it requires editing the HTML of the template. The new drag and drop editor gives you that possibility, so you can pull in images from certain records.

Note: See FreeMarker restrictions here.

One use case for this is to introduce your staff to the contacts and leads they work with. If your business assigns record owners based on projects, you could send an introductory email with the record owner’s headshot and contact information to each contact or lead that was assigned to him or her.

The first step here is to add images to each of your user records in CRM. You can add the Photo URL field to the user entity form. When adding your URLs, remember that this must link to the raw image source file.


Note: If you need somewhere to host your images, you can use the ClickDimensions image manager. To get to the image manager, open an email with an editor type of drag and drop, new drag and drop or freestyle. Click on the Image icon. Upload your image, right click and select Copy Image Address. If you now paste this into a new tab in your browser, you will be able to copy that URL from the web browser and insert it into your Photo URL field.

Once you have your image URLs inserted, you can call up those images in your email template by using FreeMarker in an HTML block. In a new drag and drop editor, drag an HTML block onto the canvas. Click to open the block. Add an HTML image via <img src=”URL”>. For your URL, that’s where you will put the FreeMarker code. Note that the quotes there are two single quotes in order to avoid prematurely closing out the tag.

You may also want to ensure this image stays in line with the rest of your email size-wise, so adding a height and/or width attribute to your code is not a bad idea. Remember that templates in the drag and drop editors are 600 px wide, which is a standard email size.

You can also add other FreeMarker data from the owner record here as well. Some clever ideas would be name, primary email, phone number, etc.

Once you send out your email, the recipient will receive a nice, personalized introduction from their project manager or record owner.

Another exciting use case for this would be product emails. This would take a little more customization, but if you have a custom entity in which each of your products has a separate record, you could add a photo URL for each product. Then, using a lookup field on the contact or lead record, you could associate the products with contacts or leads that expressed interest in those products. If the relationship is made in a lookup field, you could send out a dynamic email to each of your contacts or leads with information on the product they are most likely to purchase, complete with an image.

Happy Marketing!

About the Author:

mm
Emily Clever is a ClickDimensions Product Consultant.

Leave A Comment