85
votes

I need to automatically open a user's default email client when they save some content on a page. I need to populate the email subject, to address, and put some content in the email body.

What is the best option to achieve this?

I'm aware of the mailto: attribute, but the user must click on this and I'm not sure it allows you to specifiy the subject and content?

4
You can set each and every part of an email in a mailto-prefixed href. Here's a tool I built to make it dead simple: mailto.now.sh - Dawson B

4 Answers

130
votes

As described by RFC 6068, mailto allows you to specify subject and body, as well as cc fields. For example:

mailto:[email protected]?subject=Subject&body=message%20goes%20here

User doesn't need to click a link if you force it to be opened with JavaScript

window.location.href = "mailto:[email protected]?subject=Subject&body=message%20goes%20here";

Be aware that there is no single, standard way in which browsers/email clients handle mailto links (e.g. subject and body fields may be discarded without a warning). Also there is a risk that popup and ad blockers, anti-virus software etc. may silently block forced opening of mailto links.

13
votes

JQuery:

$(function () {
      $('.SendEmail').click(function (event) {
        var email = '[email protected]';
        var subject = 'Test';
        var emailBody = 'Hi Sample,';
        var attach = 'path';
        document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody+
            "?attach="+attach;
      });
    });

HTML:

 <button class="SendEmail">Send Email</button>
3
votes

Implemented this way without using Jquery:

<button class="emailReplyButton" onClick="sendEmail(message)">Reply</button>

sendEmail(message) {
    var email = message.emailId;
    var subject = message.subject;
    var emailBody = 'Hi '+message.from;
    document.location = "mailto:"+email+"?subject="+subject+"&body="+emailBody;
}
2
votes

Try this: It will open the default mail directly.

<a href="mailto:[email protected]"><img src="ICON2.png"></a>