Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a trick to prevent Gmail's "quoted text" from hiding my email footer?

Tags:

html

gmail

hidden

I send emails to my users which have the same subject but contain different content aside from the header and footer. The header contains a logo, a "Part x of n" message, and an <hr> and is never hidden. The footer contains an <hr>, the same "Part x of n" text and some functional links (Next, Pause, Tweet) that I don't want hidden.

I tried enclosing these in a <div id=timestamp>. I also tried adding &ts=timestamp to the links. The links are images, so then I created a symbolic link called image2.png pointing to image1.png and alternated these images. None of these worked.

Is there a simple solution that I haven't thought of yet?

Here is some html:

names are really separated by, rather than just a comma.</p>
<p>This function does not do any checking for problems. We assume,
in this case, that the input is always correct.</p>
</div>
</div>
<div>
<p>All that remains now is putting the pieces together.</div></div></div></div></span>
<hr>(Part 19 of about 74)<br>
<a href='http://www.mywebapp.com/index.php?action=next'>
<img border=0 src='http://www.mywebapp.com/images/next.png' alt='Get next text'</a>&nbsp;&nbsp;
<a href='http://www.mywebapp.com/index.php?action=pause&listid=252&itemid=2100'>
<img border=0 src='http://www.mywebapp.com/images/pause.png' alt='Pause this text'></a>&nbsp;&nbsp;
<a href='http://twitter.com/home?status=tweetGoesHere'><img border=0 src='http://www.mywebapp.com/images/twitter-a.png' alt='Tweet this'/></a><br>
Original page: <a href='http://eloquentjavascript.net/print.html'>here</a><br>

And here's a screenshot:

iPhone screenshot

like image 694
SeanO Avatar asked Apr 08 '11 12:04

SeanO


Video Answer


2 Answers

I was able to solve this problem by appending a <span> containing a unique invisible string to each line of my email's footer. At first, I just added time() to each line, but some email clients interpret this as a phone number and convert the string into a URL. So, I pre/postpended a non-numeric character to the string and things seem to be working fine.

There must be a better way to do this though...

like image 94
SeanO Avatar answered Oct 12 '22 23:10

SeanO


After going crazy from Gmail breaking up my transactional emails into blocks and hiding repeating parts of it, I implemented a helper function inspired by SeanO's answer in my meanie-mail-composer package to automate the addition of random strings for me.

This helper includes a hidden <span> with a 5 character random string before every </p> tag by default.

Here's the code snippet that does the trick (Node.js):

const crypto = require('crypto');

//Helper to randomize HTML contents
function randomize(html, tag = '</p>') {

  //Create a 5 char random string for email content to be unique
  const time = String(Date.now());
  const hash = crypto
    .createHash('md5')
    .update(time)
    .digest('hex')
    .substr(0, 5);

  //Create HTML string to replace with and regex
  const str = `<span style="display: none !important;">${hash}</span>${tag}`;
  const regex = new RegExp(tag, 'g');

  //Replace in HTML
  return html.replace(regex, str);
}

No more broken up emails!

like image 33
Adam Reis Avatar answered Oct 13 '22 01:10

Adam Reis