Polymer - Google Hangout Button

Google Hangout is an element of Google Web components which brings the conversation with other people across the different devices.

You can use this element in your application, by running the following command to install it in your project directory.

bower install --save GoogleWebComponents/google-hangout-button

Example

Following example specifies the use of google-hangout button element in Polymer.js. Create an index.html file and add the following code in it.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
      <link rel = "import"
         href = "bower_components/google-hangout-button/google-hangout-button.html">
      <link rel = "import"
         href = "bower_components/iron-flex-layout/classes/iron-flex-layout.html">
      
      <style>  
         section {
            max-width: 300px;
         }
         section > div {
            padding: 5px;
         }
      </style>
   </head>
   
   <body>
      <section>
         <div class = "layout horizontal center">
            <span class = "flex">Default button</span>
            <span class = "flex"><google-hangout-button></google-hangout-button></span>
         </div>
         
         <div class = "layout horizontal center">
            <span class = "flex">Narrow button</span>
            <span class = "flex">
               <google-hangout-button width = "70"></google-hangout-button>
            </span>
         </div>
      </section>
   </body>
</html>

Output

To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm