8.19. Google Instant Hangout Tool


EdX offers provisional support for this tool.

8.19.1. Overview

You can add the ability for learners to participate in instant hangouts directly from your course.

With instant hangouts, learners can:

  • Interact through live video and voice.
  • Share screens and watch videos together.
  • Collaborate on documents.

For a full list of instant hangout features, see the Google Hangouts page.


Learners who want to participate in instant hangouts must have a Google account. You should note this in your course materials.

8.19.2. Whitelisting Your Domain for Google Hangouts

If you are running an Open edX site, you must ensure that Google whitelists the site’s domain as a referer for Google Hangouts to work.

8.19.3. Instant Hangouts in Your Course

You can add one or more instant hangouts in your course. For example, you can add an instant hangout in the following places.

  • In a page, to provide learners with a hangout for the entire course. See Adding Pages to a Course for more information.
  • In an HTML component, to provide a hangout for learners working on that specific course unit. See Working with HTML Components for more information about creating HTML components.

An instant hangout is specific to the page it is opened from. For example, learners who join a hangout from one course unit interact among themselves, while learners who join a hangout from another unit interact in a different hangout.

8.19.4. The Learner Experience

When you add the instant hangout to your course, a control for the hangout appears on that page. The following example shows the control in a course unit. The control shows that the learner can start the hangout and be the first participant.

Image of the instant hangout control on a unit.

To start the hangout, the learner selects Start the Hangout. (After the first learner selects Start the Hangout, other learners see a Join the Hangout button.)

The following example shows the control in a page when a hangout has already started. The control has a Join the Hangout button, and shows that one other learner is already in the hangout.

Image of the instant hangout control on a page.

To join the hangout, the learner selects Join the Hangout.

If not already logged in, the learner is prompted to log in to Google:

Image of the Google login page.

Learners who do not have a Google account can create one from the login page.

After the learner has logged in to Google, the hangout opens in a separate browser window:

Image of the instant hangout.

8.19.5. Limitations

Currently, only ten learners can join a single instant hangout. You should note this in your course materials.

Learners in hangouts that are started from different pages in your course are counted separately. So you can have ten learners participating in a hangout started from one unit, and ten other learners in a hangout started from a different unit.

8.19.6. Create the Instant Hangout

To create an instant hangout in your course, follow these steps.

  1. Get the instant hangout JavaScript file from GitHub.

  2. Copy the text of this file into a text editor on your computer, and save the file as a JavaScript file. That is, when you save the file, change the extension from .txt to .js.


    Make sure that you copy the raw GitHub file, which does not contain formatting. Do not copy the formatted file. Any formatting will cause the JavaScript to not work correctly.

  3. Upload the JavaScript file to the Files & Uploads page in your course. See Adding Files to a Course for more information.

  4. In either a page or an HTML component, open the HTML editor.


    If you copy text from another source and paste it into the HTML editor, be sure to proofread the result carefully. Some applications automatically change quotation marks and apostrophes from the “straight” version to the “smart” or “curly” version. The HTML editor requires “straight” quotation marks and apostrophes.

  5. On the first line, add the JavaScript file you uploaded in a <script> tag, making sure you use full opening and closing tags.

    For example, if your JavaScript file is named instanthangouts-0.1.0.js, you enter the following script information.

    <script src='/static/instanthangouts-0.1.0.js'></script>
  6. After the <script> tag, add this tag.

    <div class='instanthangouts'/>
  7. Add any additional text and tags that you want.

    For example, the complete content could look like this example.

    <p>Join an instant hangout by selecting the button below. You can use the
    hangout to have live video discussions with other learners.</p>
    <div class='instanthangouts'/>
  8. Test the instant hangout in your course. Updating the JavaScript File

Google periodically updates the instant hangouts JavaScript file. To receive update notifications, go to the instant hangouts repository page, and then select Watch in the upper-right area of the page.

To use an updated JavaScript file in your course, we recommend that you copy the JavaScript from the repository into a file that has the same name as the file that you uploaded to your course. When you upload the new file, the new file replaces the previous file.


If you include version numbers in the file names of uploaded files, you will have to edit any HTML components or pages that include an instant hangout control every time that you update the JavaScript file.