Custom Build
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": '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://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": '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>