CometChat Developer Documentation

Welcome Ninja!

You'll find comprehensive guides and documentation to help you start working with CometChat as quickly as possible. Let's jump right in!

Get Started    

Quick Start

The simplest voice, video and text chat SDK for your website.

First, create a sample!

Let's start by creating two simple HTML files and adding the basic CometChat code to it. This will be sufficient to see a working sample.

<!DOCTYPE html>
<html>
<head>
  <title>CometChat Test</title>
</head>
<body>


<script type="text/javascript">

  var chat_appid = 'XXXXX';
  var chat_id = 'SUPERHERO1';

  (function() {
    var css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.css';
    document.getElementsByTagName("head")[0].appendChild(css);
    var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);
  })();
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>CometChat Test</title>
</head>
<body>


<script type="text/javascript">

  var chat_appid = 'XXXXX';
  var chat_id = 'SUPERHERO2';

  (function() {
    var css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.css';
    document.getElementsByTagName("head")[0].appendChild(css);
    var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);
  })();
</script>

</body>
</html>

Be sure to replace chat_appid with your App ID from the CometChat Admin Panel -> Settings -> API Key.

Save both the files and then access them using two different browsers like Firefox and Chrome. You will be able to see CometChat at the bottom right corner of your site page.

Integrating CometChat with an existing website

Now, you're ready to add CometChat to your site.

Before you add the CometChat code, you need to know the code that you can use to output (e.g. echo $_SESSION['name']) the logged in user's unique ID and name.

Once you have this information handy, add the following code to your site template-

<script type="text/javascript">

  var chat_appid = 'XXXXX';
  var chat_id = '1';
  var chat_name = 'John Doe';

  (function() {
    var css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.css';
    document.getElementsByTagName("head")[0].appendChild(css);
    var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);
  })();
</script>

Once you've done this, CometChat will log you in and allow you to chat with other online users.

You're ready to explore more

There is a lot more to CometChat!. You can synchronize your users' friends list, restrict features using role based access control, launch a single private chat window, display our Embedded Layout (instead of Docked Layout) and a lot more.