Free & Easy to Use No Registration Required

API Documentation

Quick Links

Normal usage

Basic Implementation:

<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

Example:

var chat = new Chat(5, "John", "http://graph.facebook.com/1293950711/picture?type=large&width=140&height=140"); // Connects to chat ID 5, as "John" 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
    Override the .shoutBoxContainer CSS property.

Example:

<style> .shoutBoxContainer { height: 450px; } </style> <script> var chat = new Chat(5, "John"); </script>
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

Example - Custom Background Color:

<style> .shoutBoxContainer { background-color: #FF0000; /* Red background */ } </style> <script> var chat = new Chat(5, "John"); </script>
Test that in new browser

Text Translation

You can translate all texts in any langage you want.

You need to edit these proprties:

Example - French Translation:

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

Available Translation Properties:

chat.traductions = { 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' title='Ban user'>Ban</button>", receivedText: "..." };

Smileys / Emoticons

You are free to change/add/modify the existing emotions.You can do that with chat.smileys property.

Example - Add Custom Smiley:

var chat = new Chat(5, "John"); chat.smileys["(oo)"] = "<img src='https://www.shoutbox.com/chat/smileys/(lol).gif'>";
Test that in new browser

Default Smileys:

chat.smileys = { "(angry)": "<img src='smileys/(angry).gif'>", "(lol)": "<img src='smileys/(lol).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'>", ";)": "<img src='smileys/(happy).gif'>", ":)": "<img src='smileys/(happy).gif'>" };