Behind the scenes

Translate the words in the sheet

Ten interface labels belong to the widget. The strings table replaces them one key at a time, including accessible follow labels and share counts. Missing labels fall back to English.

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_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

The ten keys

Each is read when the control that carries it is drawn: the sheet builds its words every time it opens, the More button takes its name when the kit is painted. Set the table before the script runs and every one of them is right the first time.

share      the sheet's heading, and its accessible name
more       the More button
search     the filter's placeholder and its label
close      the close button's accessible name
copied     the toast after Copy link
shareTo    each button's accessible name — 'Share to {name}'
noResults  shown when the filter matches nothing
followOn   follow button label — 'Follow on {name}'
shareCount accessible count — '{count} shares'
shareFailed optional sharing tools could not be loaded

An empty string is not a translation

A key set to "" falls back to the built-in word, on purpose. Every one of these is the name of a control — the close button’s label, the More button, the filter — and an empty name ships an unlabelled button into someone else’s page. A half-finished table is the far likelier reason for an empty value than a site wanting a nameless button, and a site that genuinely wants no visible text has CSS for that. A value that is not a string at all is ignored the same way.

Choose a built-in language

The built-in codes are en, vi, de, fr, es, pt, ja and zh. Set lang explicitly, or let the widget use the page’s html lang, then the browser’s language. Regional tags such as fr-CA use the base language. An unsupported explicit/page language falls back to English. Your strings overrides always take priority. The public translation method uses the same selected table.

window.ats_config = window.ats_config || {};
window.ats_config.lang = 'de';
addtosite.t('more');                       // 'Mehr'
addtosite.t('shareTo', { name: 'X' });     // 'Teilen auf X'

Live demo

Demo ↗

An article worth passing on

Press More: the sheet’s heading, its filter placeholder and its close button are German here. So is the toast after Copy link. The service names are not — those are brand names, and they are not ours to translate.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.strings = {
  "share": "Teilen",
  "more": "Mehr",
  "search": "Suchen",
  "close": "Schließen",
  "copied": "Link kopiert",
  "shareTo": "Teilen auf {name}",
  "noResults": "Keine Dienste gefunden",
  "followOn": "Folgen auf {name}",
  "shareCount": "{count} Mal geteilt",
  "shareFailed": "Teilen konnte nicht geöffnet werden. Bitte erneut versuchen."
};
</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_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

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

The filter field Menu style Labels