If you are a webmaster, you might be thinking of how you can make your website more interactive, or even allowing your visitors to collaborate with one another. Most of the time, implementing a collaborative function on your site can be a labour and time intensive process. However, with TogetherJS, you can now easily add a real-time collaboration feature to your site with minimal technical/coding skill.

TogetherJS is a free, open source collaboration tool created by Mozilla (the team behind the Firefox browser). The whole collaboration tool is wrapped in a Javascript library and all you need to do is to add the Javascript code to your site to enable real-time collaboration feature for your site.

Installation

To get started, all you have to do is to add the following line of code to your website theme/template, preferably at the end of the page, before the

tag:

<script src="https://togetherjs.com/togetherjs-min.js"></script>

To allow users to start a collaboration session, simply add a “Start Collaboration” button to your site. Paste the code to the position where you want the button to show up.

<button onclick="TogetherJS(this); return false;">Start Collaboration</button>

Alternatively, you can add a CSS class to the button so you can style it to suit your theme.

<button class="collaboration-btn" onclick="TogetherJS(this); return false;">Start Collaboration</button>

That’s all you need to do. Let’s look at how it performs.

Usage

When someone clicks on the “Start Collaboration” button, a popup window will show up.

Clicking the right arrow in the popup will reveal a field for the user to enter his/her name and optionally, upload his/her profile photo.

The next screen to the right shows the link that the user can share with his/her friends to get them to join in the session.

Lastly, click the “I’m ready” button to start the session.

When invited guests click the link to go to your site, they will see a “Join Session” popup box. Once they join the session and setup their profile, their avatar will show up in the sidebar.

Things that you can do include:

Chat

Audio Chat

The audio chat is an experimental feature and is subjected to the support of the browser.

Synchronized mouse movement and real-time changes

Below is a screencast where I place two browsers side by side and see how the mouse movement of one user show up in another user’s screen. I also typed in the comment field and the text show up immediately in the other browser.

Conclusion

The features shown above are only a small part of what you can do with TogetherJS. You can check out its documentation for more ways to extend its functionality. There are ton of things that you can do on your site with TogetherJS and with such a simple implementation, you are only restricted by your own creativity.