One kit or many

Many kits on one page

Paste as many kits as the page needs. The script scans once and wires all of them, and each reads its own attributes — so a listing where every row shares its own link costs no more than an article with a single bar at the bottom.

The code

<div class="ats_kit ats_kit_size_32"
     data-url="https://addtosite.com/services/"
     data-title="Explore the AddToSite services">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

<div class="ats_kit ats_kit_size_32"
     data-url="https://addtosite.com/customize/"
     data-title="Customize your share buttons">
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

Two kits, two targets

Nothing is shared between them but the script.

<div class="ats_kit" data-url="https://example.com/one"></div>
<div class="ats_kit" data-url="https://example.com/two"></div>

One scan, and it does not repeat itself

A wired kit is marked, and a marked kit is skipped. That is what makes it safe to ask the widget to look again after you have added more.

Counts are asked once per address

Ten kits pointing at the same URL produce one request between them, not ten. Ten kits pointing at ten URLs produce ten, which is the honest cost of ten different questions.

Live demo

Demo ↗

An article worth passing on

Two independent rows: the first shares the service catalogue, the second shares customization. Open More to inspect each target.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_kit + .ats_kit { display: flex; margin-top: 20px; }
</style>

<div class="ats_kit ats_kit_size_32"
     data-url="https://addtosite.com/services/"
     data-title="Explore the AddToSite services">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

<div class="ats_kit ats_kit_size_32"
     data-url="https://addtosite.com/customize/"
     data-title="Customize your share buttons">
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

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

Share another URL