Behaviour between GmaiApp.sendEmail and GmailApp.createDraft

[Darren Ball]

I have a template, quite large that I am testing with.   When I send the email using 

GmailApp.sendMail - the message is delivered and the inline html is fine (works as expected, styling intact).

When I save the exactly same html message as a draft - no formatting is applied (CSS style).

Has anyone encountered this?  I am curious as to what needs to be adjusted to ensure the draft appears as the sent message.

For example below, these messages do not appear the same.  
The sent message is fine and appears correct.  The draft seems to not adhere to the style sheet which is inline in <style> blocks.

function testSend() {

const temp = HtmlService.createTemplateFromFile('test2');

GmailApp.sendEmail('us...@example.com','Newsletter', 'This is the text version of the email',{htmlBody: temp.evaluate().getContent()});

GmailApp.createDraft('us...@example.com','Newsletter', 'This is the text version of the email', {htmlBody : temp.evaluate().getContent()});

}

Anyone that might have insight on why this happens, let me know!

Thanks,
Darren

[Darren Ball]

I should qualify this.  When looking at the draft in the email console - the content is not styled.   In this instance I am saving the draft to manually send.

When I retrieve the draft and get the message body, it is the same html that I want sent.   Just in the console and if I manually send this draft it is not formatted.

[Darren Ball]

I have discovered that if I retrieve the draft programmatically and send it, the formatting is fine.

This is only when I view the draft in the console and send it from there.  All formatting is lost.

Seems a Gmail drafts issue?  Very weird.

[Fabrice Faucheux]

Hello Darren,

It seems you’re encountering a difference in how Gmail handles sent emails versus drafts, particularly regarding inline styles. Here’s why this might be happening and some steps you can take to resolve it.

Issue Explanation:

When you send an email with GmailApp.sendEmail(), Gmail applies the HTML and inline CSS as expected because it’s processing the content to render for recipients. However, when you save the same content as a draft with GmailApp.createDraft(), Gmail sometimes doesn’t fully apply the inline CSS in the draft mode, possibly due to the way it previews draft content versus rendering the final sent email.

Possible Causes:

1. Draft Rendering: Gmail might not apply inline <style> blocks or external CSS as consistently in the draft preview as it does in the final sent email. This is common with email clients, which often treat draft rendering differently.

2. CSS Support in Drafts: Some advanced CSS might not be fully supported when viewing the draft. This includes media queries, certain selectors, and properties that Gmail may strip out in drafts but apply correctly in sent emails.

Solutions:

1. Move Inline Styles into Style Attributes:

Instead of using <style> blocks for inline CSS, apply styles directly to the HTML elements using style attributes. For example:

<div style="color: #333; font-size: 14px;">Content</div>

Gmail drafts tend to respect inline styles more reliably than <style> blocks.

2. Use a CSS Inliner Tool:

Use a CSS inliner tool to convert your <style> blocks into inline styles automatically. This is a best practice for email design to ensure compatibility across various email clients. You can use tools like Juice or any online CSS inliner. Here’s an example of how you can inline CSS:

const inlineCss = HtmlService.createHtmlOutputFromFile('test2').getContent();

const inlinedHtml = juice(inlineCss); // Juice inlines the CSS

GmailApp.sendEmail('us...@example.com','Newsletter', 'This is the text version of the email',{htmlBody: inlinedHtml});

GmailApp.createDraft('us...@example.com','Newsletter', 'This is the text version of the email', {htmlBody : inlinedHtml});

3. Use Email-Ready HTML:

Ensure the HTML template is using “email-safe” HTML and CSS. Avoid advanced CSS properties or external stylesheets that Gmail may strip in draft mode. Stick to basic properties like:

• font-size
• color
• padding
• margin
• width

4. Test in a Minimal Environment:

Test your code with a minimal HTML template to see if the issue persists. This will help isolate if the problem is caused by a specific piece of CSS or a more general Gmail draft issue.

5. Ensure Responsive Designs:

If your email design is responsive (e.g., using media queries), Gmail drafts might not handle that properly. Consider simplifying your design for drafts or using tools that optimize responsiveness for email.

If you follow these guidelines, you should see more consistent rendering between the draft and sent emails. Let me know if you’d like further clarification or help with specific parts of your code.