ReactJS

It only takes a few minutes to install CometChat in your React app. 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. Our Docked Layout creates a floating chat widget at the bottom right/left corner of your website. Our Embedded Layout creates a chat widget in any page of your website.

a. Docked Layout

Our Docked Layout allows you to add a floating CometChat to every page of your site.

i. Add CometChat Snippet to your template

Paste the code right before the closing </head> tag in the public/index.html page.

<script>
var chat_appid = 'APP_ID';
var chat_id = ''; // Intentionally left blank
var chat_name = ''; // Intentionally left blank
var chat_avatar = ''; // Intentionally left blank
var chat_link = ''; // Intentionally left blank

(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>

IMPORTANT: Make sure you replace APP_ID with your App ID.

ii. Initialise CometChat

In the component once your user logs in, add the following code:

window.chat_id = 'USER_UID';
window.chat_name = 'USER_NAME';
window.chat_avatar = 'USER_AVATAR';
window.chat_link = 'USER_PROFILELINK';
window.jqcc.cometchat.init();
How to use the code
  1. Paste the code once you login the user in your app
  2. IMPORTANT: The highlighted code will have to be modified to match the variables you've used.

b. Embedded Layout

The Embedded Layout allows you to add CometChat to any part of your site page. To proceed, add the following code to any part of your site.

i. Add CometChat Snippet to your template

Paste the code right before the closing </head> tag in the public/index.html page.

You will have to manually change your APP_ID.

<script>
var chat_appid = 'APP_ID';
var chat_id = ''; // Intentionally left blank
var chat_name = ''; // Intentionally left blank
var chat_avatar = ''; // Intentionally left blank
var chat_link = ''; // Intentionally left blank
var chat_height = '600px';
var chat_width = '990px';
var chat_iframe = {}; // Intentionally left blank
</script>

IMPORTANT: Make sure you replace APP_ID with your App ID.

ii. Initialise CometChat

In your template, add the following code where you want to display the Embedded Layout:

<div id="cometchat_embed_synergy_container"></div>

And finally add the following code in the function when you want to load CometChat:

window.chat_id = 'USER_UID';
window.chat_name = 'USER_NAME';
window.chat_avatar = 'USER_AVATAR';
window.chat_link = 'USER_PROFILELINK';

var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+window.chat_appid+'x_xchatx_xcorex_xembedcode.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);
js.onload = function() {
    window.chat_iframe.style = 'width:'+window.chat_width+';height:'+window.chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;';window.chat_iframe.module='synergy';window.chat_iframe.width=window.chat_width.replace('px','');window.chat_iframe.height=window.chat_height.replace('px','');window.chat_iframe.src='https://'+window.chat_appid+'.cometondemand.net/cometchat_embedded.php';
    if(typeof(window.addEmbedIframe)=="function"){
        window.addEmbedIframe(window.chat_iframe);
    }
}

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?
😃
😞