Please note that CSIO does not offer support for creating HTML templates. The following document is all you should need to start putting together your templates.

Also note that if you are using a custom template, you will need to set both a French and English template. Updates in one template will not be automatically reflected in the other language's template.

Below are the elements which can be used in an HTML template:

Terms of Use and eSlips

If you are customizing your eSlips and Documents template, you must use the {{eslip.vehicles}} tag. If you are customizing your Documents Only template, use the {{doc.termsOfUse}} tag. Find the explanations below. As well, find the breakdown of elements within each tag, and the corresponding CSS classes of each element.

CSS Classes that can be styled within each template's Terms of Service:

{{eslip.vehicles}}

class="eslip-terms-of-use-table" in <table>
class="eslip-terms-of-use-row" in <tr>
class="eslip-terms-of-use-col" in <td>
class="eslip-terms-of-use-header" in <p>
class="eslip-terms-of-use-text" in <p>
class="eslip-accept-terms-header" in <p>
class="eslip-accept-terms-text" in <p>
class="eslip-android-text" in <p>
class="eslip-apple-text" in <p>
class="eslip-vehicle" in <div>

See below for the {{eslip.vehicles}} code-block:

 <table cellpadding="0" cellspacing="0" border="0" class="eslip-terms-of-use-table">
    <tr class="eslip-terms-of-use-row">
        <td class="eslip-terms-of-use-col">
            <p class="eslip-terms-of-use-header">${this.emailTemplate.termsOfUseHeaders[this.language]}</p>
            <p class="eslip-terms-of-use-text">${this.emailTemplate.termsOfUseTexts[this.language]}</p>
            <p class="eslip-accept-terms-header">${this.emailTemplate.acceptTerms[this.language]}</p>
            <p class="eslip-accept-terms-text">${this.emailTemplate.secondMessage[this.language]}}</p>
            <p class="eslip-android-text">${this.emailTemplate.androidString[this.language]}</p>
            <p class="eslip-apple-text">${this.emailTemplate.appleString[this.language]}</p>
            <div class="eslip-vehicle">
		        <table align="center" cellpadding="0" cellspacing="0" border="0" style="width: 360px; margin-bottom: 5px">
					<tr>
						<td style="height: 70px; min-height: 70px; padding: 10px 15px; text-align: center; text-transform: uppercase; vertical-align: middle; max-width: 330px; word-wrap: break-word;">
							<span style="font-size: 18px;">${vehicle.year} ${vehicle.make} ${vehicle.model}</span> <br/>
							<span style="font-size: 14px;">${vehicle.vinNumber}<br/></span>
							<a style="text-decoration: none; href="${vehicle.PkpassUrl}">
								<img src="${this.displayButtonLogo[this.language]}" alt="${emailTemplate.buttonTexts[this.language]}" width="150" style="height:auto !important; max-height: 90px !important; width: auto !important; max-width: 150px !important; text-align: center !important;"/>
							</a>
						</td>
					</tr>
				</table>
            </div>
        </td>
    </tr>
</table>

{{doc.termsOfUse}}

class="doc-terms-of-use-table" in <table>
class="doc-terms-of-use-row" in <tr>
class="doc-terms-of-use-col" in <td>
class="doc-terms-of-use-header" in <p>
class="doc-terms-of-use-text" in <p>
class="doc-accept-terms-header" in <p>

See below for the {{doc.termsOfUse}} code-block:

<table cellpadding="0" cellspacing="0" border="0" class="doc-terms-of-use-table">
    <tr class="doc-terms-of-use-row">
        <td class="doc-terms-of-use-col">
            <p class="doc-terms-of-use-header">Terms of Use</p>
            <p class="doc-terms-of-use-text">You have selected to receive your insurance documents digitally. If
                        you choose to print the PDF file of your insurance documents, we recommend they are printed on
                        white paper, and clearly legible. If your documents contain a liability card for automobile
                        insurance, depending on your province/territory you may be required to carry a paper copy of
                        your proof of insurance. Please contact your insurance provider for all matters related to your
                        insurance policy, documents and coverage. By accepting digital documents you are agreeing to the
                        Terms of Use.</p>
            <p class="doc-accept-terms-header">I agree to the Terms of Use.</p>
            <p class="doc-accept-terms-text"></p>
        </td>
    </tr>
</table>

Sample HTML Documents