Custom Build - CometChat Docs

Deploy a custom build of the chat widget on your deployment server.

Installation Steps

Clone this repository

git clone https://github.com/cometchat-pro/web-chat-widget-custom

Navigate to the CometChatWorkspace directory and replace the URL with your website URL in the CONSTS.js file

cd CometChatWorkspace

// EG: If URL is set as https://your_domain.com/widget
// cometchatwidget.js will be available at https://your_domain.com/widget/cometchatwidget.js
module.exports = {
  URL: "https://your_domain.com/widget",
}

Install the dependencies

npm install

Build the project using the below command

npm run build:custom

Copy all the files from the build directory to your website source code

Usage

Update the widget’s CDN link in the installation code.It will be based on the URL mentioned in the CONSTS.js file.

Embedded Layout
Docked Layout

<html>

<head>
  <script defer src="https://your_domain.com/widget/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": '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>  

<html>

<head>
  <script defer src="https://your_domain.com/widget/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": '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>

​Installation Steps

​Usage

Installation Steps

Usage