How to use an image in a personalization token

SOLVE
Highlighted
HubSpot Product Team
HubSpot Product Team

Have you ever wanted to add a unique, personalized image to your email without having to change your email for each contact? 

 

This can be quite easily achieved using a (tiny) bit of HTML finesse! 

 

TLDR: Simply create a contact property for your image url, upload an image url to your contact property then, within your email you simply need to add in a html image tag with the src: being your personalization token. 

 

STEP 1: Let's create a contact property to store our image url in. This is done within Contacts > Contact settings and then selecting "create a property" on the right. (https://knowledge.hubspot.com/contacts-user-guide-v2/how-to-create-contact-and-company-properties). We will be creating a single line text property. 

I'm going to call my property "contact image" but you can call it whatever you like. 

 

STEP 2: Create a marketing email (https://knowledge.hubspot.com/email-user-guide-v2/how-to-create-and-send-emails)

 

STEP 3: Find the html of our personalization token. You can do this by simply clicking into a rich text module selecting Insert > personalization token and inserting your token. If you then select the "source code" button from your text editor (the one that looks like this <>) you will see the code for your token. This will look something like {{contact.MYPROPERTYNAME}}

Since we called our property "contact image" this token will be {{contact.contact_image}}. 

htmltoken.pngThe HTML of your token

STEP 4: Now that we have the HTML for your token we can use this within a HTML image tag. While still in our source code editor, we can either copy this token html into a new image tag, or write one around it. (https://www.w3schools.com/tags/tag_img.asp) 

So, using our contact image token for example we can write an image tag like this: 

<img src="{{contact.contact_image}}"> 


imgtag.png

 

Basically what we have done here is set a HTML image. The "src=" is telling the html what the source url of the image is. As we are using our personalization token here. Whatever the property value for that contact is on the propert "contact image" will populate here and will be set as the source of our image. Which brings us nicely to-

 

STEP 5: Populate your property. You can do this through a csv, a workflow or manually. Any way you would like to populate the properties for your contacts. You can do this just like you can any other property. Instead of a regular piece of text however, we will be adding in a URL for our image. This can be an external image, or even an image hosted within your HubSpot file manager. For this article I'm simply going to manually add my url to my test contact property. I'm going to use a picture of Biff from back to the future as a reference here. So my image url is: 

https://cdn2.hubspot.net/hubfs/2231192/Biff/960.jpg

 

After I save this property value on my contact, I can go to test how my email will look for this contact. And Boom!imagetest.png

 

It's that simple! 

Have some cool uses for this? I'd love to hear! Let me know in the comments! 

 

 

1 Accepted solution

Accepted Solutions
HubSpot Product Team
HubSpot Product Team

Hey @joguirola you can do this by using the "set a contact property value" option within a workflow and populate it with the image of your choice: https://knowledge.hubspot.com/articles/kcs_article/contacts/how-can-i-change-a-contact-property-for-...

Reply
0 Upvotes
10 Replies 10
Community Manager

Thanks for sharing @Tom!

 

Hey @CalleMcCann I thought you might find this post useful, as you'd previously meniotned that you wanted to use company/custom logos in your email marketing Smiley Happy

Reply
0 Upvotes
New Member

Hi Tom!

 

Just a quick question. How do you populate the property you'll be using to store the image URL automatically through a Hubspot workflow?

Reply
0 Upvotes
HubSpot Product Team
HubSpot Product Team

Hey @joguirola you can do this by using the "set a contact property value" option within a workflow and populate it with the image of your choice: https://knowledge.hubspot.com/articles/kcs_article/contacts/how-can-i-change-a-contact-property-for-...

Reply
0 Upvotes
New Contributor

Any chance to generate those on the fly for each user, like some competitors do? Lemlist does it well:

 

https://blog.lemlist.com/personalized-images-to-get-more-replies/

 

(Feel free to delete link / mention if that's not OK.)

 

But would love to be able to do this in Hubspot!

Reply
0 Upvotes
HubSpot Product Team
HubSpot Product Team

Hey @Carl_Juneau  we don't have a tool to do this within HubSpot at the moment. There are a few things you could use to generate this however.

 

If you have a professional or enterprise subscription you could use workflows to automate population of these contact properties and thus the workflows. 

 

I haven't tested this out on my end, but if you have a form with a file upload field you should be able to use this file upload property as your personalization token and populate this image using that. 

Reply
0 Upvotes
New Member

I cannot get this to work. When I try to insert the img code and save, the code goes away. Please advise!

New Member

Anyone having issues with the source code not saving when you try and add

<img src="{{ contact.contact_image_url }}"> to the email? 

Reply
0 Upvotes
HubSpot Product Team
HubSpot Product Team

Just tested this on my end and it looks like this is no longer supported within the new drag and drop email editor! 

Reply
0 Upvotes
New Member

has this now been resolved?nuseful function that i would like to make use of

Reply
0 Upvotes
HubSpot Product Team
HubSpot Product Team

Hey @giles_atkinson  at the moment the drag and drop editor doesn't support img tags. This was never a feature but a quick "hack" I made some time ago, which can help do this from the old editor. 

 

As the new drag and drop editor doesn't support the custom HTML image tag this will not be supported. 

Reply
0 Upvotes