One kit or many

Buttons added after the page loads

In a single-page app or an infinite list the markup arrives long after the script has run. Insert the kit yourself, call one function, and the new kits are wired — the ones already on the page are left exactly as they were.

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_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<p><button type="button" id="ats-add-kit">Add another share row</button></p>
<div id="ats-added-kits"></div>
<p id="ats-demo-status" role="status" aria-live="polite">One row is ready. Add another after the script has loaded.</p>

What to watch for

refresh() only wires kits it has not seen; calling it twice does nothing and costs nothing.

The call

Both names are the same object. addtosite is the long one; ats is there for typing.

document.querySelector('#list').insertAdjacentHTML(
  'beforeend',
  '<div class="ats_kit" data-url="' + row.url + '"></div>'
);

addtosite.refresh();

Calling it twice does nothing

Already-wired kits are skipped, so refresh after every insert if that is simplest. There is no penalty for asking, and no duplicate buttons if you ask twice.

Wait for the script

The tag is async, so on a fast route change your code can run first. Guard the call and nothing throws; the kits you inserted are picked up by the widget’s own first scan anyway.

if (window.addtosite) addtosite.refresh();

Live demo

Demo ↗

An article worth passing on

One row is ready. Add another after the script has loaded.

Press Add another share row: new markup is inserted and refresh() makes its buttons work without reloading the page.

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_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<p><button type="button" id="ats-add-kit">Add another share row</button></p>
<div id="ats-added-kits"></div>
<p id="ats-demo-status" role="status" aria-live="polite">One row is ready. Add another after the script has loaded.</p>

<script>
window.ats_config = window.ats_config || {};
document.addEventListener('click', function (event) {
  if (!event.target.closest('#ats-add-kit')) return;
  var list = document.getElementById('ats-added-kits');
  var number = list.children.length + 1;
  var row = document.createElement('div');
  row.className = 'ats_kit ats_kit_size_32';
  row.setAttribute('data-url', 'https://example.com/article/' + number);
  row.setAttribute('data-title', 'Article ' + number);
  list.appendChild(row);
  if (window.addtosite) window.addtosite.refresh();
  document.getElementById('ats-demo-status').textContent = 'Added article ' + number + '. Its buttons are ready.';
});
</script>

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

Self-host the script