hangoutiframer

hangoutiframer.appspot.com provides a simple interface for you to automatically generate an .xml file that wraps an HTML page. The HTML page will then appear as an iframe in your Hangout. It's convenient for developers who have AJAX or Flash in their Hangout Apps, as it means your app is running on your website, not googleusercontent.com.

It also means that, during development, you can host your html where ever you want, even behind an authorization wall.

Except for some mandatory includes and a slightly different startup (see below), developing with hangoutiframer is the same as gadget-based development.

Using hangoutiframer

Create a Hangout App project

Before you can use the Google+ Hangouts API, you need to create a project in the Google APIs console.

You do not need to enter a domain or edit any other information.

Host the skeleton app

You can download the skeleton app here:

skeleton.zip

The two required hangoutiframer features are:

<!-- Standard boilerplate to start hangouts.  Without these, your Hangout will not start. -->
<script src="//hangoutsapi.talkgadget.google.com/talkgadget/apps/gadgets/js/rpc.js"></script>
<script src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=1.4"></script>

and this:

<script>
function init() {
  // When API is ready...                                                         
  gapi.hangout.onApiReady.add(
      function(eventObj) {
      document.getElementById('showParticipants')
              .style.visibility = 'visible';
      }
  });
}

// Add startup listener immediately.  If you need an
// OAuth 2.0 access token, your startup will be different.
init();
</script>

Host this skeleton.html on a web server. Best case, you want to host on https all the time, like Google App Engines.

If you are only hosting skeleton.html, consider using hostbot2000, which hosts your file from Google Drive.

Hosting on localhost is OK, but will have two problems:

Set the App URL and run your hangout

Click Enter a hangout! to see your app!

You're done! Start hacking!

If something goes wrong

You may get an error that says 'Your app did not start.'

NOTE: If you get a 400 error in the JavaScript console, you probably didn't create a OAuth 2.0 Client ID. See above for help.

Other hints

However, remember to re-enable your cache when you are browsing normally!


https://hangoutiframer.appspot.com/forward/v0.4?u=https://myserver.com/app.html&scope=https://www.googleapis.com/auth/userinfo.email

and remember to add it to the additional scope list in the Google APIs console for your project.

Help and questions

Read more about building Hangout Apps at the Google+ Developer Documentation.

You can always ask questions at the Google+ Developers forum!