Add Google Cloud Print Button to Web Pages
Google Cloud Print technology is spreading among Internet users. It is a new technology that helps you to print any document on your home's printer from anywhere in the world and any device. Few weeks ago we have published on working of GCP.
This time I am mentioning how to add a GCP button to your website's pages. This button will enable your visitors to print the article on any cloud-connected printer. The button code is same for all devices (web, mobile, desktop) and works in a common fashion.
Before starting the coding let me inform you that I found this code at GCP Web Element page. But that code has a silly mistake. In the line there is a whitespace after print_ which should not be there. This is just a trivial thing for us but an error for computer. So it doesn't work correctly if you just do a copy paste. Here is the correct functional code.
Place this code where you wish to render the print button.
Now add this piece of JavaScript code anywhere in the page. But it is good to add it in <head> section. Some coders prefer to add JavaScript codes at very last of the page, so the main content loads first and then all other widgets.
Replace the [document title] and [document URL] with the title and URL of the document you wish to print. For reference you can view source of this page to find the implemented code of the button displayed below.
var gadget = new cloudprint.Gadget(); gadget.setPrintButton(cloudprint.Gadget.createDefaultPrintButton("GCP_Button")); gadget.setPrintDocument("url", "Add Google Cloud Print Button to Webpages - TechVigil", "http://www.techvigil.com/tips-tricks/284/Add-Google-Cloud-Print-Button-to-Web-Pages/");
It is not at all necessary that you use the default button design as provided by Google. You are free to make your own. In such case just replace the
cloudprint.Gadget.createDefaultPrintButton("GCP_Button")
parameter with this:
document.getElementById("custom_print_button")
Here, custom_print_button should be the ID of the HTML <button> element that you wish to use.
Sandeep Kumar
Founder & Editor-in-Chief | Software Architecture & System Design
Electronics engineer and tech enthusiast specializing in software architecture, system design, and building scalable tech solutions. Passionate about sharing real-world engineering experiences, practical lessons, and tech insights.