Embed Google Hangout on my website (fully functional from y webpage)
I have successfully embedded Google Hangouts and the button onto my website. However, none of them is functioning.
I can see the Google Hangouts chat page and button on my website but I can't use features like signing in, send meeting invites etc. Everything else works on it except actually logging in. I just want to launch the google hangout from my website so all members can stay on my webpage but still use hangout meeting features.
Can anyone advise if Google allows this and whether I am missing some necessary code in order for it to work or it is simply not compatible with other sites?
Answer
You have a couple of options, but neither will perform in place of a chatroom in the manner I think you want it to.
You can embed a Google+ Hangout button as per Google Developers.
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.
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 Google+ signin flow. After the user has signed in, you can use the People get API with the special value me to get the authorized user's Google ID.
From various other People APIs.
From the user's public profile URL. These are usually of the form https://plus.google.com/.
From a Hangout app. Several APIs return a Participant object and the person.id field is the Google ID.
Google+ circle ID: An identifier of a circle. Note this this is strongly tied to the user that starts the Hangout; only IDs of circles that user owns will work. Obtaining a circle ID is only available via the Circles API for Google Apps.
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
However, if the user is not logged into their Google account, it will redirect to login screen.
The most basic version of embedding is this:
<script src="https://apis.google.com/js/platform.js"></script>
<div id="placeholder-div1"></div>
<script>
gapi.hangout.render('placeholder-div1', {
'render': 'createhangout',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }]
});
</script>
For better performance an asynchronous load would be better:
<html>
<head>
<title>Hangout button demo: Async load</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<div id="placeholder-div"></div>
<script type="text/javascript">
window.___gcfg = {
lang: 'zh-CN'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js?onload=renderButtons';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function renderButtons(){
gapi.hangout.render('placeholder-div', {
'render': 'createhangout',
});
}
</script>
</body>
</html>
Alternatively you could use Hangouts on Air and broadcast from your site, and interactively chat to others. It's quick and easy but isn't a substitute to a 'chat room' type interface as you need to be broadcasting.