The Problem

Mailto links are a simple and effective way to send an email, but users feel frustrated when clicking a mailto: link automatically opens a default desktop email client (which is rarely configured).

mailtoFixer.js fixes that. It instantly converts your mailto: links into a beautiful modal, giving users the accessible choice to either copy the address, open their default client, or use web clients like Gmail/Outlook.

In addition, mailtoFixer.js can protect you from bot spammers constantly looking for email addresses on the web using a simple automatic obfuscation technique.

🚀 Quick Install

1. Include mailtoFixer.js in your web page. Paste this code snippet before the </body> tag in your HTML:

<script src="https://cdn.jsdelivr.net/npm/mailto-fixer/dist/mailtoFixer.min.js"></script>

2. Done! Now, every mailto: link in your page is automatically upgraded into a beautiful popup. It fully supports Dark Mode out of the box.

(Optional) Install via npm: npm i mailto-fixer

🛡️ Anti-Spam: Obfuscation Feature

In addition to the UI upgrades, mailtoFixer.js allows you to obfuscate your email in your HTML to protect it from bots (which scan millions of websites for the mailto: string).

Instead of outputting standard links:

<a href="mailto:[email protected]">Contact Us</a>

You can use this equivalent syntax:

<a href="#" data-mailtofixer-username="john" data-mailtofixer-domain="gmail.com">Contact Us</a>

If you also want the text inside the <a> tag to be automatically replaced with the generated email address, add data-mailtofixer-replace-content="true":

<a href="#" 
   data-mailtofixer-username="john" 
   data-mailtofixer-domain="gmail.com" 
   data-mailtofixer-replace-content="true">
   This text will automatically become [email protected]!
</a>

🗺️ Customization & Roadmap

You can easily customize the look of the modal by overriding the native classes in CSS (.mailtofixer-*). The component ships lightly.

Roadmap:

• [x] Dark mode support.
• [x] Nicer UI & Animations
• [x] Copy to clipboard native API
• [x] Accessibility (A11y, Focus Management).
• [ ] Add localization
• [ ] Support default subject and body parameters.

📄 License

MIT License. Pull Requests welcome.