CometChat Pro Documentation

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

Web

This tutorial tell us how to add Chat Widget to your website or web application.

You have an option of loading the Chat Widget in:

  1. Embedded Layout
  2. Docked Layout

Embedded Layout

Embedded Layout of the Chat Widget

You may simply copy-paste the code below to run the Chat Widget in Embedded Layout

<html>

<head>
    <script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
</head>

<body>
    <div id="cometchat"></div>
    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
        CometChatWidget.init({
            "appID": "APP_ID",
            "appRegion": "APP_REGION",
            "authKey": "AUTH_KEY"
        }).then(response => {
            console.log("Initialization completed successfully");
            //You can now call login function.
            CometChatWidget.login({
                "uid": "UID"
            }).then(response => {
                CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "target": "#cometchat",
                    "roundedCorners": "true",
                    "height": "600px",
                    "width": "800px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });
            }, error => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
            });
        }, error => {
            console.log("Initialization failed with error:", error);
            //Check the reason for error and take appropriate action.
        });
    });
    </script>
</body>

</html>

To launch an Embedded Widget, pass a configuration object to launch method with the following keys:

Parameter

Description

widgetID

ID of the widget can be accessed from the CometChat dashboard

target

ID of the div tag where CometChat Widget will appear

roundedCorners

Boolean value that enables/disables rounded corners.

height

Height of the widget

width

Width of the widget

defaultID

To show a default logged in user or group in your chat
a.Use UID of a user for one - one conversations
b.Use GUID for group conversations

defaultType

Either user or group depending upon the defaultID

Docked Layout

Docked View of the Chat Widget

You may simply copy-paste the code below to run the Chat Widget in Docked Layout

<html>

<head>
    <script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
</head>

<body>
    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
        CometChatWidget.init({
            "appID": "APP_ID",
            "appRegion": "APP_REGION",
            "authKey": "AUTH_KEY"
        }).then(response => {
            console.log("Initialization completed successfully");
            //You can now call login function.
            CometChatWidget.login({
                "uid": "UID"
            }).then(response => {
                CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "docked": "true",
                    "alignment": "left", //left or right
                    "roundedCorners": "true",
                    "height": "450px",
                    "width": "400px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });
            }, error => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
            });
        }, error => {
            console.log("Initialization failed with error:", error);
            //Check the reason for error and take appropriate action.
        });
    });
    </script>
</body>

</html>

šŸ“˜

Please note that the above execution is taking place on DomContentLoaded event fired by the window object. You can break down these steps on different events of your choice to have a more controlled flow of initializing and launching the Chat Widget.

To launch a Docked widget, pass a configuration object to the launch method with the following keys:

Parameter

Description

widgetID

ID of the widget can be accessed from the CometChat dashboard

docked

Boolean value to show the enable the docked view

alignment

Can be set to left or right

roundedCorners

Boolean value that enables/disables rounded corners

height

Height of the widget

width

Width of the widget

defaultID

To show a default logged in user or group in your chat
a.Use UID of a user for one - one conversations
b.Use GUID for group conversations

defaultType

Either user or group depending upon the defaultID

As mentioned earlier, this launch method can be called multiple times. By modifying the keys in the above configuration object.

šŸ“˜

Make sure you specify a different and unique target if you intend to launch another instance of Chat Widget.

Advanced Features

Message Listener

We have provided a callback that is fired every time a message is received. You can use this to show Custom Notifications on your website or perform some other custom action as per your requirement.

CometChatWidget.launch({
  // Refer to the docked or embedded layout
}).then(response => {

  // OPTIONAL: This is called in the success callback of launch method
  CometChatWidget.on("onMessageReceived", (args) => {
    console.log("CometChatWidget onMessageReceived", args);
  });
});

Open or close chat window

Chat window of docked layout can be opened/closed using the below method.
This method can be triggered on the click event of any element of your webpage.

CometChatWidget.openOrCloseChat(FLAG); //true or false

It takes the following parameters:

Parameter

Description

Type

FLAG

Value could be true or false
true will open the chat window
false will close the chat window.

Required

Chat with a particular user

This method will open a particular user chat window.
This method can be triggered by the click event of any element of your webpage.

CometChatWidget.chatWithUser(UID);

It takes the following parameters:

Parameter

Description

Type

UID

The ID of the user you want to chat with

Required

