Adding Images To Email Templates

KISREC uses HTML when composing and sending email which allows the appearance of your email content to be fully customisable.

To add images to your email templates you should first upload them to your own web site/server. You will need the full URL to each image you want to include. The person that manages your website will be able to upload images and provide the URL information.

What is HTML ?

HTML stands for Hyper Text Markup Language and it is the standard markup language for creating Web pages. HTML consists of a series of elements which tell the browser how to display the content. In fact, this very article is using HTML to display and format the text you are reading right now.

To read more about HTML you can visit the w3schools.com website.

Navigate to Admin->Settings then select the Email Templates Tab.

The Admin Area is only accessible if your user account has been granted the Administrator permission.

The email template content can be edited and formatted using the available options on the editor toolbar just like you would if you were using a word processor application. The available options on the toolbar provide the most common formatting options.

To add an image we must first switch the editor to HTML mode, you can do this by pressing the [HTML Code] toggle button. Pressing the button again will switch the editor back to normal editing mode.

Switch the editor to HTML mode

Now the editor is in HTML mode you can directly edit the HTML code. This may look a little confusing if you have never seen HTML code before but don't worry, you don't need to be an expert coder to add an image element to this code.

I have reformatted the HTML code to show each HTML element line by line:

Hi [%CANDIDATE_NAME%]
<br>
<br>
<div>Thanks,</div>
<div>[%USER_NAME%]</div>
<div>[%USER_JOB_TITLE%]</div>
<div>[%USER_PHONE%]</div>
<div>[%AGENCY_NAME%]</div>
<div>[%AGENCY_PHONE%]</div>

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

Some example HTML elements:

<div>Some simple text</div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<b>This text is bold</b>
<font color="#ff0000">This text is red</font></div>

The Image HTML Element

The HTML tag is used to embed an image in a web page. Images are not technically inserted into a web page but instead the tag creates a holding space for the referenced image.

<img src="url" alt="alternatetext">

The <img> tag has two required attributes:

• src - specifies the URL to the image

• alt - specifies an alternate text for the image

Here is an example of an <img> element that references the KISREC logo image from the KISREC website.

<img src="https://app.kisrec.com/assets/imgs/logo/kisreclogo.png" alt="KISREC Logo">

To add your own images simply replace the src attribute with the URL to your own images.

We can then simply add this <img> HTML code to the email template:

Hi [%CANDIDATE_NAME%]
<br>
<br>
<div>Thanks,</div>
<div>[%USER_NAME%]</div>
<div>[%USER_JOB_TITLE%]</div>
<div>[%USER_PHONE%]</div>
<div>[%AGENCY_NAME%]</div>
<div>[%AGENCY_PHONE%]</div>
<img src="https://app.kisrec.com/assets/imgs/logo/kisreclogo.png" alt="KISREC Logo">

When we switch the editor back to normal mode we can see the image displayed at the bottom of the template.

Image Size

You can also add attributes to control the width and height of the image. The following will display the image 200 pixels in width by 50 pixels in height.

<img src="https://app.kisrec.com/assets/imgs/logo/kisreclogo.png" alt="" width="200" height="50">

Image Link

To use an image as a clickable link you can put the <img> tag inside the <a> tag.

The href attribute indicates the link destination URL or website address.

<a href="kisrec.com">
  <img src="https://app.kisrec.com/assets/imgs/logo/kisreclogo.png" alt="KISREC Logo">
</a>

That's it, you are now an HTML coder !

If you require any assistance then please do not hesitate to get in touch.