Skip to main content

How to Retrieve the HTML Version of a Google Doc for Dynamically Editable Email Templates

  • 7 April 2021
  • 9 replies
  • 1985 views

One of the best ways to send automated emails in Zapier is using an email template. This template can be hardcoded HTML in a send email action step using a Zapier email app such as Gmail or Outlook.

However, having this email message hardcoded would be a pain to maintain since the Zap would have to be deactivated if a change to the template was required. Futhermore HTML isn’t user friendly. The person creating or editing the template would have to know how to write HTML code.

Wouldn’t it be easier if this template was a beautiful Google Doc instead of HTML?

But how do you get that Google Doc to spit out HTML when you need to send it as an HTML email? Here’s how.

The first step is to ensure the Google Doc has a publicly viewable URL by sharing it with at least “Anyone on the Internet with this link can view”.

 

 

Next copy the link. It should look like:

https://docs.google.com/document/d/1-P9leFZWlzw93Rq5M4Gmsa5UinOgRp6wj7tpP6k7tXA/edit?usp=sharing

Finally replace everything from and including the “edit?” onwards in the URL with “export?format=html”. It should look like this:

https://docs.google.com/document/d/1-P9leFZWlzw93Rq5M4Gmsa5UinOgRp6wj7tpP6k7tXA/export?format=html

After that you can just use a Webhooks by Zapier Get action step to retrieve the HTML in your Zap:

 

 

Here is what it will return:

 

 

Finally the “text” field containing the HTML can be mapped as the HTML message in your favorite email app, and you now have a dynamically editable Google Doc Email template.

9 replies

CraigNet3
Userlevel 4
Badge +4

@memetican Google Doc HTML will work most times if you use Gmail as the sending platform. If it doesn’t work you could try creating the email within Gmail itself and save it as a draft with a unique subject. This draft can then be retrieved in Zapier via a Gmail email subject search. From there you can map the HTML body as the new email body. You can even add tokens in the draft like {first_name} and replace them in the body using formatter or Javascript.

M
Userlevel 1

@CraigNet3 That’s a great approach, my client happens to use Google Workspace, so I tried email templates there on my first go. I hadn’t considered cloning a draft and then modifying it.

It turns out that Mailjet gives me excellent functionality for what I’m wanting to do, great templates support, and it makes it easy for me to integrated and embed my content from Zapier.

The one problem was getting clean HTML markup that wouldn’t cause the mail readers to melt down.

I found a slick workaround though.

It turns out that Zapier’s Formatter has both HTML to Markdown and Markdown to HTML conversion options. So I’m taking the Google Doc HTML, converting it to markdown, and then back to HTML.

It solved pretty much every problem I had with the HTML;

  • Removed the containing <HTML> document structure
  • Ditched any CSS, STYLE, or Scripts
  • Simplified elements to their purest SGML, e.g H1, P, LI

The end result is clean and gorgeous, with no explosive side effects.

Zapier for the win.

nicksimard
Userlevel 7
Badge +11

This is super cool, @CraigNet3! Thanks for sharing :)

As you say, the beauty of this method is that anyone is able to edit the Google Doc, without having to know how to use HTML. I can honestly say this isn’t something I’d come across or thought of before — kudos to you!

nicksimard
Userlevel 7
Badge +11

@CraigNet3 This would actually be a great thing to share in our newly-created Facebook group :) Looks like you may not be a member yet. If you use Facebook, please feel free to share the link to this post!

M
Userlevel 1

The second issue that I’m trying to resolve now, is to clean the HTML so that it’s mail-reader friendly, and to remove the HTML and HEAD parts so that I can embed it in a Mailjet email template.

Right now, some mail readers are completely choking on it.

My Google Doc contains this, where it can be easily edited by my client.

But the resulting HTML email as viewed in GMail is-

Totally illegible.

This happens because mail readers support a very limited style subset in HTML, and have strict rules, such as that the CSS must be embedded as STYLE elements.

In my situation, this is further compounded because I’m generating the emails from 2 separate Google docs, and embedding that content into an email template using Mailjet.

That means the finished email looks something like this;

<html>

Some Mailjet template content, like “welcome [bob]”

  <html> First google doc HTML, embedded as a full HTML document </html>

  <html> Second google doc HTML, embedded as a full HTML document </html>

</html>

Clearly… my wizardry is not appreciated by GMail.

I’m hoping you might know of a Zapier step I can use to scrub the HTML for use in emails?

Ideally, I want to take the Google Doc HTML, and scrub it down to just the <BODY> contents, with the CSS converted to STYLEs at the element level.

That, I can embed safely.

My only alternative might be to force my clients to use Markdown in the google doc, and then extract that as text, and then convert it to simple HTML using the Zapier Formatter.

Not ideal for my clients, but they’re smart doctors, they can learn markdown if they must.

Would love to hear any other ideas you have.

CraigNet3
Userlevel 4
Badge +4

@memetican Nice!

M
Badge

If I want the email I am creating to contain information / data from other zaps, how do I include these in the google doc version? Or do I just have to add them into the HTML once back inside zapier? 

 

 

CraigNet3
Userlevel 4
Badge +4

@mike999302 I typically put tokens in the HTML such as “{first_name}” which I replace using Javascript code prior to mapping the HTML in Gmail or Outlook. If you aren’t proficient with coding, you can use a Formatter by Zapier step to replace your tokens with the data from a previous step. Example if the text of the email says:

“Hi {first name}, thanks for contacting us.”

I would replace the token “{first name}” with “Craig” using code (or Formatter by Zapier) which will become:

“Hi Craig, thanks for contacting us.”

This replacement step would be done prior to the Outlook/Gmail email sending step with the result mapped as the message. If you have multiple tokens to replace you can add multiple formatter steps for each token.

M
Userlevel 1

@CraigNet3 this is great, and exactly what I’m working on today. I came across your message as a result of searching for formatting options.

I have a note to add to your post, which might be important for anyone experiencing problems with the GET Webhook.

In Webhooks, there are some deep design “features” (bugs) that cause the Webhook to behave unpredictably when the URL contains querystring components. I spent the last few days debugging this with Zapier support.

The common failure scenarios I’ve seen are-

  1. Zapier returning the wrong document contents. This happens most often if you are performing several GETs in the same Zap.
  1. Zapier returning a Bad Request (500) error, even though the URL is correct, and you can access it directly in a browser.

The solution to this is to deconstruct the URL, and to specify those querystring components in the Query String Params section of the Webhook config.

I use a slightly different URL format, which is the one returned from a Google Drive “Find Files” zap;

URL = https://docs.google.com/feeds/download/documents/export/Export

Then your Query String Params are -

id = [ your google doc id ]

exportFormat = html

For me splitting out the querystring elements resolved all issues.

As to why this is happening- my guess is that it’s a caching problem, related to how Zapier ID’s and caches Webhook responses.

Reply


Terms & Conditions