API Documentation

Quick Links

Utilisation normale

Basic Implementation:

<script src="https://www.shoutbox.com/chat/"></script> <script> var chat = new Chat(id, username, avatar); </script>
  • id
    id du script reçu lors de l’inscription
  • username
    (optionnel) : vous pouvez préciser le nom d’utilisateur pour une connexion automatique
  • avatar
    (optionnel) : lien HTTP vers l’image de l’avatar

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
Tester dans un nouveau navigateur

Largeur et hauteur

La largeur de la shoutbox est de 100 %, par défaut la hauteur est : 360px

  • Pour changer la largeur
    Embed the chat into a <div> element with the width of your choice.
  • Pour changer la hauteur
    Override the .shoutBoxContainer CSS property.

Example:

<style> .shoutBoxContainer { height: 450px; } </style> <script> var chat = new Chat(5, "John"); </script>
Tester dans un nouveau navigateur

Personnalisation CSS

Vous pouvez facilement le personnaliser en surchargeant le CSS existant.

Le CSS existant se trouve ici : https://www.shoutbox.com/chat/css/shoutbox.css, jetez-y un œil

Example - Custom Background Color:

<style> .shoutBoxContainer { background-color: #FF0000; /* Red background */ } </style> <script> var chat = new Chat(5, "John"); </script>
Tester dans un nouveau navigateur

Traduction des textes

Vous pouvez traduire tous les textes dans la langue de votre choix.

Vous devez modifier ces propriétés :

Example - French Translation:

var chat = new Chat(5, "John"); chat.traductions.enterYourTextHere = "Entrez votre texte ici";
Tester dans un nouveau navigateur

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

Vous pouvez changer/ajouter/modifier librement les émoticônes existantes via la propriété chat.smileys.

Example - Add Custom Smiley:

var chat = new Chat(5, "John"); chat.smileys["(oo)"] = "<img src='https://www.shoutbox.com/chat/smileys/(lol).gif'>";
Tester dans un nouveau navigateur

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'>" };