What gets shared

The email subject and body

The email button is not a service with an endpoint — it composes a mailto: link, which means its subject and its opening line are a template like any other. Replace it and the reader’s mail client opens with your words already in the draft.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_email" data-label="Email"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

Mail clients cap how much of a body they will accept from a link — keep it to a line or two.

A mailto: navigates, it does not pop up

Only http and https open in a share window; mailto: and sms: hand the address to the operating system instead, because a popup window pointed at a mail draft is blocked. The widget checks the scheme and picks the right one.

Keep the body to a line or two

Mail clients cap how much of a body they will accept from a link, and they do not agree on where the cap is. A paragraph is safe; a letter is not.

Four schemes are accepted

https, http, mailto and sms, checked as an allowlist rather than a list of things to ban. A template with anything else is ignored and the built-in one is used, so a typo costs you the customisation and never the button.

Live demo

Demo ↗

An article worth passing on

Press Email. The draft your mail client opens carries the subject and the opening line from the template below.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.share_url = {
  "email": "mailto:?subject={title}&body=Thought this was worth your time: {url}"
};
</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_email" data-label="Email"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>