46

How to include javascript in HTML emails - We need it for expanding and collapsing of the content in the HTML email.

Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54
moejoe11
  • 885
  • 3
  • 11
  • 14
  • Collapsing can be achieved using CSS: https://www.campaignmonitor.com/blog/email-marketing/2011/08/designing-ultra-short-emails-for-mobile-using-progressive-disclosure/ That's mainly for iPhones however. – revelt Aug 26 '16 at 14:07
  • Possible duplicate of [Is JavaScript supported in an email message?](http://stackoverflow.com/questions/3054315/is-javascript-supported-in-an-email-message) – HPierce Jan 24 '17 at 01:58
  • I think, you can make `javascript` attached in mail with defaulted encoding `base64` and then do your code tweaks basically for rendering. Check with concerned RFCs from IETF. There is a way. – Dev Anand Sadasivam Nov 29 '17 at 13:45

8 Answers8

68

I don't think that is possible in an email, nor should it be. There would be major security ramifications.

Bryan Rowe
  • 9,185
  • 4
  • 26
  • 34
  • 3
    I agree with you. But I got an advertisement mail from our country popular website: pigu.lt and inside mail been placed (and changing) count down timer to discount time is over. HOW IT'S POSSIBLE? Via image exceptions?.. – JDSolutions Mar 23 '16 at 19:27
  • 3
    @JDSolutions The timer is a static image, but the server serves new and new one, and it appears dynamic. Search movableink to learn more about dynamic elements in email. – revelt Aug 26 '16 at 14:04
32

Agree completely with Bryan and others.

Instead, consider using multiple sections in your email that you can jump to using links and anchors (the 'a' tag). I think that you can emulate the behavior you want by including multiple copies of the text further down in your email. This is a bet messy though, so you could just have sets of anchors that link to each other and allow you to move back in forth between the 'summary' section and the 'expanded' one.

Example:

<a href="#section1">Jump to section!</a>
<p>A bunch of content</p>
<h2 id="section1">An anchor!</h2>

Clicking on the first link will move focus to the sub-section.

Dana the Sane
  • 14,762
  • 8
  • 58
  • 80
24

Do not depend on this. Any good mail client will not support executable code within an email. Any knowledgeable user will not use a client that does.

Landon Kuhn
  • 76,451
  • 45
  • 104
  • 130
16

Here's what you CAN do:

You can attach (to the email) an html document that contains javascript.

Then, when the recipient opens the attachment, their web browser will facilitate the dynamic features you've implemented.

Lonnie Best
  • 9,936
  • 10
  • 57
  • 97
  • 2
    Voted up! I want to do this regardless to verify that the client will not run the script. – Dog eat cat world Oct 05 '16 at 15:09
  • 1
    Those who voted this down, provide your reasons, especially if it was just a knee-jerk "moral" reaction, for this is a *technical* discussion. Anyone, especially those who got this deep on this page, is clearly aware of the security ramifications anyway. Also, regardless of that, the good guys who read this should know -- *even more than the bad guys!...* -- what can be done and what can't. – Sz. Feb 10 '18 at 11:08
  • @Sz. Because it is a very bad idea that doesn't actually answer the question. The question was how to run JS from within an email, not "how do I run JS in an HTML document attached to an email?". – zero298 Jun 22 '18 at 17:59
  • 1
    When "something asked for" is "impossible", the best you can do is indicate the closest similar possibility. I stand behind my answer. Unusual isn't impossible, and no one here has offered anything better. – Lonnie Best Jun 24 '18 at 17:40
  • 2
    The down-votes on this one are unfair. It's a creative, non-standard work-around. It is perfectly legal, and not a misuse of email attachments or HTML. Any reader can decide for themselves whether this an acceptable workaround or too much like a hack. – Joe C Nov 18 '18 at 21:12
  • I would even go as far to say that there is nothing non-standard about it. Embedding javascript in HTML is in the [specification](https://www.w3.org/TR/html/semantics-scripting.html#the-script-element). People may not typically attach html documents to emails, but I've done it and there is nothing in the standards preventing it. As a matter of fact, any email client that doesn't allow an html attachment is non-standard. One day, this answer will float to the top of this page! So far, after 4 years, it has finally broke positive (having 1 up vote). – Lonnie Best Mar 18 '19 at 02:36
  • I recently proposed an idea that would allow you to attached an entire web application to an email via a single javascript file, without the current need for an HTML Wrapper. See [here](https://github.com/WICG/webcomponents/issues/1008). – Lonnie Best Apr 25 '23 at 08:01
11

The short answer is that scripting is unsupported in emails.

This is hardly surprising, given the obvious security risks involved with a script running inside an application that has all that personal information stored in it.

Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails. Even in the cases where it might run, there really is little benefit to scripting in emails.

Keep your emails as straight HTML and CSS, and avoid the hassle. Here is what you can do in html emails: https://www.campaignmonitor.com/guides/coding/technologies/

Toby Allen
  • 10,997
  • 11
  • 73
  • 124
WaldenW
  • 121
  • 1
  • 3
10

Just as a warning, many modern email browsers have JavaScript disabled for incoming emails as it can cause security problems. This means that many of the people you are emailing may not be able to use the content.

PS. Didn't see above post's at time of posting. My bad.

JohnH
  • 1,920
  • 4
  • 25
  • 32
Ryan
  • 257
  • 1
  • 8
3

you can use html radio/checkbox input with labels and css to achieve the expanding effects you want.

ucheia
  • 31
  • 1
2

What you are trying to achieve should be done in the web browser because javascript simply doesn't work with html email design. The various email clients that are out there e.g. gmail, outlook, yahoo strip scripts put of the code for security reasons.

It is best to just use HTML and CSS to style your emails. Maybe you could have a call to action (cta) in your html email that sends the user to a web page with your expanding and collapsing content feature.