Copy Link Button Widget
Most sharing is copy and paste into a chat, a ticket or a slide. Add a Copy link button - or a read-only address box with a Copy button beside it - that puts a tidy address of the current page on the clipboard, turns green with a tick and tells screen-reader users it worked.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="copy-link-button"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
When pressed, the button asks the kit for the address at that moment - so a single-page app copies the view the reader is on, not the one that loaded. The kit prefers your fixed URL, then the page's canonical link (ignored if it points at the home page from a deeper page), then the address bar with the #fragment and advertising parameters such as utm_source, fbclid, gclid and msclkid removed; parameters that select content, like ?id=7, stay. The text is written with the asynchronous Clipboard API on https pages, falling back to a hidden selection and the copy command elsewhere. Success swaps the link glyph for a tick, shows your confirmation text for two seconds and announces it through a polite live region. If both methods fail, the address box (field layout) is focused and selected so the reader can press Ctrl+C or Cmd+C.
Method
- Copied text = fixed URL || canonical (unless it points at / from a deeper page) || location without #hash and tracking parameters
- navigator.clipboard.writeText() on secure pages, else a temporary read-only textarea + document.execCommand('copy')
- Confirmation: visible label change for 2.2 s + aria-live polite announcement; failure selects the address for manual copying
Worked examples
A visitor who arrived from a newsletter advert
Inputs: No fixed address; address bar shows https://example.com/guide?id=7&utm_source=news&fbclid=AbC#comments
Result: Clipboard: https://example.com/guide?id=7 - button reads Link copied, screen readers hear Link copied
The fragment and the two tracking parameters are dropped; id=7 stays because it picks the content.
Field layout with a hostile fixed address
Inputs: Layout field, Address to share javascript:alert(1)
Result: The box shows and copies the page's own address instead
Only http and https addresses are accepted for the fixed URL.
Limitations
- Some embedded browsers (in-app browsers of social apps) restrict clipboard access; the reader is then asked to copy manually.
- The copied address follows your canonical link - if that tag is wrong on your site, fix it or set a fixed address.
Where publishers use it
- A documentation site putting a Copy link button beside each guide so support staff can paste exact addresses into tickets
- A webinar replay page with an address box readers can copy into a team calendar invite
- A newsletter archive where readers forward issues in Slack or Discord rather than through social networks
- A campaign landing page reached through ads: the copied address drops utm_ and gclid tags, so forwarded links do not pollute campaign reports
Questions
Why is the copied address different from the one in my address bar?
The kit removes the #fragment and advertising parameters (utm_*, fbclid, gclid, msclkid, mc_cid and similar) so a forwarded link is clean and does not credit your ad campaign twice. If your page has a canonical link, that is copied instead. Set a fixed address in the builder if you want one exact URL every time.
Does copying work on http pages and in older browsers?
Yes in most cases. The modern Clipboard API needs a secure (https) page; on http pages and older browsers the button falls back to selecting hidden text and running the browser's copy command. If a browser blocks both, the field layout selects the address so the reader can copy it with the keyboard.
Is the confirmation accessible?
The button is a real button with a visible label (or an aria-label when it shows only an icon). After a successful copy your confirmation text appears on the button and the same words are read out through a polite live region, so screen-reader users hear it without losing their place.
Can I copy a different address than the current page?
Yes - fill in Address to share. Only http and https addresses are accepted; anything else, such as javascript: or data:, is ignored and the page's own address is used.
Sources
- Clipboard API - MDN Web Docs . navigator.clipboard.writeText() requires a secure context
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Copy Link Button https://a2z.tools/embed/copy-link-button
<a href="https://a2z.tools/embed/copy-link-button">A2Z Tools Copy Link Button</a>
[A2Z Tools Copy Link Button](https://a2z.tools/embed/copy-link-button)
Copy Link Button by A2Z Tools - https://a2z.tools/embed/copy-link-button
Related widgets
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
A QR code of the current page so desktop readers can carry it to their phone - card, button or floating.
-
An 'Email this page' button that opens the reader's mail app with your subject, message and the link.
-
A Print this page button that opens the browser's print dialog and stays off the printed copy.
-
Pinterest-style Save and share buttons over your article images on hover - without touching your markup.
