The menu

Order the services in the menu

Name the services your readers actually use and they float to the top of every list the widget builds for itself — the share sheet, the quick strip, and the default set a kit with no buttons in it falls back to. Nothing is ever dropped: the rest keep catalogue order behind them.

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_dd"></a>
</div>

The row above is your markup, not this option

A kit that names its buttons already has an order — the one you typed — and priority does not touch it. What it orders is the lists the widget draws up itself. The clearest case is a kit with nothing inside it: there the default set is what renders, so the option decides the row as well as the sheet.

<script>window.ats_config = { priority: ['whatsapp', 'telegram'] };</script>

<div class="ats_kit ats_kit_size_32"></div>

It decides which buttons survive a cap

The default set is ordered first and the cap takes from the front of what is left, so these two together are how you get a three-button row of your choosing without writing any anchors. Ordered, the seven defaults are whatsapp, telegram, facebook, x, linkedin, email, copy; capped at three, the first three render and the rest wait behind More.

window.ats_config = { priority: ['whatsapp', 'telegram'], num_services: 3 };

A wrong key costs you nothing

The list is typed by hand against a catalogue that grows, so every bad shape is survivable: a key nobody recognises is skipped and the rest of the list still applies, a repeated key keeps its first position, and a list of nothing but typos leaves the order exactly as it was. A comma-separated string works as well as an array, and the parts are trimmed.

window.ats_config = { priority: 'whatsapp, telegram, email' };

Live demo

Demo ↗

An article worth passing on

Press More. WhatsApp, Telegram and Email are the first three rows, in that order, and the catalogue picks up behind them exactly where it always did.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.priority = [
  "whatsapp",
  "telegram",
  "email"
];
</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_linkedin"></a>
  <a class="ats_dd"></a>
</div>

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

How many show