Body
Learn how to add images to notification templates
Getting Started
This article will offer tips and tricks for adding image URLs specific to the customizable notification template style below. Note the Related KB article on the right-hand side as well.
Assumption
You are a TeamDynamix Application Admin for your client portal.
Steps
Navigate to the Response Templates on the Admin Ticketing Application page.
Select the Notification Template you want to work on and find the Header and Footer sections to update.
**HINT: You can monitor your progress by clicking the Show Preview button to see how it looks or if there are any errors at the top of this page.
To Configure the Header, the expected image outcome is below the code (minus the black box).
<!-- ⇓ EMAIL HEADER ⇓ -->
<tr>
<td id="header-banner" style="padding: 0;text-align: center; margin: auto; ">
<img
style="max-height: 120px; object-fit: cover; width: 97%; border-radius: 12px;" alt=" Banner: Elevating learning through technology excellence, a seamless college experience!"
src="https://help.vccs.edu/TDPortal/Images/Viewer?fileName=b20562a5-53f6-4779-bf34-d2665dada513.png&beidInt=96"
/>
</td></tr>
<tr><td id="header-logo" style="padding: 1%;text-align: center; margin: auto;">
<h1 style="margin: auto;">Information Technology<br />SERVICES</h1>
</td></tr>
To Configure the Footer, the expected image outcome is below the code (minus the black box).
<!-- ⇓ EMAIL FOOTER ⇓ -->
<tr>
<td id="logo" style="text-align: center; margin: auto; max-width: 600px; min-width: 330px; padding-top: 16px;padding-bottom:16px;">
<img src="https://help.vccs.edu/TDPortal/Images/Viewer?fileName=c6c2f0fb-ffa5-458a-a746-afddbe9b4111.jpg&beidInt=96" style="object-fit: contain; width: 80%; max-width: 325px; min-width: 100px; border-radius: 12px; box-shadow: 0 0 7px 15px #fff;" alt="VCCS Logo for Information Technology Services" />
</td></tr>
<!-- ⇑ EMAIL FOOTER ⇑ -->
