Having trouble with receiving callbacks for the Google Hangout button

I am having some issues with the following Hangout button JavaScript code. I was expecting a callback when the user clicks on the button, but it doesn't seem to be working. Can anyone see if there is anything wrong with it?

 gapi.hangout.render('hangout-button', {
  'render': 'createhangout',
  'topic': 'hangout_test',
  'invites': "[{'id': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96eeeeeed6f1fbf7fffab8f5f9fb">[email protected]</a>', 'invite_type': 'EMAIL'}]",
  'initial_apps': [{
    'app_id': "google_app_id",
    'app_type': 'ROOM_APP',
    'start_data': {
      "user_id": "user_id",
      "user_email": "user_email",
      "token": "token",
      "callback_url": "abc.com/hooks/hangout",
      "host": "abc.com",
      "callback_data": "user_data"
    }
   }],
  'hangout_type': "normal",
  'widget_size': 130
});
javascriptruby-on-railsgoogle-hangouts

Answer №1

To successfully integrate Hanogut into your project, you must ensure that you are listening for the onApiReady event and then invoking the getHangoutUrl function on the gapi.hangout object. This process is detailed in their documentation, which can be found at the following link: https://developers.google.com/+/hangouts/api/gapi.hangout.html#gapi.hangout.ApiReadyEvent

Below is a snippet of code that demonstrates how to accomplish this:

  gapi.hangout.onApiReady.add(function(eventObj) {
    var hangoutUrl = gapi.hangout.getHangoutUrl();
       // Once the URL is saved to a variable, make an Ajax call to pass it
    $.ajax({
        type: "POST",
        url: callbackUrl,
        success: successFunc,
        dataType: 'json',
        data: JSON.stringify({
                "hangoutUrl": hangoutUrl,
               })
      });
    });

For further information, please refer to:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to invoke a controller function from a window listener function

Is there a way to trigger the close function from window.onbeforeunload even when closing the app through 'right click' -> 'close window'? It seems that this.close() is not working in this scenario, possibly due to scope issues. The ...

javascriptangularjsnode.jsaddeventlistenerfs

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

javascriptphparraysiterationdomdocument

Storing information on the webpage when it is refreshed

My goal is to maintain the order of the data in the target ordered list even after a page refresh, achieved through jQuery prepend on document ready. Here's the code snippet: // when a refresh event occurs window.onbeforeunload = function(event){ ...

javascriptjqueryhtml

What is the method to retrieve just plain text (String) from an Ajax URL response?

I'm still learning how to use Ajax. My current project involves populating a dropdown based on the selected value from another dropdown in HTML. The issue I'm facing is that, while I am able to get the desired output, it includes unwanted HTML fo ...

javascriptajaxjsp

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

javascriptjqueryhtmlcss

What is the process for generating a dynamic array in typescript?

Looking to create a TypeScript dynamic array with the desired format: const display = [ { id: 1, displayName: "Abc1" }, { id: 2, displayName: "Abc2" }, { id: 3, displayName: "Abc3" } ] Attempted the following code ...

javascriptreactjstypescript

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

javascriptphphtmlcssbootstrap-4

Event handling in jQuery is not triggered when the input value is modified using VueJS

Currently, I am working on a major project that was originally developed in jQuery. We are now in the process of refactoring it using VueJS. Here's how the scenario looks: html <div id="app"> <input :value='myVal'/&g ...

javascriptjqueryvue.js

How do I transfer a constant from a vanilla JavaScript file containing DOM elements to my Express server?

Implementing Firebase authentication on my website, I'm looking to pass the user const into Express for routing purposes. Here's the function responsible for creating a new user: const signupForm = document.getElementById('signup'); if ...

javascriptfirebaseexpressdom

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

javascriptcssreactjsdom-events

Can Sequelize be used to perform queries based on associations?

I have designed a data structure that includes an n:m relationship between "Rooms" and "Users." My current goal is to remove or delete a room. To accomplish this, I need to verify if the user initiating the deletion process is actually present in the room ...

javascriptnode.jssequelize.js

Looking to pass the `Item Index` to functions within v-list-item-action in Vuetify?

Is there a way to pass the item index as a parameter to the function within the v-list-item-action element? Thank you in advance! <v-list-item v-for="(layer, i) in layers" :key="i"> <template v-slot="{ item, index }& ...

javascriptvue.jsvuetify.js

Utilizing Rails' find_by_sql method with an ID parameter

Just a quick query: what's the reason behind the second line of code working while the first one fails? Detail.find_by_sql("SELECT * FROM details INNER JOIN players ON players.id = details.player_id WHERE players.team_id = ?", self.id) Detail.find_by ...

mysqlruby-on-rails

Customize the jQuery datepicker by assigning a class to the first 17 days

How can I apply a class to only the first 17 days on a jquery datepicker calendar? I've attempted the following code, but it ends up adding the class to every day... beforeShowDay: function(date) { for (i = 0; i < 17; i++) { return [t ...

javascriptjqueryjquery-ui-datepicker

Reloading specific content on an ASP.NET CORE Razor Pages website

Hello, I am new to Razor pages and recently integrated the AdminLTE template into my Razor Page application successfully. In the _Layout.chtml file, I inserted the sidebar menu with anchor tags that link to specific pages, as well as the header bar and fo ...

javascriptasp.net-corebootstrap-4razor-pages

Next.js Static Paths Filtering

How can I retrieve only filtered paths from getStaticPaths? This function currently returns all posts export async function getStaticPaths() { const { data } = await axios.get(`${url}/category`, config); const paths = data.map((post) => { ...

javascriptnext.js

Separate an array in TypeScript based on the sign of each number, and then replace the empty spaces with null objects

Hey, I'm facing a little issue, I have an Array of objects and my goal is to split them based on the sign of numbers. The objects should then be dynamically stored in different Arrays while retaining their index and getting padded with zeros at the b ...

javascriptarraystypescriptalgorithmsplit

Ways to extract a value from an object with no properties using jQuery

In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...

javascriptjqueryajaxdatatables

Issues with creating a Dynamic Dependent Select Box using jQuery and PHP

Currently, I am working on a project for my university. The task at hand involves creating four select boxes: Country, State, City, and Course, where the options of three are dependent on the choice made in another. The user's selection will impact th ...

javascriptphpjqueryajax

The luminosity of MeshBasicMaterial in Three.js

In my current setup with threejs, I am utilizing MeshBasicMaterial for lighting effects. Each element contains a simulated point light within. I have assigned a variable named color, defined as rgb(random value, random value, random value). I am looking ...

javascripthtmlcolorsthree.jsrgb