Behind the scenes

Loading the script your way

Nothing on your page waits for the widget. It scans when the document is ready, or straight away if the document is already parsed — so arriving late, from a bundle or a tag manager or a route change, costs it nothing at all.

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_telegram"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

<p id="ats-demo-status" role="status" aria-live="polite">Waiting for the widget…</p>

Options have to be there before the scan

Every option that shapes a kit is read while that kit is being drawn, and a kit that has been drawn is never drawn again. So put the object above the tag. Setting an option afterwards reaches only the kits that have not been wired yet, which on a static page means none of them.

<script>window.ats_config = { num_services: 4 };</script>
<script async src="//static.addtosite.com/widget.js"></script>

Bundled, its neighbours move with it

The script works out where icons.json, overlays.js and share-tools.js live from its own src. Concatenate it into a bundle and that address is your bundle’s; load it as a module, where there is no current script to ask, and it falls back to our static host. Either way the buttons render — the most-used marks are inside the file — but the long tail of icons follows whichever address it worked out, so check that one file is reachable from it.

Live demo

Demo ↗

An article worth passing on

Waiting for the widget…

The ready callback updates the message after the first scan. The async script initializes the buttons whenever it finishes loading.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

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

<p id="ats-demo-status" role="status" aria-live="polite">Waiting for the widget…</p>

<script>
window.ats_config = window.ats_config || {};
window.ats_config.ready = function (api) {
  document.getElementById('ats-demo-status').textContent = 'Widget ' + api.version + ' is ready. The buttons are active.';
};
</script>

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

Buttons added after load