Mailto link with HTML body

javascript

prompt-engineering

email-encoding

javascript-snippet

byAnton Shumikhin·Feb 28, 2025

To incorporate HTML into a mailto hyperlink's body, make sure to perform URL encoding. This will convert unique HTML characters into a web-safe format. However, the support for HTML in a mailto body varies across different email clients and might not always work.

Here's a quick example for embedding bold text in the email body:

<a href="mailto:[email protected]?subject=Subject&body=Hello%2C%20%3Cb%3Ebold%20text%3C%2Fb%3E">Email with Bold Text</a>

Keep in mind:

URL encoding is mandatory for HTML within mailto links.
Different email clients show different level of support for HTML, thus thorough testing is crucial.
Pay great attention to security elements while dealing with this process.

A few key points to remember about HTML in mailto links:

RFC 6068, the official regulation, disallows the use of HTML tags in mailto link bodies. This means, plain text is the only way to go.
Despite this, some systems like iOS might render HTML tags in the body, but it is not a standard method and might lead to inconsistencies.
For a richer email formatting, consider creating an .eml file using JavaScript and Blobs. This can then be downloaded and opened by users in their preferred email client.

SQL of mailto: Encoding, Testing, Tweaking

Parameters in mailto URLs need careful encoding and testing to handle edge cases:

Encode line breaks as %0D%0A. This helps with separating sections within your mailto link body.
Outlook recognizes line breaks %0D. However, it doesn't interpret the content as HTML.
Use window.location.href in JavaScript to create a dynamic redirect to a mailto link filled with URL-encoded content.

The example below demonstrates how to use encodeURIComponent() function for lines breaks and special characters:

// "Cooking" our subject and body, Heat Warning!🔥
const subject = 'Hot Potato!';
const body = 'Potato,\r\nCool off in the next line.';
// Assembling the "dish", careful, it's still hot!
const mailto = `mailto:[email protected]?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

// Serving the "dish" using href property
window.location.href = mailto;

Pro-tips and Pitfalls

Let's avoid stepping on a rake 🪓:

Remember, spam filters don't like certain encoded characters, so always tests your mailto links to ensure all your emails reach their destination 🎯
Keep your encoded HTML short and simple, because long URLs can make browsers 🙄
To enhance user experience, consider offering a downloadable EML file with rich content.

To create a downloadable EML file, use this handy JavaScript snippet:

// "Secret sauce" of email content
const emailContent = `Subject: My Secret Recipe\r\nMIME-Version: 1.0\r\nContent-Type: text/html; charset="UTF-8"\r\n\r\n<html><body><p>Time for a hot <b>soup</b> email.</p></body></html>`;
// Whatever this Blob thing does, it certainly sounds squishy!
const blob = new Blob([emailContent], { type: 'message/rfc822' });
// A link to nowhere or everywhere?
const link = document.createElement('a');
// Blob is now officially squishy and orbiting this link
link.href = URL.createObjectURL(blob);
// Label it carefully for future explorers.
link.download = 'email.eml';
// Slap it onto the document because we like to live dangerously
document.body.appendChild(link);
// BOOM! There goes the dynamite!
link.click();
// Nothing to see here, carry on
document.body.removeChild(link);

Next Level: User Options

Give your users the choice :

Provide HTML-rich emails as .eml downloads for desktop clients, while for their mobile counterparts, stick to simple links due to the limitations of mobile clients.
Always insert an alternative plaintext version for the utmost compatibility.
Educate users about the potential variability in email formatting across different email clients.