Peekko Chat
Add Chat Window

You can add a chat window to your own site, so that visitors can see what people are talking about in your chat room.

NOTE: this is a first beta version of this script. The CSS-Box will be not correct displayed in IE (i work for that).

Short features

• Your own AJAX Peekko Chat Box in less than 5 minutes
• Chat Box is draggable by the Header
• Display at startup the last 5 Messages
• Fetch every 20 seconds the next new 5 Messages (if available)
• No programming skills are need

Follow this simple steps to get your own dynamic AJAX driven Peekko Chat window of your channel at your homepage.

1 . Include JavaScript-Library

You have to include this javascript into your head-block of your site, for e.g.

...

2 . Include a div-block called "peekko"

After you have add the script library to your site, you have to include a div-block into your content at any place you like. This block simple looks like that:

A complete e.g. could look like the following XHTML.

Hello to me



...

The script will push the chat content into this div-block with an AJAX request.

3 . Style your chat box

You can simple style your chat box by your own desire. For that you have a few style elements witch can be called by here CSS-ID.

------------------------    
|    #peekkoHeader     |  <-- Drag handle
------------------------
|                      |
|                      |
|   #peekkoMessages    |
|                      |
|                      |
------------------------
|    #peekkoFooter     |
------------------------

You remember the whole box is called #peekko. The default layout is defined by that style:

#peekko
{
    height: 200px; 
    font-size: 9px;
    color: #101010;
    background-color: #ffffff;
    margin-left: 1em;
    width: 200px;
    border: dashed #5f8a00 1px;
    border-top: none;
}

NOTE: ... more CSS tips will follow ;o)

4 . Technical information

The "AJAX Peekko Chat Box" uses as request library Prototype an for special effects script.aculo.us.

The "AJAX Peekko Chat Box" in action: