GCP Web Element

The Google Cloud Print Web Element is the simplest way to add GCP functionality to your web site or application. Pass in a document to print, either by content or by URL, and get a Google Cloud Print dialog. If the user is not logged in to GCP, they are first asked to log in with their Google Account. This element is optimized for both desktop and mobile browsers.

To generate a simple print button, start by defining a <div> element where you would like the print button to show up:

<div id="print_button_container"></div>

Next, add the following JavaScript to the <head> component of your HTML page:

<script src="https://www.google.com/cloudprint/client/cpgadget.js">
  window.onload = function() {
    var gadget = new cloudprint.Gadget();
        cloudprint.Gadget.createDefaultPrintButton("print_button_container")); // div id to contain the button
    gadget.setPrintDocument("[document mimetype]", "[document title]", "[document content]", "[encoding] (optional)");

For specifying a URL in gadget.setPrintDocument(), use mimetype "url", and replace [document content] with the specific URL that you want to print:

gadget.setPrintDocument("url", "Test Page", "https://www.google.com/landing/cloudprint/testpage.pdf");

To specify binary content in gadget.setPrintDocument(), replace [document mimetype] with the mimetype of your content, [document title] with your title, [document content] with your base64 encoded content, and [encoding] with "base64":

gadget.setPrintDocument("image/jpeg", "JPG Image", base64EncodedJpg, "base64");

To use a custom button, replace the parameter in the gadget.setPrintButton() call with:


where "custom_print_button" is the ID of the HTML element that you wish to use.

You can also manually invoke the Cloud Print dialog, after importing cpgadget.js, using the following code:

var gadget = new cloudprint.Gadget();
gadget.setPrintDocument("[document mimetype]", "[document title]", "[document content]", "[encoding] (optional)");

In addition to most standard document/image formats, we support the following special mimetypes:

"url"URL to be printed
"dataUrl"Content of a URL data document as a string
"google.drawing"Document ID of a Google Drawing
"google.drive"ID of a file in a user's Google Drive
"google.kix"ID of a Google Document
"google.mail"ID of a Gmail thread
"google.presentation"ID of a Google Presentation
"google.spreadsheet"ID of a Google Spreadsheet