1. Home
  2. Postcards
  3. Integrations
  4. How to Send a Postcards Email Template with Outlook Live

How to Send a Postcards Email Template with Outlook Live

Important Update! We’re introducing a new feature that allows you to send your email templates from Postcards directly to Outlook on both Mac and Windows.

We have released new email templates for Outlook.

Check out the video below for a detailed walkthrough.

Additionally, you can use our Outlook add-in to insert HTML email templates into Outlook.

 

Previous Tutorial Below

In this tutorial, we’ll be taking the HTML code from a Postcards template and adding it to an email in Outlook Live.

Prerequisites

  • A Designmodo account
  • An Outlook Live account
  • A text editor that can open HTML files

Video Version

Important Outlook Update! Replace the entire code; do not insert the code between <div></div>. Remove the div tags and paste the email template code.

See video below.

Steps

1. Create and export a Postcards template

The main thing we need is a Postcards template for the HTML code.

In the Postcards app, create a template. Mine looks like this:

How to Send a Postcards Email Template with Outlook Live

Next, we want to export this and use the HTML code that’s generated.

In the top right corner of the app, press “Export” and press “Download as zip”

There will be an option called “Host images online.” Make sure this option is checked. Your screen should look like this:

Host images online

Press “Download Zip” and extract the file into a folder. My folder looks like this:

Download Zip

If you open this file in your browser, you should see the Postcards template you just created.

Now, we have everything we need to add this template to an Outlook email.

2. Create a new draft and open the developer tools

Next, create a new draft and type anything in the body, highlight the text, right-click it, and press “inspect,” like this image.

Create a new draft and open the developer tools

That will open the developer tools where you can edit the code directly in the browser. Your screen should look something like this:

Open the developer tools

Now we need the code generated by the Postcards template to add into the dev tools.

Open the index.html file you just downloaded in a text editor. I’m using Notepad++ and it looks like this:

Open the index.html file

Highlight all the contents in the HTML file and copy it.

3. Edit the HTML contents in the developer tools using the generated HTML

Go back to Outlook and in the developer tools, right-click the highlighted HTML element that was opened when you pressed “Inspect” on the highlighted text and select “Edit as HTML”. Your screen should look like this:

Edit the HTML contents in the developer tools using the generated HTML

That will open up a text editor containing the contents of the HTML element containing the “anything” text.

HTML element

Highlight the “anything” text, not the outer HTML element, and replace that with the Postcards HTML template that you had copied. The dev tools should look like this now:

Highlight the “anything” text

Click anywhere outside of the textbox area to confirm the changes. Your screen should look like this now:

Click anywhere outside of the textbox area

You can now close the dev tools.

The “anything” text was replaced with the HTML code of the generated Postcards template. That inserts the email template in the body of your email.

Now you should have the Postcards template in an Outlook email!

You can send yourself a test email to see if the template sends as you expect.

What we covered

  1. How to export a Postcards template as an HTML file.
  2. How to open the developer tools and edit the code in an Outlook draft.
  3. How to add the Postcards generated HTML to the body of an Outlook draft.

 

Updated on May 17, 2024
Was this article helpful?

Related Articles