How to Create a Google Hangout Widget for Website


Google+ Hangout button for Website

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 and setup the Hangout as a regular Hangout or a Hangout On Air.

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.

Follow below steps to create Google Hangout Widget for Website

1. Create an App at Google Developers Console at https://console.developers.google.com

2. On the Top right, down arrow settings Tab, Click on Create a New Project. See below image.

Google Hangout Widget for Website

3. Now give it a project name, and go to Enable and manage APIs.

4. Now it will show list of sections to enable APIs for, in the Search Area, Type Hangouts and click
on Enable API.

5. After Enabling, click on API configuration, fill all the fields.

6. Now use below script to get Google+ Hangout button for Website


<script src=”https://apis.google.com/js/platform.js”></script>
<div id=”placeholder-rr”></div>
<script>
gapi.hangout.render(‘placeholder-rr’, {
‘topic’: ‘Website Chat’,
‘render’: ‘createhangout’,
‘invite_type’: ‘vivek@gmail.com’,
‘initial_apps’: [{‘app_id’ : ‘XXXXXX’, ‘start_data’ : ‘dQw4w9WgXcQ’, ‘app_type’ : ‘ROOM_APP’ }],
‘widget_size’: 275
});
</script>

Note: In the above app_id field replace the id with your the Project Number field from Google Deeloper Console. It will be at least 12 digits long, such as 123456789012.

Share me!