What is Reverb?

Reverb IM is a chat box for your site.

With 3 lines of HTML you can add a widget which allows all visitors to your site to talk to each other. If you like you can add different channels (sometimes called 'chat rooms') to different parts of your site.

Any website that currently has an IRC channel might consider using Reverb instead.

If the default appearance of the widget doesn't fit with your site, don't panic! The Reverb widget is fully customizable using our pre-made themes, our easy-to-use point and click editor, or using your own CSS skills if you're so inclined.

How much does it cost?

Reverb is free for basic use. You don't even need to register to get started.

See our pricing page for more details.

What do I need to know to use Reverb?

Reverb is very simple to set up, but there are few things you will need to be comfortable with before starting.

You will need to be able to access and edit your website. How you do this differs from website to website so you'll need to know where the HTML for yours is. You will also need to do some very basic editing of the HTML for each page you wish to add a widget to. For most people this will be a simple copy and paste operation in a text editor.

How does it work?

The 3 lines of code that you add to your site create a little chat box widget on your page. The widget connects to our servers, where we create and keep a private chat channel specifically for you. The messages are not stored permanently on our site, only cached for a few minutes, so that new users can see what's just been said when they connect.

The widget is like a separate website nestled inside your site. It lives inside its own container (called an iframe), and cannot see or interfere with your site.

Does it work with WordPress?

Yes! Reverb is an easy way to get a WordPress chat box. Check out these instructions.

Basic Integration

It's really simple to get started with Reverb. To enable a basic chat widget on your site, all you need to do is paste the following code between the <head> and </head> tags of your webpage:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://reverb.utopia-game.com/chat/loader/" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE'});});</script>

Every webpage has a <head> ... </head> section, which contains information like the title and javascript code. The first line links to a Google hosted copy of jQuery, which is a very common javascript helper library. The second line is a link to the code for Reverb, hosted on our servers and the final line uses that code to start Reverb and puts the widget on your page.

Themes

There are three ways to customize the appearance of the Reverb widget. You'll need to log in to take advantage of these features.

Pre-made themes

The simplest way to change how the widget looks is to use one of our themes. We've taken some time to create a few simple themes that should look nice on many sites.

Please create an account to view the themes.

Having decided which theme you would like to use, you will need to modify the setupReverb function you added to your webpage. For instance, if you decided to use theme #1 it would look like this:

setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', theme_id:1});

Theme editor

If you have a specific color-scheme in mind to match your page then our point-and-click theme editor might be useful to you.

Using a simple graphical interface, you can pick the colors you want for every part of the widget. It is also possible to adjust the height and width of the widget.

Roll your own stylesheet

If you need even more flexibility than the two options above, and are not afraid to get stuck into some CSS, then we've got a solution for you too.

Use this file as a basic template:

Then in the setupReverb line, add an 'extra_css' section like so:

setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', extra_css: 'http://example.com/path/to/your.css'});
Your CSS file will be added last to the widget styling, so you can override the default appearance however you see fit.

If you do not have a developer_id, create an account to be issued one. The above examples will be personalized for you once you are logged in.

Advanced Integration

There are a few extra configuration options that can be used with the setupReverb function, that allow further customization.

Default username

If you already know some information about your user and would like to provide a value for the username field, you can do so like this:
var username = 'Alice';
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', default_display_name: username});

The feature does not provide any security. A name will be reserved for a user for the duration of their connection, but once they disconnect, anyone can use that name. If you would like to have secure authentication for your users, please see the next section.

Channel name

You can also change the name of the channel from the default value of 'Chat'.
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', channel_name: "Chatterbox"});
You can do both of the above at once like this:
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', channel_name: "Chatterbox", default_display_name: 'Bob'});

You can change the name of the channel for cosmetic reasons if you wish, but it becomes especially important if you wish to have multiple channels. Channels are uniquely identified by their name. Channels with different names are distinct and isolated from each other. The channel gets automatically created the first time someone attempts to connect.

Multiple widgets

It is possible to configure multiple widgets to appear on the same page. This might be useful if you have two or more overlapping populations of users e.g. A global chat for everyone on your site, and another for a particular team or group. Use the widget_id parameter to identify each widget.
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', widget_id: 1, channel_name: 'Sitewide chat' });
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', widget_id: 2, channel_name: 'Team A chat' });

If you wish you can use a different theme for each.

setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', widget_id: 1, theme_id: 3, channel_name: 'Sitewide chat' });
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', widget_id: 2, theme_id: 4, channel_name: 'Team A chat' });

Security and Authentication

The default behavior for Reverb does not provide any security or authentication for your users. This might be sufficient for your needs if your users do not already have an identity on your site, or have no expectation of a persistent username. We do provide an authentication mechanism, which requires some integration with your site beyond the copy and paste code used above. This functionality is intended for sites that have a user authentication system already in place, which can be used to identify each user.

To enable external authentication, please modify your account settings.

In the server-side code for your website, you will need to fetch the JSON object available at this address:

http://reverb.utopia-game.com/chat/get_ticket/YOUR_DEVELOPER_ID_HERE/CHANNEL_NAME/USER_NAME/?secret=YOUR_API_SECRET_HERE

In the above URL, CHANNEL_NAME is the channel you wish to authenticate the user for, USER_NAME is the user's public identifier on your site, which will be used as their public Reverb username. Ensure the user is authenticated before this point. Since this is just a normal HTTP call, it should be callable from whatever language your site is written in, no matter how strange! Some examples are Python, PHP, Ruby, Java or ASP.net.

Be extremely careful that this function is only called from your site's server, and not the client side/javascript. The Reverb API secret key (password) is private for you only, and could be used for malicious purposes if revealed publicly. The request (and API secret) should pass directly from your server to our server without passing through the client.

The above REST webservice will return a result like this:

{"ticket": "152897d4d9d34dfb9903424e7333097e", "timeout": 3570}

This ticket needs to be passed to the javascript of your site, and used to initialize the setupReverb function like this:

// Programatically write this value to your page's javascript
var ticket = "152897d4d9d34dfb9903424e7333097e"
setupReverb({developer_id: 'YOUR_DEVELOPER_ID_HERE', channel_name: 'channel_name', ticket: ticket});
This ticket is valid for the number of seconds specified by the timeout value. (Although this value will usually be the same, please do not hard-code the timeout value into your code, as we reserve the right to change it.) Please refresh the ticket, by calling the get_ticket webservice before the timeout is reached. Each call to this webservice replaces the previous ticket with the newly issued one.

This system ensures that once a ticket has been issued that the username has been reserved for that user.