Print Page Button Widget
Recipes, checklists, invoices, directions and opening times still end up on paper or in a PDF. Put a clear Print this page button where readers expect it; it opens the browser's own print dialog, where they can also choose Save as PDF, and it leaves itself off the printout.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="print-page-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
The button is an ordinary button that calls window.print() a moment after it is pressed, so its pressed animation is not caught in the print preview. What appears on paper is decided by your page and its print stylesheet (CSS inside @media print): if your theme hides navigation, sidebars and comments for print, the printout is clean; if not, the browser prints the page as it looks on screen. The kit draws the button in a Shadow DOM and hides both the button and the div that holds it in print, so it never appears on the printed sheet. If the page sets data-datalayer="on", a print press is also pushed to your own Google Tag Manager dataLayer as a2z_print.
Method
- Click -> window.print() after 30 ms; the browser shows its print dialog (including Save as PDF)
- Printed content = your page as styled by its @media print rules; the button and the div holding it are display:none in print
Worked examples
An icon-only button on a recipe card
Inputs: Icon only on, button text Print recipe, colours Outline
Result: A round outline button with a printer glyph, named Print recipe for screen readers; pressing it opens the print dialog
With Icon only the text becomes the button's accessible name instead of disappearing.
A page with a print stylesheet
Inputs: Site CSS includes @media print { nav, aside { display: none } }
Result: Printout shows the article body only - no navigation, sidebar or Print button
Your rules remove the site chrome; the kit removes its own button.
Limitations
- Print layout depends on your site's print stylesheet; without one the browser prints the page as displayed.
- Some in-app browsers (inside social media apps) do not support window.print().
Where publishers use it
- A recipe blog adding Print recipe above the ingredients for cooks who keep paper copies in the kitchen
- A clinic or dental practice page with pre-appointment instructions patients print and bring along
- An events page with a printable timetable and venue directions
- A school newsletter archive where parents print forms to sign
Questions
How do I make the printout look tidy?
Add print rules to your own site's CSS, for example @media print { header, nav, aside, .comments { display: none } }. The button only opens the print dialog; your stylesheet decides what the printed page contains. Many WordPress themes already include such rules.
Can readers save the page as a PDF?
Yes. Every major browser offers Save as PDF or Microsoft Print to PDF as a destination in its print dialog. The PDF is made by the reader's browser, so A2Z never sees it.
Why does the button not appear on the printed page?
Its stylesheet hides it for print, together with the div that holds it, so a printed recipe or invoice shows only your content. That is deliberate - a button cannot be pressed on paper.
Does it work on phones?
Yes. iPhone and Android browsers open their own print or share-to-print screens from window.print(); some in-app browsers inside social apps ignore it, in which case readers can use their browser menu.
Sources
- Window: print() method - MDN Web Docs . opens the print dialog to print the current document
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 Print Page Button https://a2z.tools/embed/print-page-button
<a href="https://a2z.tools/embed/print-page-button">A2Z Tools Print Page Button</a>
[A2Z Tools Print Page Button](https://a2z.tools/embed/print-page-button)
Print Page Button by A2Z Tools - https://a2z.tools/embed/print-page-button
Related widgets
-
An 'Email this page' button that opens the reader's mail app with your subject, message and the link.
-
A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.
-
A QR code of the current page so desktop readers can carry it to their phone - card, button or floating.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
-
Pinterest-style Save and share buttons over your article images on hover - without touching your markup.
