Copy Contact Details Widget
Show the details people need to paste somewhere else - phone number, email address, postal address, account or practice codes - in a neat list where every line has its own Copy button, so nobody has to long-press and drag to select a number on a phone.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="copy-contact-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
Write one detail per line as 'Label | value', optionally followed by '| type'. When the type is left out the widget decides from the value itself, never from the label: an email address is 'email', 5-16 digits with an optional + and separators is 'phone', a web address or bare domain is 'url', a line with a number, a comma and a word is 'address', and everything else is plain 'text'. If you force a type that does not fit - a phone type on '0800 FLOWERS' - it falls back to text instead of making a bad link. The Copy button copies exactly the value shown on screen, character for character, never a hidden or reformatted version; its accessible name says what it copies ('Copy Phone: +44 20 7946 0123'), it changes to 'Copied' for two seconds and the result is announced politely to screen readers. With links on, each value is also tappable: tel: for phones, mailto: for email, a Google Maps search for addresses and the address itself for websites. Up to eight lines are shown; extra lines are ignored.
Method
- line = label | value [| phone|email|address|url|text]; label <= 40 characters, value <= 300; max 8 lines
- type detection order: email -> phone (^\+?[0-9]{5,16}$ after removing separators, no letters) -> url -> address (digit + comma + word) -> text
- links: tel:<digits>, mailto:<address>, https://www.google.com/maps/search/?api=1&query=<enc(address)>, https URL
- copy = navigator.clipboard.writeText(visible value), with a selection fallback on older browsers
Worked examples
Four detected types
Inputs: Phone | +44 20 7946 0123 / Email | [email protected] / Address | 14 Mill Lane, Northside, NW1 0AA / Practice code | ND-2041
Result: phone -> tel:+442079460123 | email -> mailto:[email protected] | address -> https://www.google.com/maps/search/?api=1&query=14%20Mill%20Lane%2C%20Northside%2C%20NW1%200AA | text, no link
Each Copy button copies the value exactly as shown, for example '+44 20 7946 0123' with its spaces.
A forced type that does not fit
Inputs: Freephone | 0800 FLOWERS | phone
Result: Shown as text with a Copy button, no tel: link
Letters are not converted into keypad digits, so no call link is guessed.
Limitations
- Eight lines at most; one value per line.
- Address detection is a simple heuristic - add '| address' to force it.
- Copying needs a user tap; it cannot copy automatically.
Where publishers use it
- A dental or medical practice listing its phone, email, address and the practice code patients quote to insurers
- A freelancer's invoice page with bank reference, VAT number and billing email, each copied separately
- A hotel's arrival page where guests copy the address into a taxi app
- A support page listing an order-help email and the hours line for international callers
Questions
Why not just let visitors select the text?
On phones, selecting a phone number or a long address precisely is fiddly and often grabs the label or a line break too. A Copy button copies the exact value, then confirms it.
Does copying work inside the iframe version?
Usually. The kit first tries the Clipboard API and, where a browser blocks it inside a frame, falls back to the older copy command, which browsers allow after a tap. If both are refused the widget announces that copying failed and the value stays on screen to select by hand.
How does it decide what is a phone number?
From the value alone: digits with an optional + and spaces, dots, dashes or brackets, 5-16 digits in total and no letters. A label that says 'Phone' does not turn '0800 FLOWERS' into a link - it stays plain text.
Is anything I list sent to A2Z?
No. The values live in your embed code and are only drawn in the visitor's browser. A2Z's anonymous counter records that a 'phone' or 'email' line was copied, not what it contained.
Sources
- Clipboard API and events - W3C . navigator.clipboard.writeText()
- Get started with Maps URLs - Google for Developers . Search action: https://www.google.com/maps/search/?api=1&query=
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 Contact Details https://a2z.tools/embed/copy-contact-button
<a href="https://a2z.tools/embed/copy-contact-button">A2Z Tools Copy Contact Details</a>
[A2Z Tools Copy Contact Details](https://a2z.tools/embed/copy-contact-button)
Copy Contact Details by A2Z Tools - https://a2z.tools/embed/copy-contact-button
Related widgets
-
An 'Email us' button that opens the visitor's mail app with your address, subject and a starter body.
-
One large click-to-call button, optionally showing the number, your opening hours and a text link.
-
A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
