Drive Adoption Using the integrate with Google Button

The Integrate with Google button lets visitors integrate your publicly-visible application from anywhere on the web with G Suite. An admin only has to click the button to install your app on their domain.

Getting Started

In general, to render the Integrate with Google button, you include the necessary JavaScript resources for rendering the button and then specify where you want the button in your site's HTML. You also provide parameters that link the button to your G Suite Marketplace listing.

There are various ways to render the button demonstrated in this section:

  • Tag markup
  • HTML5 markup
  • JavaScript

The simplest case is to render the button with tag markup.

Render with tag markup

To render using tag markup, include the platform.js script and place the <g:additnow> tag where you want the Integrate with Google button to render. The applicationid property of this tag specifies the application to integrate; see Integrate with Google button tag attributes for details on this property.

The following example shows a simple example for rendering a button using tag markup.

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<g:additnow applicationid="your-app-id"></g:additnow>

The script must be sourced as https and can be included at any point on the page.

Render with HTML5 markup

As an alternative to tag markup, you can specify the Integrate with Google button using standard HTML5 markup. To use HTML5 markup, include platform.js and set the class used in your HTML element to g-additnow.

The following example shows a simple case for rendering the Integrate with Google button using HTML5 markup.

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-additnow" data-applicationid="your-app-id"></div>

Render with JavaScript

By rendering the Integrate with Google button with JavaScript, you can target any element in your page and programmatically render the Integrate with Google button.

To render the Integrate with Google button with JavaScript, first include the JavaScript file:

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>

After you include the JavaScript file, you need to specify an HTML container to render as the Integrate with Google button for example:

<div id="placeholder-div"></div>

Finally, render the button by using gapi.additnow.render():

<script>gapi.additnow.render('placeholder-div', { 'applicationid': 'your-app-id' });</script>

The first parameter passed to the gapi.additnow.render method accepts the target HTML container used to host the Integrate with Google button. The second parameter is an object that contains the parameters that indicate the app to start, the mode, and other information. For more information, see the Integrate with Google button attributes.

Loading the script asynchronously

For improved page load time, you should load the JavaScript asynchronously. This approach allows the browser to load your page and the JavaScript file in parallel. For the best performance, place the following JavaScript before your \</body> tag:

<script type="text/javascript">
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

You can use the onload callback when using the asynchronous loading to start the execution of your code after all of the dependencies have loaded.

When you load the JavaScript asynchronously, you must specify script tag parameters differently. Use the following syntax instead:

<script type="text/javascript">
  window.___gcfg = {
    parsetags: 'onload'
  };
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

Integrate with Google button parameters and attributes

The Integrate with Google button contains attributes for configuring the button, the apps associated with the button, and attributes that are returned from a callback triggered when the user clicks the button.

Script tag parameters

These parameters are defined within the <script /> element. The parameters control the button loading mechanism that are used across the entire web page.

Key Value Default Description
parsetags explicit, onload onload Sets the loading mechanism to use.
onload
All Integrate with Google button on the page are automatically rendered after the page loads. See the deferred execution onLoad example.
explicit
Integrate with Google button are rendered only with explicit calls to gapi.additnow.go or gapi.additnow.render.

When you use the explicit load in conjunction with go and render calls that point to specific containers in your page, you prevent the script from traversing the entire DOM, which can improve button rendering time. See the gapi.additnow.go and gapi.additnow.render examples.

Integrate with Google button tag attributes

The following tag attribute is used to initialize the Integrate with Google button. It specifies the app that will be installed when an admin clicks on the button.

Parameter Type Description
applicationid Number Specifies the application that the button will integrate. This is the project number, and can be located in the App ID field of the G Suite Marketplace API configuration.

JavaScript API methods

The Integrate with Google button JavaScript defines two button-rendering functions under the gapi.additnow namespace. You must call one of these functions if you disable automatic rendering by setting parsetags to "explicit".

Method Description
gapi.additnow.render(
 container,
 parameters
)
Renders the specified container as a Integrate with Google button.
container
The container to render as the Integrate with Google button. Specify either the ID of the container (string) or the DOM element itself.
parameters
An object containing tag attributes as key=value pairs, for example, {"width": "300", "theme": "light"}.
gapi.additnow.go(
 opt_container
)
Renders all Integrate with Google button tags and classes in the specified container. This function should be used only if parsetags is set to explicit, which you might do for performance reasons.
opt_container
The container containing the Integrate with Google button tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all Integrate with Google button tags on the page are rendered.

Examples

The following sections show simplified examples of how you can use the Integrate with Google button.

Basic page using HTML5 markup

<html>
  <head>
    <title>Integrate with Google button demo</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="YOUR-APP-ID"></g:additnow>
  </body>
</html>

Basic page with custom tag markup

<html>
  <head>
    <title>Integrate with Google button demo: custom tag</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="your-app-id"”></g:additnow>
  </body>
</html>

Send feedback about...

G Suite Marketplace
G Suite Marketplace