Free & Easy to Use No Registration Required

API Documentation

Quick Links

Uso normal

Basic Implementation:

<script src="https://www.shoutbox.com/chat/"></script> <script> var chat = new Chat(id, username, avatar); </script>
  • id
    id del script que recibes al registrarte
  • username
    (opcional): puedes indicar el nombre de usuario para la conexión automática
  • avatar
    (opcional): enlace HTTP a la imagen del 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
Prueba esto en un navegador nuevo

Ancho y alto

El ancho de la shoutbox es 100 %; por defecto, la altura es: 360px

  • Para cambiar el ancho
    Embed the chat into a <div> element with the width of your choice.
  • Para cambiar la altura
    Override the .shoutBoxContainer CSS property.

Example:

<style> .shoutBoxContainer { height: 450px; } </style> <script> var chat = new Chat(5, "John"); </script>
Prueba esto en un navegador nuevo

Personalización CSS

Puedes personalizarlo fácilmente sobrescribiendo el CSS existente.

El CSS existente está en https://www.shoutbox.com/chat/css/shoutbox.css, échale un vistazo

Example - Custom Background Color:

<style> .shoutBoxContainer { background-color: #FF0000; /* Red background */ } </style> <script> var chat = new Chat(5, "John"); </script>
Prueba esto en un navegador nuevo

Traducción de textos

Puedes traducir todos los textos al idioma que quieras.

Debes editar estas propiedades:

Example - French Translation:

var chat = new Chat(5, "John"); chat.traductions.enterYourTextHere = "Entrez votre texte ici";
Prueba esto en un navegador nuevo

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

Puedes cambiar/añadir/modificar libremente los emoticonos existentes mediante la propiedad 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'>";
Prueba esto en un navegador nuevo

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