Skip to main content
All CollectionsCookbook
How do I add images to emails sent through Messages?
How do I add images to emails sent through Messages?

Add a photo or image to a Messages email.

James Dixon avatar
Written by James Dixon
Updated over 4 years ago

In order to add a photo or image to a Messages email, You're going to need to learn a little coding. Don't worry, I'm not an engineer either! I promise you can do this:) If you need help, just open a live chat and we can help you out.

Tips:

  • Click the "share" button and paste the link into a text document. You'll need this link in a few minutes.

  • Don't delete this file. If you delete the file, the image will not show up in peoples email.

Step 3: Click the </> button in the Messages tool bar to open the code editor.

Text Editor:

Code Editor:

If you look closely, you will see all the text you wrote surrounded by code.

Step 4: 

Place you cursor at the very beginning of the email, before the first <DIV>, hit enter twice to give yourself some room to work. Then, move your cursor back to the top of the editor.

Step 5: 

Copy and Paste the following string into the code editor.

<div style="text-align: center;"><img src="YOUR FILE VAULT LINK HERE" style="width:100px;"></div>


Step 6:
Replace YOUR FILE VAULT LINK GOES HERE with your full File Vault link (Step 1) including the https part. Also KEEP THE QUOTATION MARKS around the link.

Tip: Change the image size by increasing or decreasing the width from 100px. 

Tip: Before you send an email to your customers, send a test email to yourself and see how it looks on both desktop and mobile. 

Step 7:
Click </> button to preview the image in your text editor.

Code Editor:

Text Editor:

Add a Floating Image

If you want to add an image to the middle of your email, just add the code where you want it to show up. 

Example: 

I can add an image below the introduction "Hi Everyone," and wrap the text around it.

Float Left

<div><img src="https://s3.us-east-2.amazonaws.com/scout-client-files-prod/2/files/19e940ae-d888-40ba-b685-23bf515bbe15.jpg" style="width:100px; float: left; padding-right: 15px;">

Code Editor:

Text Editor:

For more advanced options, visit https://www.w3schools.com/html/html_images.asp

Did this answer your question?