for your website

A share button with a QR code

One line of HTML adds a button to your site. It opens a pop-up with a QR code of the page, drawn in the visitor's browser, with copy link, save as an image and the phone's share sheet underneath. Free, nothing to sign up for, and nothing is tracked.

try it

The first is the default and shares this page. The second shares dottr's homepage, in teal, with a dark pop-up. Or open it from a plain link.

Add it to your site

Paste this where you want the button, usually your footer:

<script src="https://dottr.app/embed/share.js" defer></script>

That's the whole job. The button shares whichever page it's on, so one line in a shared footer covers every page of the site.

Make it yours

Pick the look and the snippet below updates. The button here is the real thing, so press it.

Paste it where the button should appear. In a shared header or footer, every page gets it.

Load the script once, then mark any element with data-dottr-share. Elements rendered later still work, because the script listens on the document.

In the dashboard, go to Appearance, then Widgets (or Customise, then Widgets on older themes), add a Custom HTML block to the footer area, and paste this in. No plugin needed.

Astro bundles ordinary script tags, so mark this one is:inline to keep it as it is. Hugo, Eleventy and Jekyll need nothing special.

Use your own button or link

If you'd rather it matched the rest of your footer, mark any link or button with data-dottr-share and the script opens the pop-up from that instead of adding its own:

<a href="#" data-dottr-share>Share this site</a>

<script src="https://dottr.app/embed/share.js" defer></script>

Give the attribute a value, data-dottr-share="https://example.com", and that element shares that link. Use a real <a href> or <button> so it works from the keyboard. Elements added later by a framework work too.

No shift when it loads

The script adds its button once the page has loaded, so whatever sits below moves down by one button. If that matters, write an empty <dottr-share> where the button goes and give it a height in your CSS. The script fills it in place:

<dottr-share></dottr-share>

<script src="https://dottr.app/embed/share.js" defer></script>

The button is always 40px tall, so dottr-share { display: inline-block; height: 40px } reserves exactly the right space.

Options

All optional, all data- attributes on the script tag:

data-url

The link to share. Leave it out to share whichever page the visitor is on. A path like / works too, for "share my homepage" from every page. A relative path is resolved against the current page.

data-label

The button text. Share this page unless you say otherwise.

data-title

The heading in the pop-up, and the title handed to the phone's share sheet. Defaults to Scan to open this page, or …this site when the link is a homepage.

data-colour

The colour of the code, as a hex value like #0d9488. It has to stay dark enough to scan, so anything lighter than 3:1 against white quietly goes back to near-black. data-color works too.

data-accent

The button colour, and the main button in the pop-up. Any CSS colour. The text on it turns dark if you pick something light.

data-theme

light (the default), dark, or auto to follow the visitor's system setting. The code itself always sits on white, because that is what scans.

data-button

inline puts the button where the script tag is. float pins it to the bottom-right corner. none adds no button, for when you use your own. Left out, it picks for you: none if the page has a data-dottr-share element, inline if the tag is in the body, float if it is in the head.

data-attach

A CSS selector for elements that should open the pop-up, such as .footer-share. Handy when your CMS lets you add a class but not an attribute.

data-keep-params

Keeps tracking tags in the shared link. Without it, campaign and click identifiers (utm_source, fbclid, gclid and the like) come off before the link is encoded, so the code is smaller and the link is cleaner. Anything else in the query string is left alone.

A second script tag with different options adds a second button. They share one pop-up.

From JavaScript

Once the script has loaded, a single-page app can open the pop-up itself, or ask for a button to place:

dottrShare.open({ url: 'https://example.com/menu' });

// or render a button anywhere, with any of the options
footer.append(dottrShare.button({ label: 'Share this page' }));

The button the script draws can be restyled from your CSS with dottr-share::part(button).

Counting shares, in your own analytics

The pop-up sends an event on the page when it opens and when a visitor copies, shares or saves: dottr-share:open, dottr-share:copy, dottr-share:share and dottr-share:save. Each has the link in detail.url, and save adds detail.format. They bubble to the document, so one listener counts them in whatever analytics you already run. Nothing is sent to dottr.

document.addEventListener('dottr-share:copy', (e) => {
  // e.detail.url is the link that was copied
  plausible('Share', { props: { how: 'copy' } });
});

Privacy, in one paragraph

The script makes no requests of its own, sets no cookies and stores nothing, on your site or on dottr. The code is drawn in the visitor's browser by an encoder bundled into the script, so making one sends nothing anywhere. The only request your visitors make is for the file itself, and you can serve that from your own site instead. There is nothing to add to a consent banner, and nothing to declare in a privacy policy beyond a script that runs on the page.

The technical bit

Self-host it if you like. Download share.js and serve it from anywhere static. It is one file with nothing to install, and nothing in it points back at dottr except the credit link in the pop-up.
It keeps to itself. Everything it draws lives in a shadow root, so your CSS can't break it and its CSS can't touch your page.
It works from the keyboard and with a screen reader. The pop-up opens with focus on its first button, Tab stays inside it, Escape closes it, focus goes back to whatever opened it, and the code has a name.
It's about 9 KB gzipped, less than most icon fonts, and it loads with defer so it never holds up your page.
Strict security policies are fine. Add https://dottr.app to script-src (or self-host). Its styles use constructed stylesheets, so style-src can stay as it is. It never writes HTML strings, so it works under Trusted Types. Inside an iframe, the share sheet and copying need allow="web-share; clipboard-write" on the frame.

The small print

The pop-up has a small "QR by dottr" link at the bottom. It opens dottr with your link already in it, so anyone who wants their own copy of the code, or a different colour, can make one. That link is the whole deal: the button is free, and it stays free.

Questions, or something it should do? [email protected].