Google Wave Embedded API : the missing tutorial


Google Wave provides an "Embedded API" that can be leveraged to insert a single Wave into any HTML page.
Unfortunately, the official documentation is somewhat old and gives the procedure only for the sandbox waves, not the regular ones, so here is a very short tutorial to help you integrate waves in your own websites/blogs in minutes !

Finding the required parameters

First, create or open a Wave using the Google Wave website.

wave.png

When a Wave is selected and displayed, the page's URL follows this pattern :

https://<wave server>/<GUI configuration>:<wave type>!w+<wave id>.<some counter>

For example, our sample wave's URL is :

https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com!w%252BpRNN6dgjA

The two parameters we are interested in are :

  • The server : "googlewave.com" (was "wavesandbox.com" for the "developer preview" accounts)
  • The Wave's ID : here, "pRNN6dgjA" ("w%252B" is only the URL-encoded representation of "w+")

Embedding the wave

Now that we have the required parameters, let's embed the wave.
This is as simple as :

  1. Providing a container for the Wave (a simple <div> will do)
  2. Importing the Embedded Wave API
  3. Writing a few lines of Javascript to instanciate the WavePanel that will load the Wave
  1. <div id="waveframe"></div>
  2.  
  3. <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5. var wavePanel = new WavePanel('http://wave.google.com/wave/');
  6. wavePanel.loadWave('googlewave.com!w+pRNN6dgjA'); // This is where we specify the server type and wave ID
  7. wavePanel.init(document.getElementById('waveframe'));
  8. </script>

Styling the Wave

The default visual style is quite horrible, so let's pimp it a bit.

First, you can apply some CSS styling to the container (ex: <div>). Feel free to get as creative as you see fit here, but you will want to provide a better "height" value (500px to 1000px), because the default size is ridiculously small.

Then, you can style the Wave itself. Well, sort of, because the WavePanel creates an IFrame in your container, so your page's CSS have absolutely no effect on how the Wave is rendered.
To get around this, the API provides a "UIConfig" object that you can use to set some basic properties such as the background and foreground colors :

  1. <div id="waveframe" style="border:solid 1px #F90; height:500px;"></div>
  2.  
  3. <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5. // Styling
  6. var uiConfig = new WavePanel.UIConfig();
  7. uiConfig.setFooterEnabled(true);
  8. uiConfig.setHeaderEnabled(true);
  9. uiConfig.setToolbarEnabled(true);
  10. uiConfig.setBgcolor('#FFF');
  11. uiConfig.setColor('#000');
  12. uiConfig.setFont('verdana');
  13. uiConfig.setFontSize('12px');
  14.  
  15. // Wave embedding
  16. var wavePanel = new WavePanel('http://wave.google.com/wave/');
  17. wavePanel.setUIConfigObject(uiConfig); // Set the style
  18. wavePanel.loadWave('googlewave.com!w+pRNN6dgjA'); // This is where we specify the server type and wave ID
  19. wavePanel.init(document.getElementById('waveframe'));
  20. </script>

Please note that the header/footer/toolbar-related parameters seem to have no visible effect - none I could find though.

Everyone's welcome

Is your Wave is on a public website or blog, you may want to allow everyone to read and/or modify it. If you skip this step, only the current participants will see it.

To do this, get back to the standard Google Wave web interface, and add [email protected] to the Wave (you may need to add it to your contacts too). Then, click on its icon in your Wave and select "Full access" or "Read only" in the dropdown list. If you select Full Access, be aware that everyone will obviously be able to interact with the Wave and add, edit or remove replies.


public.png

Conclusion

Embedding a Wave is trivial once you get the correct instructions ; I hope Google will update their online docs soon ! In the meantime, I hope this tutorial has been of some use to you.

The sample Wave use throughout this article is in "Full Access" mode, so feel free to drop a comment !


Fil des commentaires de ce billet

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.