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.
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Ā :
- Providing a container for the Wave (a simple
<div>will do) - Importing the Embedded Wave API
- Writing a few lines of Javascript to instanciate the WavePanel that will load the Wave
-
<div id=”waveframe”></div>
-
<script src=”http://wave-api.appspot.com/public/embed.js” type=”text/javascript”></script>
-
<script type=“text/javascript”>
-
wavePanel.loadWave(‘googlewave.com!w+pRNN6dgjA’); // This is where we specify the server type and wave ID
-
wavePanel.init(document.getElementById(‘waveframe’));
-
</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Ā :
-
<div id=”waveframe” style=”border:solid 1px #F90; height:500px;”></div>
-
<script src=”http://wave-api.appspot.com/public/embed.js” type=”text/javascript”></script>
-
<script type=“text/javascript”>
-
// Styling
-
var uiConfig = new WavePanel.UIConfig();
-
uiConfig.setFooterEnabled(true);
-
uiConfig.setHeaderEnabled(true);
-
uiConfig.setToolbarEnabled(true);
-
uiConfig.setBgcolor(‘#FFF’);
-
uiConfig.setColor(‘#000’);
-
uiConfig.setFont(‘verdana’);
-
uiConfig.setFontSize(’12px’);
-
// Wave embedding
-
wavePanel.setUIConfigObject(uiConfig); // Set the style
-
wavePanel.loadWave(‘googlewave.com!w+pRNN6dgjA’); // This is where we specify the server type and wave ID
-
wavePanel.init(document.getElementById(‘waveframe’));
-
</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 modif
y 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 public@a.gwave.com 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.
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Ā !
