CODEWITHSUNDEEP
javascripthtmlgoogle-hangouts
Programmar The SE
Programmar The SE

Reputation: 13

google+ hangout OnAir button Html tag

I got html button tags for normal hangouts but i didn't get any hangout button html tag for OnAir.
i am using the below tag, but i am unable to get onair button.

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-hangout" data-render="createhangout" type="onair"></div>

Can anyone get me the exact html code for onair google+ hangout?

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-div5"></div>
<script>
gapi.hangout.render('placeholder-div5', {
  'topic': 'cats',
  'render': 'createhangout',
  'hangout_type': 'onair',
  'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
  'widget_size': 72
});
</script>

After refresh the page, I got blank page.

Upvotes: 0

Views: 592

Answers (4)

Girish Bapat
Girish Bapat

Reputation: 64

I used normal and not onAir I dont think that creates any issue however after I added following code

 <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>

like below

   <!DOCTYPE html>
<html>
<head>

</head>
<body>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<div id="placeholder-div1"></div>
<script>
  gapi.hangout.render('placeholder-div1', {
    'render': 'createhangout', 'topic':'just test topic!!!','invites':[ { 'id' : '[email protected]', 'invite_type' : 'EMAIL' },
    { 'id' : '[email protected]', 'invite_type' : 'EMAIL' }],
    'initial_apps': [{'app_id' : '184219133185', 'app_type' : 'ROOM_APP' }]
  });
</script>
</body>
</html>

I also got blank page. when I looked by doing f12 I was getting following error

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

After doing lot of research found that this is because it is not running in any webserver hence I just started my python webserver from command prompt like below

python -m SimpleHTTPServer

it started webserver at port 80000 by giving following info on console

Serving HTTP on 0.0.0.0 port 8000 ...

And then called hangout.html from same as below http://localhost:8000/hangout.html it showed me button at last. Pasted this because I feel someone else could get help from this.

Upvotes: 0

Ahmad Abu Ghoush
Ahmad Abu Ghoush

Reputation: 91

You can use this :

<script src="https://apis.google.com/js/platform.js" type="text/javascript"/>
    <div id="placeholder-div5"/>
    <script>
            gapi.hangout.render('placeholder-div5', {
              'topic': 'cats',
              'render': 'createhangout',
              'hangout_type': 'onair',
              'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
              'widget_size': 72
        });
    </script>

or this :

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<div id="placeholder-div5"></div>
<script>
        window.onLoadCallback = function(){
        gapi.hangout.render('placeholder-div5', {
          'topic': 'cats',
          'render': 'createhangout',
          'hangout_type': 'onair',
          'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
          'widget_size': 72
    });}
</script>

Upvotes: 0

sghosh968
sghosh968

Reputation: 601

  • Check your browser console you might be getting

Uncaught ReferenceError: gapi is not defined

this error for sure which can sorted out if you add a script along with platform.js here's the script.

<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>

Upvotes: 0

Joseph
Joseph

Reputation: 1074

To get the Hang Out OnAir button you need to use the following code

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-div5"></div>

please refer the jsfiddle

https://jsfiddle.net/zk755cr9/42/

Upvotes: 1

Related Questions