Customize
Customize
Every option has a page, and every page runs the thing it describes. The code on each one is the markup that produced the buttons above it, so what you copy is what you saw.
Popular
The buttons
ShapeRounded, circular or square. One class on the kit.
SizeAny pixel size you like, set by a number in the class name.
LabelsText beside the icon, for when an icon alone is not obvious.
Your own coloursOverride a brand colour with a rule of your own.
How many showCap the row; everything past the cap moves into the More menu.
What gets shared
Behind the scenes
Every option
Set window.ats_config before the widget script runs. Every key is optional.
| Key | Type | What it does |
|---|---|---|
num_services | number | Maximum buttons rendered inline. The rest move into the More menu. |
lang | string | Interface language for the menu and labels. Only "en" ships today. |
track | boolean | Set false to send no share pings at all. |
theme | string | "light" or "dark" for the share sheet. Left unset it follows the reader’s operating system. |
mastodon_instance | string | Which instance the Mastodon button posts through. Defaults to mastodon.social. |
counters | boolean | Show a share count on each button. Off by default, because a row of zeroes on launch day helps nobody. |
analytics | boolean | Set false to stop handing share events to gtag or dataLayer. On by default, but it does nothing unless your page already runs one of them. |
api | string | Point the counting endpoints at your own backend. Only needed if you self-host. |
overlays | boolean | Show a share button over images on hover. Loads a small extra file, and only when switched on. |
overlay_min_size | number | Smallest image, in pixels, that gets an overlay. Defaults to 200, which keeps avatars and icons clear of it. |
overlay_position | string | Which corner the button sits in: top-left, top-right, bottom-left or bottom-right. |
Class names you can style
| Class | Applies to |
|---|---|
.ats_kit | The container holding a row of buttons |
.ats_button | Every button, whichever service |
.ats_button_<service> | One specific service |
.ats_dd | The More button |
.ats_label | The text beside an icon |
.ats_menu | The share sheet panel |