Free customizable shoutbox/chatbox

Are you looking for a simple way to have your visitors leave a message on your website? Then this shoutbox tool is what you want. It is free and fully customizable by CSS. The only thing you need to do is to add three lines of HTML code to your website. Don’t worry about PHP, SQL and server load. Database processes are running exclusively on the 1336 server and the shoutbox content is sent directly to your website visitors via modern JavaScript technologies like jQuery, AJAX and JSONP.

What it does

The shoutbox tool displays the latest comments your website visitors have left and offers an opportunity to add comments. You can see a demo of it in the right sidebar of this site. Try it.

How to get it

Just insert the following code into your website. Replace xxx with a unique and alphanumeric string of your choice (max. 30 characters, avoid special characters and spaces). It probably makes sense to use the name of your site. Replace yyy with the maximum amount of messages displayed. Replace zzz with the language of your choice. Use en for English, de for German, es for Spanish and fr for French. Done. Please note that this tool is only free for non-commercial use. Please see the “What else can it do?” section below for commercial use.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://1336.de/shoutbox/shoutbox.js.php?1336id=xxx&limit=yyy&lang=zzz" type="text/javascript"></script>
<div id="shoutbox_1336"></div>

In case your website is already using the jQuery JavaScript framework, skip the first line of code.

If you have a smart CSS layout the shoutbox will most likely already be styled like the rest of your site. If not, read the section below.

How to customize it

The only things you inserted into your website so far are two JavaScripts and a div called shoutbox_1336. The first script loads the jQuery JavaScript framework from the jQuery server. The second script fills the shoutbox div with messages, input fields and the send button. In order to change the style of these elements you can simply add CSS code to your website. For example, to change the text color of your messages to red simply add these lines to the style area in the head of your HTML file.

#shoutbox_1336 .output {
	color: red;
}

CSS offers you the opportunity to change attributes like color, font, size, background, margins etc. of every single element or groups of elements respectively. To make it easier for you, I created a list of all elements with their corresponding CSS selectors. Please note that descendants inherit attributes from their ancestors.

element	CSS selector
whole shoutbox	#shoutbox_1336
output area	#shoutbox_1336 .shoutbox_1336_output
input area	#shoutbox_1336 .shoutbox_1336_input
output area unsorted list	#shoutbox_1336 .shoutbox_1336_output ul
output area unsorted list item (aka message)	#shoutbox_1336 .shoutbox_1336_output ul li
input area form	#shoutbox_1336 .shoutbox_1336_input form
input area text fields and button	#shoutbox_1336 .shoutbox_1336_input input
input area text fields	#shoutbox_1336 .shoutbox_1336_input .shoutbox_1336_text
input area button	#shoutbox_1336 .shoutbox_1336_input .shoutbox_1336_submit
input area name text field	#shoutbox_1336_name
input area message text field	#shoutbox_1336_message

What else can it do?

The basic version of the shoutbox tool is capable of all the aforementioned features and is free for non-commercial use. There are, however, additional features you can only use if you decide to support my work by donating a small amount of money via Paypal. This helps to cover server costs and makes it possible to keep the basic version free. There are three levels of support:

support level	min. amount donated	additional features
1	10 Euros	remove the “powered by” line
2	20 Euros	all the above + commercial use + badwords filter + you can delete unwanted messages + your id can only be used from a domain you specify
3	50 Euros	all the above + have me adjust the shoutbox to your website

Please use one of the donate buttons on the right to make a donation and send me a message.

What do you think about this tool? Feel free to leave a comment below (no registration required) or in the shoutbox on the right.

Keine ähnlichen Artikel.