Google Talk Gadget

Table of Contents

• Overview
• Embedding the gadget into a webpage
• Launching a pop-out instance of the gadget
• Custom theming

Overview

The Google Talk Gadget is a browser-based instant messaging client for the Google Talk network. It's compatible with all platforms, and is supported by the following browsers:

• IE 5.5+ (Windows)
• Firefox 0.8+ (Windows, Mac, Linux)
• Safari 1.2.4+ (Mac)
• Netscape 7.1+ (Windows, Mac, Linux)
• Mozilla 1.4+ (Windows, Mac, Linux)
• Opera 8+ (Windows, Mac, Linux)

The gadget currently supports a number of the features available in the downloadable client, as well as some features that are unique:

• chatting
• group chat
• voice calls (if the downloadable client is also running)
• inline video and slideshow sharing
• chat history (with a Gmail account)

The Google Talk Gadget can be embedded into a webpage or into any iGoogle page, or can be launched as a pop-out. Its appearance can also be customized with CSS.

Embedding the gadget into a webpage

The Google Talk Gadget can be added to any webpage with the addition of some Google-generated code. The gadget is hosted in the Google Gadgets for your Webpage directory.

1. Navigate to the Google Talk Gadget page within the Google Gadgets for your Webpage directory.
2. Select the desired color, title, and size settings.
3. Click Get the Code.
4. Copy and paste the HTML from the text box into your page's code.

Embedding the gadget with custom theming

If you're using custom theming, embed the gadget directly into an iFrame on your page, without using the Google Gadgets for your Webpage code:

<iframe src="http://talkgadget.google.com/talkgadget/client?css=URL_encoded_value" 
scrolling="no" frameborder="0" style="overflow:hidden; width: 300px; height: 446px;">

Make sure to update the URL_encoded_value parameter in the example above with the URL-escaped path to your CSS file.

Launching a pop-out instance of the gadget

You can launch a pop-out instance of the gadget from any webpage, using either a simple HTML hyperlink, or with a button script created by Google.

To launch with a link, use the following URL:

http://talkgadget.google.com/talkgadget/popout

Google has also created a button that will launch a pop-out when clicked. Add the following code to your page:

<script src="http://talkgadget.google.com/talkgadget/button"></script>

The button will look and function as below:

Custom theming is supported when launching from a hyperlink. It is not supported when using the button.

Custom theming

The Google Talk Gadget recognizes custom Cascading Style Sheet (CSS) files that control the color and display of certain user interface elements.

• The style and class names must follow the specifications listed in this document. The format of the property values is also specific. Entries in the CSS file that do not follow these specifications will be ignored.
• A custom CSS file must be specified as a URL parameter when embedding a gadget into a web page, or when launching a pop-out version of the gadget.
• The domain on which the CSS file is hosted must be serving a properly configured crossdomain.xml file from the root level.

Style Specifications

The style selector, class, or id must match those listed in the table below. Color values must use the six-digit hexadecimal form. Three-digit shorthand form is not recognized. For example:

• Acceptable: #FF6600
• Not acceptable: #F60

In the Property column below:

• background-color controls the background color of the element
• color represents the text color
• icon-color affects any icons, such as arrows or plus symbols

background-alphas: 0.5, 1;
background-colors: #FF0000,#0000FF;

Crossdomain.xml

The domain from which your custom CSS file is served must also be hosting a properly-configured crossdomain.xml file at the root level. This file allows the Google Talk Gadget to load data (your custom CSS file) from your domain. Your file should contain:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="talkgadget.google.com" />
</cross-domain-policy>

Save the file at the root level of your domain.

Specifying the CSS file

The custom CSS file is specified using the css= URL parameter. This parameter can be included when embedding the gadget into an iGoogle page, embedding the gadget into a web page, or when creating links or buttons that launch a pop-out version of the gadget.

The value of css= must be a fully-defined URL, and must be URL-encoded.

Embedding into an iGoogle page

Custom CSS is not currently supported for gadget instances embedded in an iGoogle page.

Embedding into a web page

To add a custom-themed Google Talk Gadget to a web page, embed the gadget directly into an iFrame on your page. Add the css= parameter to the end of the URL:

<iframe src="http://talkgadget.google.com/talkgadget/client?css=URL_encoded_value" 
scrolling="no" frameborder="0" style="overflow:hidden; width: 300px; height: 446px;">

Launching a pop-out

Add the css= parameter to the end of the pop-out URL:

http://talkgadget.google.com/talkgadget/popout?css=URL_encoded_value