Guide · CDN & Vanilla JavaScript

CDN Usage

smart-mailto ships a UMD bundle for use directly from a CDN. No bundler, no framework, no build step required — just add a script tag.

Quick Start

Add the script to your HTML, then call initSmartMailto() to enable the global mailto: interceptor:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/@smart-mailto/core@latest/dist/smart-mailto.umd.js"></script>
</head>
<body>
  <a href="mailto:hello@example.com">Contact us</a>
  <script>
    SmartMailto.initSmartMailto({
      theme: 'auto',
      autoDetectGeo: true,
    });
  </script>
</body>
</html>

Available Formats

All three formats are published to npm and available on CDNs:

ESM

Modern bundlers (webpack, Vite, Rollup)

@smart-mailto/core

CJS

Node.js / CommonJS environments

require('@smart-mailto/core')

UMD

Script tags, AMD, no-bundler setups

SmartMailto.initSmartMailto()

CDN URLs

All major CDNs serve the UMD bundle:

jsDelivrhttps://cdn.jsdelivr.net/npm/@smart-mailto/core/dist/smart-mailto.umd.js

unpkghttps://unpkg.com/@smart-mailto/core/dist/smart-mailto.umd.js

cdnjshttps://cdnjs.cloudflare.com/ajax/libs/smart-mailto/0.2.0/smart-mailto.umd.js

Framework Wrappers

For framework projects, install the corresponding package from npm:

React 17+

npm install @smart-mailto/react

Vue 3+

npm install @smart-mailto/vue

Svelte 4+

npm install @smart-mailto/svelte

Using ESM from CDN

For modern browsers that support import maps, use the ESM build directly:

esm-with-importmap

<script type="importmap">
{
  "imports": {
    "@smart-mailto/core": "https://cdn.jsdelivr.net/npm/@smart-mailto/core@latest/dist/index.js"
  }
}
</script>
<script type="module">
import { initSmartMailto } from '@smart-mailto/core';
initSmartMailto({ theme: 'auto' });
</script>