Skip to main content

Custom Build

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

Installation Steps​

  1. Clone this repository
git clone https://github.com/cometchat-pro/web-chat-widget-custom
  1. 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",
}
  1. Install the dependencies
npm install
  1. Build the project using the below command
npm run build:custom
  1. 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.

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