new earth online

Google Wave is the new sensational communication and collaboration tool that has recently been released in limited numbers to the public. In this article we take a look at how you'll be able to use Google Wave on your own blog and how to use the various APIs that are available.

To start with let us take a look at the method for embedding Waves on your own website. The idea I've had is that when it's opened up to all I'll be able to replace my comments system with a Wave (hopefully will be able to protect it from spam using my current solution) and as a support system for NEO products such as Linnaeus for the iPhone.

An embedded wave acts and behaves the same as a wave within the Google Wave application. An embedded wave even supports drag-and-drop functionality, allowing you to provide your users with a truly interactive collaboration tool.

Before you can embed a Wave on a page you will need to ensure it is including the appropriate JavaScript file, so you will need to add:

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>

By including this file it will use 12Kb of bandwidth without actually having loaded the contents of the Wave as it will in turn download styles, images, and eventually the content. The approximate value of 12Kb comes from it having loaded the error page when I tried to use it initially. This on it's own won't do anything though, you will also want some sort of placeholder that you can use for populating with the contents of the Wave. In this case I've simply created a div element called support_wave.

<div id="wave_container"></div>

Once the page has loaded we'll then have the div element available to use to add content to, so to the windows load event we want to add a call to the following function:

function initialize()
{
  var wavePanel = new WavePanel("http://wave.google.com/wave/");
  wavePanel.loadWave("googlewave.com!w+waveID");
  wavePanel.init(document.getElementById('wave_container'));
}

This function will initialise the variable wavePanel as a new WavePanel object and will load the contents of the specified Wave by replacing waveID with ID of the Wave you want to be displayed. Once it has loaded it will then take a DOM object as a variable to initialise the Wave panel. Since the sandbox was opened up the only way I know to get the waveID is to add embeddy@appspot.com to your Wave as it will include the WaveID or to look at the URL which ends in w%252B followed by the WaveID.

At this point the Wave is now embedded on your page, but as you can see from the Google Wave Embed API there are other things you can still do with it. One such thing you can achieve is that if the current viewer is logged in to Google Wave you can use the addParticipant() function to add them to the conversation automatically. You can also use the WavePanel.UIConfig object to change the look and feel of the embedded Wave to better suit your site. You might for example want to change the background colour, which you could do using the following code before the wavePanel.init function is called.

setUIConfig('blue', 'white', 'Georgia', '12pt');

This example uses a member function of the WavePanel class instead of using the UIConfig and uses the parameters in the order of background colour, text colour, font and font size (measure in points or pixels only). Alternatively you could try something along the lines of:

var myConfig = new WavePanel.UIConfig();
myConfig.setHeaderEnabled(false);
myConfig.setFooterEnabled(false);
myConfig.setBgcolor('blue');
myConfig.setColor('white');
myConfig.setFont('Georgia');
myConfig.setFontSize('12pt');
setUIConfigObject(myConfig);

This will use the UIConfig object instead and will then assign it to the WavePanel object. You will notice using this method allows you to also remove the header and footer from the Wave, but there are also a number of get functions that can be used to obtain the existing values for these properties.