API

Normal usage

<script src="https://www.shoutbox.com/chat/chat.js.php"></script>
<script>var chat = new Chat(id, username, avatar);</script>


id : script id you receive when you register

username : (optional): you can specify the username of the user so he auto connects

avatar : (optional): http link to avatar image

var chat = new Chat(5, "John", "http://graph.facebook.com/1293950711/picture?type=large&width=140&height=140");
// connects to id chat 5 , as John and with facebook avatar Test that in new browser

Width and height

The width of the shoutbox is 100%, by default the height is: 360px


To change the width: embed the chat into a <div> element with the width of your choice.

To change the height: over ride .shoutBoxContainer CSS

var chat = new Chat(5, "John");

<style>
.shoutBoxContainer {
 height:450px;
}
</style>
Test that in new browser

Customization CSS

You can customize it easily over riding the existing CSS.

The existing css is located in https://www.shoutbox.com/chat/shoutbox.css, have a look at it


var chat = new Chat(5, "John"); // connects to id chat 5 , as John
<style >

.shoutBoxContainer {
background-color: #FF0000;

}
</style>
Test that in new browser

Text Translation

You can translate all texts in any langage you want.

You need to edit these proprties:


var chat = new Chat(5, "John"); // connects to id chat 5 , as John
chat.traductions.enterYourTextHere = "Entrez votre texte ici"; Test that in new browser

welcome:"Welcome {0}"
userOnline:"{0} user online"
usersOnline:"{0} users online"
enterYourTextHere : "Enter your text here"
serverMessage: "<div class='shoutServerText'>{0}</div>"
enterAdminPassword:"Enter admin password"
imageAvatar: "<img src='{0}' class='shoutBoxAvatar'>"
youAreAdminNow:"You are admin now"
mp3: "chat/dink.mp3"
addUser : "<div class='shoutBoxUserItem' data-id={0} id='shoutBoxUser{1}'>{2}{3}</div>"
banText : "<button class='shoutboxBanBtn' alt='Ban all messages from this user' title='Ban all messages from this user'>Ban</button>"
receivedText:"<div data-id={0} data-ip={1} class='shoutText'>{2}<span class='shoutDate'>{3} </span><span class='shoutUserText'>{4}</span>: {5}<button class='shoutboxBanBtn'>ban</button><button class='shoutboxDelBtn'>del</button></div>

Smileys / Emoticons

You are free to change/add/modify the existing emotions.You can do that with chat.smileys property.
var chat = new Chat(5, "John"); // connects to id chat 5 , as John
chat.smileys["(oo)"] = "<img src='https://www.shoutbox.com/chat/smileys/(lol).gif'>"; Test that in new browser

chat.smileys = {
"(angry)":"<img src='smileys/(angry).gif'>",
"(lol)":"<img src='smileys/(lol).gif'>",
"(angry)":"<img src='smileys/(angry).gif'>",
"(love)":"<img src='smileys/(love).gif'>",
"(sorry)":"<img src='smileys/(sorry).gif'>",
"(why)":"<img src='smileys/(why).gif'>",
":D":"<img src='smileys/D).gif'>",
";(":"<img src='smileys/;(.gif'>",
"(sorry)":"<img src='smileys/(sorry).gif'>",
";)":"<img src='smileys/(happy).gif'>",
":)":"<img src='smileys/(happy).gif'>"