Add share buttons that send tracked short links

How it works#

When a visitor shares a page, the button asks Whooshly for a short link for that page and that network, for example one whshly.co link for your pricing page on LinkedIn and another for the same page on X. The short link sends people to the page with utm_source, utm_medium, utm_campaign=share and utm_content set, so the visits land in the right channel in GA4 instead of Direct.

The script sets no cookies and needs no API key. It works out which site it is on from the page itself, so it works the moment you paste it, before you sign up: shares go out as short links and the counts wait for you. Claim the site (a free account and a verification tag) to see them and keep them. If anything goes wrong, the button shares the plain page address with the same UTM tags, so sharing never breaks.

Claim and verify your site#

The buttons work without an account, and whatever they collected before you claim the site moves to your account when you verify it.

1. Add the siteIn the app, open Settings → Share kit and enter your domain, for example example.com. One account owns each domain.
2. Prove it is yoursCopy the meta tag into the <head> of your homepage, or add the TXT record it shows at _whooshly.<your domain>.
3. Check verificationClick Check verification. DNS changes can take a few minutes; the meta tag works as soon as the page is published.

Add the script and the buttons#

Add the script once per page, then place the buttons wherever they should appear. The default row is LinkedIn, X, Facebook, email and copy link.

<script src="https://whooshly.co/share.js" defer></script>

<whooshly-share></whooshly-share>

<!-- Pick the networks and their order -->
<whooshly-share networks="linkedin,x,whatsapp,copy"></whooshly-share>

Keep your own buttons#

Already have share buttons that match your design? Keep them and add one attribute to each. The script takes over the click and shares a short link instead of the plain address. Buttons marked this way never show the Whooshly icon.

<a href="https://www.linkedin.com/sharing/share-offsite/?url=..." data-whooshly-share="linkedin">Share on LinkedIn</a>
<button type="button" data-whooshly-share="copy">Copy link</button>

Style it and listen for shares#

The buttons and the optional Whooshly icon inherit your text colour, so they can be black, white or any shade of gray together. CSS variables adjust the size, spacing, border, background and Whooshly icon colour. Every share fires a whooshly:share event with the network and the link that went out, if you want to send it to your own analytics.

whooshly-share {
  --whooshly-share-size: 40px;
  --whooshly-share-gap: 10px;
  --whooshly-share-border: #d6d3cc;
  --whooshly-share-bg: transparent;
  --whooshly-share-mark-color: #666; /* optional: override only the Whooshly icon */
}

document.addEventListener("whooshly:share", (e) => {
  console.log(e.detail.network, e.detail.url);
});

Script options#

Options go on the script address. Plugins and tag managers use them; you can too.

<!-- Put the buttons in place without writing any HTML -->
<script src="https://whooshly.co/share.js?auto=floating" defer></script>
<script src="https://whooshly.co/share.js?auto=after:article" defer></script>

<!-- Choose the networks for the automatic row -->
<script src="https://whooshly.co/share.js?auto=floating&networks=linkedin,x,whatsapp,copy" defer></script>

<!-- Tell us which plugin or tool installed it (letters, digits, dashes) -->
<script src="https://whooshly.co/share.js?via=wordpress" defer></script>

<!-- Leave out the Whooshly icon (per script, or per element with badge="off") -->
<script src="https://whooshly.co/share.js?badge=off" defer></script>

<!-- The optional icon matches the other icons by default; use brand colors if you prefer -->
<script src="https://whooshly.co/share.js?badge-color=brand" defer></script>
<whooshly-share badge-color="brand"></whooshly-share>

Credit your sharers#

If your visitors are signed in, tell the buttons who is sharing. Each sharer gets their own short link for every page and network, the destination carries shared_by=, and Settings → Share kit lists your top sharers with shares and clicks back, plus a CSV. Your own app can read shared_by to credit a customer, a member or a partner.

The id is a token you choose, such as a customer number or a partner code: letters, digits, dots, dashes and underscores, up to 40 characters. Never use an email address or a name. Anything else is ignored and the share goes out as the page's ordinary link. Sharer ids work on claimed sites; an unclaimed install shares as one.

<!-- On the buttons, or any element around them -->
<whooshly-share sharer="cust_4821"></whooshly-share>
<div data-sharer="cust_4821"> ...your own marked-up buttons... </div>

<!-- Or once for the whole page, from your own template -->
<script src="https://whooshly.co/share.js" data-sharer="cust_4821" defer></script>
<script>window.whooshlySharer = "cust_4821";</script>

Free and Core#

On the free plan, links use whshly.co and a small Whooshly icon sits after the buttons. With Core ($35 once), the icon goes away and you can send share links on your own domain: pick it under Short links on in Settings → Share kit. Links already shared keep working after you switch.

If your site sets a Content Security Policy#

Allow the script and its requests from whooshly.co: add https://whooshly.co to script-src and connect-src. Without it the browser blocks the script and your existing buttons keep sharing plain addresses.