maildo

Mailto link modals built in Svelte and inspired by mailgo.

I created this project to recreate the functionality I enjoyed from the original Mailgo project after it was deprecated.

Getting Started

Installation

npm i maildo

then import the CSS and JS.

import 'maildo/dist/index.css';
import 'maildo/dist/index';

[!NOTE] This example assumes the use of a build system that allows importing css in js. But you should adapt importing of the css and js to your project's build system.

Usage

Maildo will automatically be enabled for mailto: and tel: links unless the anchor tag includes the no-maildo class.

<a href="mailto:[email protected]">
  Email Me
</a>

<a href="tel:(555)555-5555">
  Call Me
</a>

<!-- Exclude from maildo and use the default browser behavior -->
<a class="no-maildo" href="mailto:[email protected]">
  Email Me
</a>

<!-- Exclude from maildo and use the default browser behavior -->
<a class="no-maildo" href="tel:(555)555-5555">
  Call Me
</a>

Data Attributes

As an alternative to including the email address or phone number directly in the mailto: or tel: link, you can include the corresponding data attributes.

Href method

<!-- The modal will display the email as [email protected] -->
<a href="#maildo" data-address="hello" data-domain="example.com">
  Email Me
</a>

Class method

<!-- The modal will display the email as [email protected] -->
<a class="maildo" href="" data-address="hello" data-domain="example.com">
  Email Me
</a>

Mailto Attributes

| name | description | | --- | --- | | data-address | The username of the recipient's email address. | | data-domain | The domain of the recipient's email address. | | data-cc-address | The username of the CCed email address. | | data-cc-domain | The domain of the CCed email address. | | data-bcc-address | The username of the BCCed email address. | | data-bcc-domain | The domain of the BCCed email address. | | data-subject | The subject of the email. | | data-body | The body of the email. |

Tel Attributes

| name | description | | --- | --- | | data-tel | The recipient's phone number. |

Development

Install pnpm

npm install -g pnpm

Install packages

pnpm install

Run the dev server

pnpm run dev

Then navigate to http://localhost:5173/ in your browser to view the dev site.

Build output files

pnpm run build

Built files will be output to the dist/ directory.