Google Hangout button

The Hangout button lets you launch a Google Hangout directly
from your site. When you use the button, you can set up the Hangout in a variety
of configurations. For example, you can specify Hangout apps that launch along
with the Hangout.

You can customize the Hangout button to meet the needs of
your website by modifying the button size, loading the button
when the page loads, or selectively showing the button using JavaScript.

Hangout button code

In general, to render the Hangout button, you include the necessary
JavaScript resources for rendering the button and then specify where you want
the button in your site's HTML.

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

Tag markup

HTML5 markup

JavaScript

Lets start with the simplest case, rendering the button using tag markup.

Render button using tag markup

To render using tag markup, include the platform.js script and place the
<g:hangout> tag where you want the Hangout button to render.The following
example shows a simple example for rendering a button using tag markup.

The first parameter passed to the gapi.hangout.render method accepts the
target HTML container used to host the Hangout 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 Hangout button attributes.

Deferred execution with onLoad and script tag parameters

Use the onload callback to execute widget code after all dependencies have loaded.

Inviting people to the Hangout

You can specify a list of people to invite to the Hangout when it starts.
The list is only a suggestion to the user that starts the Hangout. Before the
Hangout begins, that user will be able to skip the invite or change
the list of people.

You can specify an invite (object representing who to invite) via three different
identifiers:

Google+ profile ID: This ID is tied to a specific Google+ user.
You can obtain this ID in several ways:

From the user's public profile URL. These are usually of the form
https://plus.google.com/<ID>.

From a Hangout app. Several APIs return a Participant object
and the person.id field is the Google ID.

E-mail address: A standard e-mail address.

Alternatively, you can invite a phone number to the Hangout. You can invite only a single
phone number, and you cannot combine a phone number with inviting other people as documented
above.

Important: The set of identifiers you use to specify invites will be present in the
source of your page. If this list is sensitive in any way, you should protect
access to the page.

Adding a Hangout app to the button

If you are launching a Hangout app along with a Hangout, you must set the
Hangout button's app_id parameter to the project number of your
Hangout app or extension. To get the project number, go to the
Google API Console,
select the Hangouts project you want the button to start, then on the Overview
page, copy the number from the Project Number field.
It will be at least 12 digits long, such as 123456789012.

The following code uses HTML5 markup to create a Hangout button
that will launch a Hangout app. Configure the button to launch your app
by specifying the application in the JavaScript array of apps
data-initial_apps.

The Button examples section has more use cases showing you how to load
Hangout apps when the user clicks the button.

Hangout button attributes

The Hangout button contains attributes for configuring the button,
the apps associated with the button, and contains 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
language and
button loading mechanism that are used across the entire web page.

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.hangout.go and
gapi.hangout.render examples.

Hangout button parameters

The following parameters are used to initialize the Hangout button.
These parameters determine the type of Hangout to create and the apps
to launch when the Hangout starts.

Parameter

Type

Description

render

String

Specifies how to render the Hangout button.
Currently this parameter must have the value
‘createhangout’.

topic

String

Pre-populates the topic field for Hangouts on Air. Note that
users can change the topic of the Hangout after they have joined.

invites

Array

This array of JavaScript objects specifies the list of people to invite
when the user clicks the Hangout button. Invalid objects and parameters
are ignored. See the section above on
Inviting people for a full
explanation, and the section below on Invite parameters
for a list of parameters to the members of this array.

initial_apps

Array

This array of JavaScript objects specifies the Google Hangout
apps to launch when a user clicks the Hangout button.
Invalid objects and parameters are ignored.
The section below on Initial App Parameters,
describes the parameters for the members of this array.

hangout_type

HangoutType

Specifies what type of Hangout should be started. The following values
are supported:

normal

(Default) Launch the Hangout app without broadcasting to YouTube.

moderated

Launch the Hangout app with Control Room enabled.

widget_size

Number

Specifies the width of the button. The default value is
136.

Invite parameters

These parameters specify the people invited to the Google Hangout
when the user clicks the button. The invites are specified in an array of
JavaScript objects, each with the following parameters set.

Parameter

Type

Description

id

String

The identifier to use

invite_type

String

Specifies the type of invite. The following values are supported:

PROFILE

A Google+ profile ID.

EMAIL

A standard e-mail address.

PHONE

A phone number. Note that phone numbers and the fields above
are exclusive: you may list any number of profile or e-mail invites
OR a single phone number, but not both.

Initial app parameters

These parameters specify the applications that are started along with
the Google Hangout when a user clicks the button. Each application
passed in the array of Hangout apps must have these parameters set.

Parameter

Type

Description

app_id

String

The project number retrieved from the
Google API Console
that corresponds to the application that this button launches.

start_data

String

This optional parameter specifies data to be passed to the
initial instantiation of the app. Only the first participant to
join the application has this value present in the response
from gapi.hangout.getStartData.
If you want this data to be referenced later, store the data in
the shared Hangout state using the
gapi.hangout.data
methods.

app_type

Enum

This optional parameter specifies the type of Hangout app
created when the user clicks the button. Setting this parameter
changes the way that Hangout applications are loaded for the
Hangout and its participants. The following values are supported:

LOCAL_APP

Launches the app for only the user who clicks the widget.

ROOM_APP

Launches the app for every participant who joins the Google
Hangout. The button defaults to this value.

Button sizes

The button can be rendered at various sizes and renders differently when you
specify the button is to be rendered as a Hangout On Air. The following table
lists example sizes.

Google Hangout app is not loading

First, make sure that you are specifying a valid app ID, which you can find as
described in the Initial app parameters section.

Next, you need to make sure that the JavaScript array of apps is valid, and is
in fact an array as opposed to just a JavaScript object. In the following
example where there is an issue, a JavaScript object is passed instead of an
array which will prevent the app from including the Google Hangout app: