Share Page QR Code Widget
Readers on a laptop often want to finish a recipe in the kitchen, follow a map on the move or show a product to someone across the room. A Share Page QR Code puts a scannable code of the page they are on beside the content, behind a QR code button, or on a small floating button - and it lets them download the code as a PNG.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="share-page-qr-code"></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
The kit resolves the address to encode (your fixed URL, the canonical link, or the address bar without fragment and tracking tags) and loads A2Z's copy of the qr-code-styling 1.8.4 engine only when a code first needs drawing - for the card, when it scrolls near the screen. The code uses error correction level M, rounded modules in your chosen colour on a white tile with a quiet margin. Because phones need contrast to read a code, a dot colour is accepted only if it reaches at least 4.5:1 against white by the WCAG luminance formula; a paler colour falls back to the default navy. Download PNG writes the 512 x 512 canvas to page-qr.png; Copy link copies the same address. The floating layout is hidden below 768 px wide by default, because a reader on a phone already has the page open.
Method
- Encoded text = fixed URL || canonical || location without #hash and tracking parameters; QR error correction M (about 15% recoverable)
- Dot colour accepted when (L_light + 0.05) / (L_dark + 0.05) >= 4.5 against #ffffff (WCAG relative luminance), else #10162b
- PNG = canvas.toDataURL('image/png') of a 512 x 512 code with a 36 px white margin, saved as page-qr.png
Worked examples
A pale brand colour
Inputs: Dot colour #ffcc00 (yellow)
Result: Code drawn in #10162b
#ffcc00 has only 1.51:1 contrast with white - below 4.5:1 - so the default navy is used.
A dark brand colour
Inputs: Dot colour #0a7a3b (forest green)
Result: Code drawn in #0a7a3b
5.44:1 against white passes the 4.5:1 rule.
The boundary
Inputs: Dot colours #767676 and #777777
Result: #767676 kept (4.54:1); #777777 replaced with #10162b (4.48:1)
The check uses the exact WCAG luminance formula, so neighbouring greys land on opposite sides.
Limitations
- Very long addresses produce denser codes that are harder to scan from a distance; short canonical addresses work best.
- The code needs the A2Z QR engine (about 48 KB) the first time it is drawn; pages with a strict Content-Security-Policy must allow https://a2z.tools.
- The floating button is hidden on screens narrower than 768 px unless you choose to show it.
Where publishers use it
- A recipe site placing the card under the ingredient list so cooks can follow the method on a phone at the stove
- A trade-show or conference page shown on a booth screen, where visitors scan to save the page
- A product page whose buyers compare on a desktop and pay on their phone with a mobile wallet
- A school or club notice board page that teachers print with the code so parents can open it later
Questions
Will the code work after the page address changes?
The code always encodes the address of the page at the moment it is drawn, so it is never stale on screen. A downloaded PNG or a printed copy, of course, keeps the address it was made with - set a fixed address if you plan to print it.
Why was my brand colour replaced with navy?
Phone cameras need strong contrast between modules and background. Your colour is kept when it reaches 4.5:1 against white - dark blues, greens, purples and greys usually do. Yellow, light green or pastel colours fall below that and the default navy #10162b is used instead, so the code still scans.
How large is the code and can readers print it?
On screen it is 132, 168 or 208 pixels square depending on the size you choose; the downloaded PNG is 512 x 512 pixels, enough for a sharp print a few centimetres across. Error correction level M means a little dirt or a crease does not stop it scanning.
Does the code track who scans it?
No. It encodes your page address exactly, with no redirect or tracking domain in between. If you want to measure scans, set a fixed address that includes your own campaign parameter, such as ?src=qr.
Sources
- ISO/IEC 18004:2015 - QR Code bar code symbology specification - ISO . error correction levels L, M, Q, H
- Web Content Accessibility Guidelines 2.1 - Contrast (Minimum) - W3C . relative luminance and the 4.5:1 ratio used for the dot colour check
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 Share Page QR Code https://a2z.tools/embed/share-page-qr-code
<a href="https://a2z.tools/embed/share-page-qr-code">A2Z Tools Share Page QR Code</a>
[A2Z Tools Share Page QR Code](https://a2z.tools/embed/share-page-qr-code)
Share Page QR Code by A2Z Tools - https://a2z.tools/embed/share-page-qr-code
Related widgets
-
A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.
-
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 Print this page button that opens the browser's print dialog and stays off the printed copy.
-
An 'Email this page' button that opens the reader's mail app with your subject, message and the link.
-
Pinterest-style Save and share buttons over your article images on hover - without touching your markup.
