I have a VisualForce Email Template, which includes the 'messaging:htmlEmailBody' decleration. When testing in the preview editor, the template renders the HTML as needed:
When the Email is sent to an email client (such as Google Mail), the Template renders as Text, and not HTML:
I am not sure what is missing. Please see below the VF Email Template code:
<messaging:emailTemplate subject="[Assignment] Case #{!relatedTo.CaseNumber}: {!relatedTo.Subject}" recipientType="User" relatedToType="Case">
<messaging:htmlEmailBody >
<html>
<style type="text/css">
body {font-family: arial; size: 12pt;}
div.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; background-color: #F8F8F8;}
</style>
<body>
<img src="https://my.salesforce.com/servlet/servlet.ImageServer?id=01561000001JYOm&oid=OBFUSCATED"/> <br/>
The following case was assigned to <b>{!relatedTo.Owner.Name}</b>:
<br />------------------------
<br />• Account: {!relatedTo.Account.Name}
<br />• Contact Name: {!relatedTo.Contact.Name}
<br />• Case status: {!relatedTo.Status}
<br />• Priority: {!relatedTo.Priority}
<br />• Link: https://my.salesforce.com/{!relatedTo.Id}
<br />• Case #: {!relatedTo.CaseNumber}
<br />• Reference ID #: {!relatedTo.Thread_Id__c}
<br />------------------------
<br />
<apex:outputPanel rendered="{!relatedTo.Last_Comment__c!=null}" >
<div class="card">
<b><u>Case Comments:</u></b><br />
<c:SortedCaseCommentsController caseId="{!relatedTo.Id}"/>
</div>
</apex:outputPanel>
<br />
<div class="card">
<b><u>Case Subject:</u></b><br /> {!relatedTo.Subject}
</div>
<br />
<div class="card">
<b><u>Case Description:</u></b><br />
<apex:outputField value="{!relatedTo.Description}" style="white-space:pre;"></apex:outputField>
</div>
<br />
<apex:outputPanel rendered="{!relatedTo.Last_Incoming_Email_Content__c!=null}" >
<br /><b><u>Case Last Incoming Email:</u></b><br />
<apex:outputField value="{!relatedTo.Last_Incoming_Email_Content__c}" style="white-space:pre;"></apex:outputField>
</apex:outputPanel>
</body>
</html>
</messaging:htmlEmailBody>
</messaging:emailTemplate>
Thank you, Ido.