If the plain text signature populated via variable {$agentSignature} from the agent's profile settings (Edit profile > Signature) is not sufficient for you and you'd like to set up a more customized and stylized HTML signatures, you can access the Source mode of any email template to edit it using HTML and CSS code.
For instance, to include an agent's profile picture in the signature part of each ticket answer, you can use the {$agentAvatarUrl} variable. As this variable only returns the URL address of the image, you need to use the variable in HTML code for embedding an image, as shown below. Feel free to modify the code and CSS styles to suit your preferences.
<img src="{$agentAvatarUrl}" style="max-width:50px;max-height:50px;">
Utilizing the HTML and CSS code gives you the flexibility to design your email templates to match your company's requirements. We've prepared for you an example of a basic template with a stylized agent's signature. The template uses a table to display the agent's image on the left and the agent and company details on the right, see the example template and its code below.
Please note that it is recommended to have a HTML and CSS familiar employee/team member to setup your own custom templates, as we do not provide developing or debugging of custom email templates as a standard support service.
The editor also supports Smarty statements for dynamic templates. For more info refer to this article.
<p>
Dear customer,
</p>
<p>
{$message}
</p>
<p>
Best regards,
</p>
<table>
<tbody>
<tr>
<td rowspan="3">
<img src="{$agentAvatarUrl}" width="65" height="65">
</td>
<td style="height:20px;padding-left:10px;">
<strong>{$agentName}</strong>
</td>
</tr>
<tr>
<td style="height:20px;padding-left:10px;">
<i>{$agentSignature}</i>
</td>
</tr>
<tr>
<td style="height:20px;padding-left:10px;">
<span style="font-family:Verdana;">My Company Co.</span>
</td>
</tr>
</tbody>
</table>