Get your free shoutbox chat for your site
Free to use on your blog or your website.
shoutbox.com
API
Normal usage
<script
src="https://www.shoutbox.com/chat/"></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
// 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/css/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/mp3/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>
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/mp3/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["(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'>"