The buttons

Add your own service

Add an intranet chat or regional network with a public sharing URL. Give it a key, name, colour and endpoint template to place it in the button row and menus. An optional image URL gives it its own icon.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_team_chat"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

The key has to be unique and lower case; it becomes the class name your markup references.

The whole definition

A key of lowercase letters, digits and underscores; a name; a colour; and a url, a follow template, or both. An optional HTTP(S) icon URL supplies the image; otherwise the first letters of the name form a readable fallback.

window.ats_config = {
  custom_services: [{
    key:   'team_chat',
    name:  'Custom sharing',
    color: '#7C3AED',
    url:   'https://addtosite.com/share?url={url}&title={title}',
    icon:  'https://static.addtosite.com/img/copy-64.png'
  }]
};

A bad entry is skipped, not tolerated

A key with a dash, a missing name, a colour that is not a hex value, a template with a scheme we do not open: each of those drops the entry and leaves the rest of the page working. The alternative is worse than it sounds. A service with no name throws while its glyph is being drawn, and takes every kit below it on the page with it.

Host your custom image

Use an absolute HTTP(S) image URL that your visitors can load. It appears in inline buttons and menus; a failed image falls back to the service name initials. The service colour remains the button background. Remote images load from the host you choose.

It cannot overwrite a built-in

A key the catalog already uses is ignored. Use share_url to change an existing service rather than redefining it.

Live demo

Demo ↗

An article worth passing on

The third button is defined by this page, including its image. For a working demonstration, it opens the AddToSite share tool; replace its endpoint and icon with your own.

Services (2 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.native = false;
window.ats_config.track = false;
window.ats_config.analytics = false;
window.ats_config.custom_services = [
  {
    "key": "team_chat",
    "name": "Custom sharing",
    "color": "#7C3AED",
    "url": "https://addtosite.com/share?url={url}&title={title}",
    "icon": "https://static.addtosite.com/img/copy-64.png"
  }
];
</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_team_chat"></a>
  <a class="ats_dd"></a>
</div>

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

Change an endpoint