Google+ Hangouts API

Publishing Hangout Apps

After you've got your Hangout app or extension running in the developer sandbox, to make it public for anyone to use, do the following:

  1. Verify your account at Chrome Web Store by going to Chrome Web Store Developer Dashboard and clicking the "Pay this fee now" link.
  2. Fill in the fields in the APIs Console by following the instructions at the APIs Console public fields.
  3. Find your Hangout app ID. Do this by copying the href value from the Enter a Hangout link at the bottom of the APIs Console. The app ID is the value assigned to the gadget ID, for example gid=123456789012; copy this value for use in the next step.
  4. Create a Hangout button to start your app in a Hangout. To enable users to find your app or extension, create a Hangout button. Then place the button on your website. Users then click on the button to start a Hangout with your public application or extension running inside it.

After a user starts your app or extension, its entry will appear in the Active Apps list on the left of the screen. The description and icons for each entry come from the fields you fill out in the APIs Console.

Active Apps list

The side bar includes buttons for interacting with the Hangout and also lists active app entries. Users can enable an app by clicking its icon in the list. After an app has been enabled, clicking its icon will toggle the visibility of the app in the Hangout. Users can disable the app and remove it from the active list by clicking the X icon next to the app entry. Removed apps are added to the Recent apps list under the ... View more apps button.

The side bar in the Hangout shows buttons for interacting with the
      Hangout, such as Invite People, Chat, Screenshare. Below these buttons,
      the side bar also lists recently used and suggested apps.
Figure 1: An example of Active Apps list, where Google Effects and Google Art Project are visible. YouTube Space Lab is loaded and thus present in the list, but it's not visible.

Recent Apps list

If the user hovers on ... View more apps, the Recent Apps list will appear next to the Active Apps list.

An app entry is in the Recent Apps list if it was loaded by the user during the current or a previous Hangout, but is not currently loaded. The most recently added apps appear at the top of the list, and the number of entries is limited to a maximum of 20.

A user can remove apps from the list by clicking the trash bin shaped icon on the top right corner of an app's entry.

The Recent Apps list shows entries for apps that were previously
      loaded, but are not currently.
Figure 2: The Recent Apps list

App and extension picker

If the user clicks the Add apps button, the app and extension picker will appear in the main area of the screen. The user can choose an application or extension from either the Featured or Recent tabs.

Each app has its own picker, which comprises two screens:

  • The initial screen includes a 220px x 140px image and a title.
  • When the user hovers over the app and extension picker, the 220px x 140px image is replaced by the description of the app, and an icon is added next to the title. The icon used is 32px x 32px for apps and 16px x 16px for extensions. The extension icon is smaller because the Hangout embeds it inside a puzzle piece image.
App Picker: initial state, hover state for an app, hover state for
      an extension.
Figure 3: The first image shows the initial state for the Google Drive app in the application picker. The second image shows the description as a result of hovering over the application picker. The third image shows that for an extension the icon is embedded inside a puzzle piece image.

APIs Console fields

In order to make your app public, go to the APIs Console choose your Hangouts project, click Hangouts in the left menu, and supply the following information.

Application URL

The URL to your Hangout gadget XML file.

Application type

The Hangouts API makes no distinction between an application and an extension; they are different in where they are placed in the Hangout.

  • A Hangout application, which is also called main application, is positioned in the main, central area of the screen, above the row of participants, and is visible to all participants.
  • A Hangout extension is positioned along the right side of the screen in a left-to-right language or along the left side in a right-to-left language. If two or more participants run the same extension, the extensions can share state with each other. A user can distinguish an extension from a main application in the app and extension picker by the appearance of the following puzzle piece, with the extension's 16px x 16px icon shown inside it:

Additional OAuth scopes

Check this box if your application requires additional OAuth 2.0 scopes.

Application title, description and icons

You can specify multiple locales for the title, application description and icons.

Locale

For each locale that you wish to translate to, choose the locale, then fill in the application's title, description and icons for that locale. If you do not specify strings and icons for a given locale, participants from that locale will see the 'Default' values.

Title

The name of your application.

Application description

This description appears in the Active Apps and in the Recent Apps lists, and in the app and extension picker. The text is truncated if it is too long.

This text is important because it will be seen by users who have never run your app. You should clearly describes what the app does.

Icons

Icons appear in the Active Apps and in the Recent Apps lists, and in the app and extension picker.

Image type Example Width (px) Height (px) Where the image is used
16x16 16 16 The full-color icon that represents your extension in the app and extension picker. When the user hovers over the app button, it changes from the black and white icon to this icon. This icon is not used by applications.
32x32 32 32 The full-color icon that represents your application in the Active Apps and in the Recent Apps lists, and in the app and extension picker.
220x140 220 140 The initial image that appears in the app and extension picker.

Support

You must supply URLs for Terms Of Service, Privacy Policy and Support contact information to make your app public.

Make public

To make your app public, you must check Make your application available to all users? checkbox and click Save.

Create OAuth 2.0 Client ID

If you haven't already, you must create an OAuth 2.0 client ID before your app goes public.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.