HTML Widget (Legacy)

Overview

The Chat Widget is not customizable beyond the configuration options available in the Widget Builder in dashboard. If you require deeper customization, consider using our UI Kits instead.

HTML / Bootstrap / JQuery

Before getting started

Go through the overview to set up Chat Widget from the CometChat Dashboard.

Once you’ve created a widget, as shown in the image below.

You have an option of loading the Chat Widget in:

Embedded Layout
Docked Layout

Security Best Practices

The Auth Key method is recommended for proof-of-concept (POC) development and early-stage testing.
For production environments, use an Auth Token instead of an Auth Key to enhance security and prevent unauthorized access. See the Security Measures using Auth Token section below for details.

Embedded Layout

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

Replace APP_ID, APP_REGION, AUTH_KEY, WIDGET_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code.

Replace UID with the ID of the user you want to login with.

<html>

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

<body>
  <div id="cometchat"></div>
  <script>
  window.addEventListener('DOMContentLoaded', (event) => {
    CometChatWidget.init({
        "appID": "YOUR_APP_ID",
        "appRegion": "YOUR_APP_REGION",
        "authKey": "YOUR_AUTH_KEY"
    }).then(response => {
        console.log("Initialization completed successfully");
        //You can now call login function.
        CometChatWidget.login({
            "uid": "YOUR_UID"
        }).then(response => {
            CometChatWidget.launch({
                "widgetID": "YOUR_WIDGET_ID",
                "target": "#cometchat",
                "roundedCorners": "true",
                "height": "600px",
                "width": "800px",
                "defaultID": 'cometchat-uid-1', //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>

// Embedded Layout - JavaScript initialization
CometChatWidget.init({
  "appID": "YOUR_APP_ID",
  "appRegion": "YOUR_APP_REGION",
  "authKey": "YOUR_AUTH_KEY"
}).then(response => {
  console.log("Initialization completed successfully");
  CometChatWidget.login({
    "uid": "YOUR_UID"
  }).then(response => {
    CometChatWidget.launch({
      "widgetID": "YOUR_WIDGET_ID",
      "target": "#cometchat",
      "roundedCorners": "true",
      "height": "600px",
      "width": "800px",
      "defaultID": "cometchat-uid-1", //default UID (user) or GUID (group) to show
      "defaultType": "user" //user or group
    });
  }, error => {
    console.log("User login failed with error:", error);
  });
}, error => {
  console.log("Initialization failed with error:", error);
});

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-on-one conversations b.Use GUID for group conversations
defaultType	Either `user` or `group` depending upon the defaultID

Docked Layout

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

Replace APP_ID, APP_REGION, AUTH_KEY, WIDGET_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code.

Replace UID with the ID of the user you want to login with.

<html>

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

<body>
  <script>
  window.addEventListener('DOMContentLoaded', (event) => {
    CometChatWidget.init({
        "appID": "YOUR_APP_ID",
        "appRegion": "YOUR_APP_REGION",
        "authKey": "YOUR_AUTH_KEY"
    }).then(response => {
        console.log("Initialization completed successfully");
        //You can now call login function.
        CometChatWidget.login({
            "uid": "YOUR_UID"
        }).then(response => {
            CometChatWidget.launch({
                "widgetID": "YOUR_WIDGET_ID",
                "docked": "true",
                "alignment": "left", //left or right
                "roundedCorners": "true",
                "height": "450px",
                "width": "400px",
                "defaultID": 'cometchat-uid-1', //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>

// Docked Layout - JavaScript initialization
CometChatWidget.init({
  "appID": "YOUR_APP_ID",
  "appRegion": "YOUR_APP_REGION",
  "authKey": "YOUR_AUTH_KEY"
}).then(response => {
  console.log("Initialization completed successfully");
  CometChatWidget.login({
    "uid": "YOUR_UID"
  }).then(response => {
    CometChatWidget.launch({
      "widgetID": "YOUR_WIDGET_ID",
      "docked": "true",
      "alignment": "left", //left or right
      "roundedCorners": "true",
      "height": "450px",
      "width": "400px",
      "defaultID": "cometchat-uid-1", //default UID (user) or GUID (group) to show
      "defaultType": "user" //user or group
    });
  }, error => {
    console.log("User login failed with error:", error);
  });
}, error => {
  console.log("Initialization failed with error:", error);
});

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

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