Adding a Google Talk Chatback Badge to Google Sites

posted Aug 10, 2009, 7:54 AM by Brian Johnson   [ updated Aug 11, 2009, 7:47 AM ]


Tweet This Tweet This

For users of the Google Talk instant messaging service, Google provides a convenient "chatback" gadget that can be quickly and easily embedded into your website.  This gadget provides a simple way for your site visitors to communicate with you in real time.

With Google Sites, there are a couple of options for embedding this gadget into your site:
  • Globally - You can add the chatback badge to the sidebar of your site as a way to make it globally available across all pages of your site.  There are some limitations with this method, however, in that you cannot use any of the badge types that require the use of frames.  You can see a working example of this method in the navigation section of this page.
  • Single Page - If you want to include the chatback badge on just a single page of your site, you have a bit more flexibility in how the badge is displayed.  Not only can you make use of the same badges as with a Global setup, but you also have the ability to include any of the options that require the use of an IFRAME.

Creating a Google Talk Chatback Badge

Depending on whether you are using Google Apps or a standard Google / Gmail account, the process for creating a Google Talk Chatback Badge is essentially the same.  The only difference is where you go to create the badge:
By accessing one of the above links, you will have the ability to generate a custom badge for your site.  In fact, you can create multiple badges for use in multiple places across your website(s).

Building Your Badge

To build your badge, you will need to access the appropriate link from above and click on the Edit link in order to display the form you see in the image below.  (Note the "Disable old badges" link.  Selecting this link will permanently - and irreversibly - disable any existing Google Talk Chatback badges under your account.)


By filling in each of the available fields, you can easily customize your badge:
  • Title (optional) - The Title field will serve as the displayed link in the badge, if you enter a value.  Otherwise, the value entered into the "Your Nickname" filed will be used.
  • Your nickname - The Nickname field will replace the "Title" field if no value is entered for the title.  Otherwise, the nickname will only be displayed to the guest once a chat session is initiated. 
  • Style - The Style field is where you choose the look/feel for your badge.  This is also where you choose between badges that require the use of frames and those that don't.  The available options are:
    • Standard (default)
    • One Line Basic
    • Two Line Basic
    • Hyperlink and Status Icon (no frame)
    • Hyperlink Only (no frame)
    • URL Only (no frame)
  • Show your status message - This option is not available for all badge types, but when chosen, it will display your current status message.  (Status messages will only display the first twenty or so characters.)
Once you've configured your Google Talk Chatback Badge, click the Update Badge button.  The required code for your badge will appear in a text area below the form.  Copy this code for use on your Google Sites website.

Placing the Badge into your Site

With the July 29, 2009 changes to Google Sites, you should be able to simply paste the required code for your chosen badge directly into the HTML of your page.  To do this:
  1. Log into your site
  2. Navigate to the page on which you wish to display the badge
  3. Click Edit Page
  4. Click the HTML button in the edit toolbar
  5. Paste the code into the desired location.
    Note:  If you don't know where to look in the code, just paste the code into the very top of the HTML editor.  Once you save your update, you should be able to drag-and-drop the gadget into the desired location on your page.
If you wish to add the badge to your sidebar, the following steps should be followed:
  1. Log into your site
  2. Click the Edit Sidebar link (or, select More Actions >> Manage Site >> Site Layout)
  3. Add a text gadget to the sidebar area (or edit an existing text gadget)
  4. Click the HTML button on the edit toolbar
  5. Paste the code into the desired location
    Note:  If you don't know where to look in the code, just paste the code into the very top of the HTML editor.  Once you save your update, you should be able to drag-and-drop the gadget into the desired location on your page.

What will the Guest See?

When a guest clicks on the chatback badge on your site, a new browser window will open in front of them.  Across the top of this window, they will see a tab indicating they are involved in a "Guest chat" with you, along with links to the Google Terms of Service and Privacy Policy.  In addition, they will see your nickname (as entered in the "Your Nickname" field of the screen on which you created the badge) and a warning that they are chatting with an unidentified user.

What will the Host See?

When a guest clicks on the chatback badge on your site, the host (you) will be notified through a new instant messaging session.  For users of the Gmail web interface, the chat window will open in your browser along the bottom of your Gmail screen.  If you use a locally installed IM client, your notification will come through that client.