Angular & AngularJS

It only takes a few minutes to install CometChat in your Angular 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, Auth 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

You will have to manually change your APP_ID.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
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>
How to use the code
  1. Paste the code right before the closing </head> tag in the index.html page.
  2. IMPORTANT: Make sure you replace APP_ID with your App ID and AUTH_KEY with your Auth Key.

ii. Initialise CometChat

In the component where your user logs in, first declare the CometChat variables:

declare var jqcc: any;
declare var chat_id: any;
declare var chat_name: any;
declare var chat_avatar: any;
declare var chat_link: any;

And finally, in your login() function (or equivalent), login the user:

chat_id = 'USER_UID';
chat_name = 'USER_NAME';
chat_avatar = 'USER_AVATAR';
chat_link = 'USER_PROFILELINK';
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

You will have to manually change your APP_ID.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
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>
How to use the code
  1. Paste the code right before the closing </head> tag in the index.html page.
  2. IMPORTANT: Make sure you replace APP_ID with your App ID and AUTH_KEY with your Auth Key.

ii. Initialise CometChat

In the component where you want to display CometChat (after your user logs in), first declare the CometChat variables:

declare var chat_id: any;
declare var chat_name: any;
declare var chat_avatar: any;
declare var chat_link: any;
declare var chat_appid: any;
declare var chat_height: any;
declare var chat_width: any;
declare var chat_iframe: any;
declare var addEmbedIframe: any;

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:

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

var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);

js.onload = function() {
    chat_iframe.style = 'width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;';chat_iframe.module='synergy';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);
    }
}

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

Secure CometChat

IMPORTANT: Before you go live, follow our our security guide to ensure your integration is secure.

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