A better mailto fallback with JavaScript

A normal mailto: link is still the simplest way to put an email address behind a Contact button. The rough edge is what happens after the click.

The visitor's browser may open a desktop app they do not use. It may have no useful mail handler configured. Meanwhile, the visitor may already be signed in to Gmail, Outlook, Proton Mail, or another webmail service.

You can keep the ordinary link and add a better choice on top of it.

1. Keep the mailto link

Start with the HTML you already have:

Email us

This matters because the anchor remains useful without the library. If JavaScript is unavailable, the browser still sees a normal mailto: URL and can hand it to the visitor's configured mail app.

2. Install smart-mailto

Install the framework-agnostic core package:

npm install @smart-mailto/core

The package has no runtime dependencies.

3. Initialize it once

Put the import in your browser entry file and call the initializer once:

import { initSmartMailto } from '@smart-mailto/core';

initSmartMailto();

That is the full migration. You do not have to replace each anchor with a custom component.

smart-mailto uses one delegated click listener for valid mailto: anchors, including links added later. When a visitor clicks one, the library opens a provider picker instead of sending them straight to the operating system's default mail app.

The recipient and existing subject or body values stay with the email intent. Exact prefill support varies by provider.

The fallback paths

The picker does not assume that every visitor wants one of the suggested webmail services.

• Copy Address is included by default, so the visitor can copy the recipient and continue in any mail service.
• Default Mail App is included on mobile by default. If you want to show that option on desktop too, initialize with initSmartMailto({ includeNative: true }).
• If the picker cannot load, smart-mailto returns to the original mailto: URL.
• If the recipient is empty or invalid, the library leaves the click alone and lets the browser handle it.

The original anchor stays the safety net throughout.

What changes for the visitor

Before:

1. Click the email link.
2. Hope the browser opens the right app.

After:

1. Click the same email link.
2. Choose a webmail provider, use the default mail app, or copy the address.

Your HTML stays familiar, while the visitor gets a route that matches how they actually send email.

For the complete walkthrough, see the practical smart-mailto guide. The smart-mailto repository contains the source, package documentation, and configuration reference.