Basic Javascript

It only takes a few minutes to install CometChat on your website. Once installed, your users will be able to communicate with each other.

Before you begin…

  1. Signup for a free trial
    First select a plan from the CometChat Free Trial page, enter your email address and start your free trial.

  2. Note your API Keys
    Sign in to your CometChat Client Area and click on the Manage button and then note down the keys present in API Keys (top right button) section- API Key, License Key and App ID. You may need these during installation.

Install CometChat

CometChat provides two layouts to cater to your unique requirements.

a. Docked Layout

Our Docked Layout creates a floating chat widget at the bottom right/left corner of your website.

CometChat Docked Layout

Paste the following code right before the closing </body> tag of every page where you want CometChat to appear. Ideally, you can add this code to your footer template.

<script>
  var chat_appid = 'APP_ID';
    var chat_id = 'USER_UID';
    var chat_name = 'USER_NAME';
    var chat_avatar = 'USER_AVATAR';
    var chat_link = 'USER_PROFILELINK';
</script>
<script>
  (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>

IMPORTANT: The highlighted code will have to be modified to match the variables you've used.

b. Embedded Layout

Our Embedded Layout creates a chat widget in any page of your website.

CometChat Embedded Layout

Paste the the following code in any page of your site where you want CometChat to appear.

<script>
  var chat_appid = 'APP_ID';
    var chat_id = 'USER_UID';
    var chat_name = 'USER_NAME';
    var chat_avatar = 'USER_AVATAR';
    var chat_link = 'USER_PROFILELINK';
</script>
<script>
  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>

IMPORTANT: The highlighted code will have to be modified to match the variables you've used.

That's all folks!

Now you're ready to start using CometChat. Refer to our developer documentation if you'd like to further enhance CometChat.

Did this answer your question?
😃
😞