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    

Launch CometChat

CometChat provides two layouts that you can use on your website.

Docked Layout

The Docked Layout is a chat widget that can float on either side of your page.

Launch CometChat

You can add this code to your site template-

<!-- USER MANAGEMENT CODE -->

<!-- Refer to User Management guide for this code -->

<!-- LAUNCH COMETCHAT CODE -->
  
<script type="text/javascript">
  var chat_appid = 'XXXXX';
  
  var chat_position = 'right';

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

chat_appid

Your App ID

Yes

chat_position

Position of widget (right/left)

No

Launch Private Chat

To launch a private chat window, use the following Javascript code, on any site page (which has the Docked Layout code from above).

<a href="javascript:jqcc.cometchat.launch({uid:'1'});">Chat with Alex</a>

Launch Group Chat

To launch a group chat window, use the following Javascript code, on any site page (which has the Docked Layout code from above).

<a href="javascript:jqcc.cometchat.launch({guid:'1'});">Chat in Hangouts group</a>

Want to hide the Chat tab?

For some use cases, you may not want to show the CometChat tab at all. You can add #cometchat_userstab {display:none;} CSS style in CometChat Admin Panel -> Settings -> Editor.

Embedded Layout

The Embedded Layout can be added to any part of the site. Think of it as an all-inclusive chat solution within your site.

To add Embedded Layout, use the following code on any site page-

<!-- USER MANAGEMENT CODE -->

<!-- Refer to User Management guide for this code -->

<!-- LAUNCH COMETCHAT CODE -->

<script>
  var chat_appid = 'XXXXX';
  
  var chat_height = '600px';
  var chat_width = '990px';
  
  document.write('<div id="cometchat_embed_synergy_container" style="width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');
	
  var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js';
  chat_js.onload = function() {
    var chat_iframe = {};chat_iframe.module="synergy";chat_iframe.style="min-height:"+chat_height+";min-width:"+chat_width+";";chat_iframe.width=chat_width.replace('px','');chat_iframe.height=chat_height.replace('px','');chat_iframe.src='https://'+chat_appid+'.cometondemand.net/cometchat_embedded.php'; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
  }
  var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
</script>
Variable
Description
Mandatory

chat_appid

Your App ID

Yes

Embed Only Groups

<!-- USER MANAGEMENT CODE -->

<!-- Refer to User Management guide for this code -->

<!-- LAUNCH COMETCHAT CODE -->

<script>
  var chat_appid = 'XXXXX';
  
  var chat_height = '600px';
  var chat_width = '990px';
  
  document.write('<div id="cometchat_embed_synergy_container" style="width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');
	
  var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js';
  chat_js.onload = function() {
    var chat_iframe = {};chat_iframe.module="synergy";chat_iframe.style="min-height:"+chat_height+";min-width:"+chat_width+";";chat_iframe.width=chat_width.replace('px','');chat_iframe.height=chat_height.replace('px','');chat_iframe.src='https://'+chat_appid+'.cometondemand.net/cometchat_embedded.php?chatroomsonly=1'; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
  }
  var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
</script>
Variable
Description
Mandatory

chat_appid

Your App ID

Yes

Embed A Single Group

<!-- USER MANAGEMENT CODE -->

<!-- Refer to User Management guide for this code -->

<!-- LAUNCH COMETCHAT CODE -->

<script>
  var chat_appid = 'XXXXX';
  var chat_groupid = '1';

  var chat_height = '600px';
  var chat_width = '990px';
  
  document.write('<div id="cometchat_embed_synergy_container" style="width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');
	
  var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js';
  chat_js.onload = function() {
    var chat_iframe = {};chat_iframe.module="synergy";chat_iframe.style="min-height:"+chat_height+";min-width:"+chat_width+";";chat_iframe.width=chat_width.replace('px','');chat_iframe.height=chat_height.replace('px','');chat_iframe.src='https://'+chat_appid+'.cometondemand.net/cometchat_embedded.php?guid='+chat_groupid; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
  }
  var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
</script>
Variable
Description
Mandatory

chat_appid

Your App ID

Yes

chat_groupid

Group GUID

Yes