Chat with a particular group

This method will open a particular group chat window.
This method can be triggered by the click event of any element of your webpage.

CometChatWidget.chatWithGroup(GUID);

It takes the following parameters:

Parameter

Description

Type

GUID

The ID of the group you want to chat with

Required

User/Group Management

Create a user on-the-fly

This saves you the hassle of creating users beforehand from the CometChat Pro Dashboard.
In order to create a user on-the-fly, you can call the updateUser() method on the CometChatWidget class.

It might happen that the user already exists. In that case, this method updates the user details. It can be used to change the user's name on-the-fly.

The method is as follows:

// OPTIONAL
CometChatWidget.createOrUpdateUser({
  "uid": "UID", 
  "name": "USERNAME"
});

It takes a configuration object with the following keys:

Parameter

Description

Type

uid

The ID of the user who must be logged in

Required

name

The username associated with the user

Required

Create a group on-the-fly

This saves you the hassle of creating groups beforehand from the CometChat Pro Dashboard.
In order to create a group on-the-fly, you can call the updateGroup() method on the CometChatWidget class.

It might happen that the group already exists. In that case, this method updates the group details. It can be used to change the group's name and type on the fly.

CometChatWidget.createOrUpdateGroup({
  guid: "GUID", 
  groupName: "GROUP_NAME", 
  groupType: "GROUP_TYPE"
});

It takes a configuration object with the following keys:

Parameter

Description

Type

guid

The group will be created with the mentioned ID

Required

groupName

The name associated with the group being created

Required

groupType

The type of group that you want to create.

Required

User Logout

You can logout the user by calling the logout method of the CometChatWidget class.

CometChatWidget.logout();

Security Measures using Auth Token

If you wish to manage the Auth Key and generate Auth Token from your server application. We recommended you to follow the below steps.

Please open this document - https://prodocs.cometchat.com/reference#createuser and
refer to this Post API call (https://api-us.cometchat.io/v2.0/users) to create users and generate Auth token

You may then use the generated Auth Token and pass it to the login method below to log in the user

The below code can be copy-pasted to launch your chat widget using Auth Token

<html>
ā€‹
<head>
    <script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
</head>
ā€‹
<body>
    <div id="cometchat"></div>
    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
        CometChatWidget.init({
            "appID": "APP_ID",
            "appRegion": "APP_REGION",
        }).then(response => {
            console.log("Initialization completed successfully");
            //You can now call login function.
            CometChatWidget.login({
                "authToken": "AUTH_TOKEN"
            }).then(response => {
                CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "target": "#cometchat",
                    "roundedCorners": "true",
                    "height": "600px",
                    "width": "800px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });
            }, error => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
            });
        }, error => {
            console.log("Initialization failed with error:", error);
            //Check the reason for error and take appropriate action.
        });
    });
    </script>
</body>
ā€‹
</html>
<html>
ā€‹
<head>
    <script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
</head>
ā€‹
<body>
    <div id="cometchat"></div>
    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
        CometChatWidget.init({
            "appID": "APP_ID",
            "appRegion": "APP_REGION",
        }).then(response => {
            console.log("Initialization completed successfully");
            //You can now call login function.
            CometChatWidget.login({
                "authToken": "AUTH_TOKEN"
            }).then(response => {
                CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "docked": "true",
                    "roundedCorners": "true",
                    "height": "600px",
                    "width": "800px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });
            }, error => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
            });
        }, error => {
            console.log("Initialization failed with error:", error);
            //Check the reason for error and take appropriate action.
        });
    });
    </script>
</body>
ā€‹
</html>

To launch an embedded/docked widget, pass a configuration object to the launch method with the following keys:

Parameter

Description

widgetID

ID of the widget can be accessed from the CometChat dashboard

target

For embedded layout, pass the ID of the div tag where CometChat Widget will appear ID of the div tag where CometChat Widget will appear

docked

For docked layout, use the docked parameter as a boolean value to show the enable the docked view

roundedCorners

Boolean value that enables/disables rounded corners.

height

Height of the widget

width

Width of the widget

defaultID

To show a default logged in user or group in your chat
a.Use UID of a user for one - one conversations
b.Use GUID for group conversations

defaultType

Either user or group depending upon the defaultID

Updated 3 days ago


Web


This tutorial tell us how to add Chat Widget to your website or web application.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.