Peekko Chat
Peekko sur votre site

Vous pouvez ajouter une fenêtre de chat à votre propre site, pour que les visiteurs puissent voir de quoi parlent les gens dans votre salon de discussion.

Fonctionnalités

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

<script src="http://peekko.com/chat/ajax/peekko.js"></script>

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

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your site title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://peekko.com/chat/ajax/peekko.js"></script>
</head>
<body>

...

</body>
</html>

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:

<div id="peekko"></div>

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

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your site title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://peekko.com/chat/ajax/peekko.js"></script>
</head>
<body>

<h1>Hello to me</h1>

<div id="peekko"></div>

...

</body>
</html>

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)

The "AJAX Peekko Chat Box" in action:

Revised on February 23, 2006 08:04:10 by goofy

Peekko Chat Peekko sur votre site

Peekko Chat
Peekko sur votre site