Breadcrumbs

Make a Responsive Visualforce Email Template


Community Hub emails are built with a layout which fits well on any screen size. Most email systems (Gmail included) remove <head> and <style> tags from emails. As such, all CSS styles need to be inline, and to do this, an inliner tool is used.

  1. Create a custom email:

    1. Clone the ams-community repo locally. The packaged version of Community Hub includes the inline-ified emails and would be cumbersome to customize. The un-inlined version of the emails live in this repository in the src/emails_non_inlined folder.

    2. Find the email you're looking to customize i.e. "create_new_account.html" and open it in the source code editor of your choice.

    3. Make any modifications to this file including CSS rules, content, etc.

      1. The main body of the email can be found near the bottom, and looks like this.

        XML
        <h1>Nice to meet you, {!Receiving_User.FirstName}.</h1>
<p>You're now part of {!Community_Name}, which is a great start.</p>
<p>Click below to see what's next at {!Community_Name}.</p>
<table class="button">
  <tr>
    <td>
      <a href="{!Community_Url}">Get Started Now</a>
    </td>
  </tr>
</table>


      2. See the article titled Merge Fields for Communities for more details on the fields available to Communities email templates.

    4. Open the file in Chrome for easy previewing.

    5. Copy the contents of the text inside the file.

    6. Go to the MailChimp inliner tool, or the Zurb inliner tool, either will work.

    7. Copy the output of the inliner to your clipboard.

  2. Create a email template with the inlined content:

    1. From Setup, click Communication Templates | Email Templates.

    2. Click New Template.

    3. Choose the Custom (without using Letterhead) email type.

    4. Store the template in the folder of your choice, give it a logical name, make sure Available For Use is checked, and set the encoding to UTF-8.

    5. Click Next.

    6. Give the email a subject and paste in the output from the inliner tool.

    7. Click Next.

    8. Specify plaintext content.

    9. Click Save.