In this tutorial, we’ll be creating a custom HTML email template in Salesforce using a template from Postcards.
Prerequisites
- A Designmodo account
- A Salesforce account
- A text editor that can open HTML files
Video Version
Steps
1. Create an email template in Postcards and add Salesforce merge fields
The first thing we need is a Postcards template with Salesforce merge fields added to it. We want to add the merge fields in this step so we don’t have to edit the code later.
The tag we will be adding is the first name tag and it looks like this:
{!User.FirstName}
For more information about merge fields visit this link.
In the Postcards app, I’ve created a template that consists of a Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1. It looks like this:
We’ll be adding the first name merge field to the title of the Header.
Click the Header area and that’ll open up a side menu:
Click the “Title” subsection and then add the first name merge field to the text area.
Press “Done” in the top left corner of the side menu and now we have everything we need for our template.
Press the “Export” button in the top right corner of the app and then select “Download as zip.”
Make sure you have the “Host images online” option selected so you don’t have to manually upload the images yourself.
Download the zip and extract the index.html file into a folder you can work with. It should look something like this:
2. Create a custom email template in Salesforce
On your Salesforce dashboard, click the gear icon in the top right corner of the page and then select “Setup.”
On the next page, on the left side menu, click open the “Email” option and then select “Classic Email Templates.”
On the Classic Email Templates page, select “New Template.”
On the next page, select “Custom (without using Classic Letterhead)” and then press “Next.”
On the next page, fill out the form with the values you want to use.
Make sure you have the “Available For Use” option checked.
For encoding, select “Unicode (UTF-8).”
And then press “Next.”
The next page is where you’ll paste in the HTML code from the Postcards template.
Open your index.html file you downloaded from Postcards earlier in a text editor.
I’m using Visual Studio Code so my file looks like:
Copy everything in this file and paste it into the text editor on the Salesforce page and then press “Next.”
The next page will be where you can create a text only version of your email if the recipient cannot receive HTML emails. Once you have filled out this value, you can press “Save.”
At this point, your email template is ready to go!
3. Send yourself a test email
To send yourself a test email, press “Send Test and Verify Merge Fields.”
Then check “Send email preview to:” and add your email. Then press “Ok.”
I sent myself a test email and it looks like this:
What we covered
- How to create a Postcards template.
- How to add merge field values to the template.
- How to export a Postcards template.
- How to create a custom HTML email template in Salesforce using a Postcards template.