cometchat-visual-builder-no-code
v1.0.20-authtest18
Published
CometChat Widget Builder No-Code Integration
Downloads
2,937
Readme
1. Register on CometChat & Gather Your Keys
Before you begin, sign up at the CometChat Dashboard and create a new app. Copy:
- App ID
- Region
- Auth Key
2. Include the Chat-Embed Script in <head>
Add this inside the section of your HTML file to load the CometChat bundle:
<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/[email protected]/dist/main.js"></script>3. Embed & Initialize the Widget in <body>
Paste the following just before the closing tag:
<div id="cometChatMount"></div>
<script>
const COMETCHAT_CREDENTIALS = {
appID: "<YOUR_APP_ID>",
appRegion: "<YOUR_APP_REGION>",
authKey: "<YOUR_AUTH_KEY>",
};
const COMETCHAT_LAUNCH_OPTIONS = {
targetElementID: "cometChatMount", // Element ID to mount the widget
isDocked: true, // true = floating bubble, false = embedded
width: "700px", // Widget width
height: "500px", // Widget height
// Optional advanced settings:
// variantID: "YOUR_VARIANT_ID", // Variant configuration ID
// chatType: "user", // "user" or "group"
// defaultChatID: "uid_or_guid", // UID or GUID to open chat by default
// dockedAlignment: "right", // For docked mode: "left" or "right"
};
const COMETCHAT_USER_UID = "UID"; // Replace with your actual user UID
window.addEventListener("DOMContentLoaded", () => {
CometChatApp.init(COMETCHAT_CREDENTIALS)
.then(() => {
console.log("[CometChat] Initialized successfully");
return CometChatApp.login({ uid: COMETCHAT_USER_UID });
})
.then(user => {
console.log("[CometChat] Logged in as:", user);
return CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS);
})
.then(() => {
console.log("[CometChat] Chat launched!");
})
.catch(error => {
console.error("[CometChat] Error:", error);
});
});
</script>Replace <YOUR_APP_ID>, <YOUR_APP_REGION>, <YOUR_AUTH_KEY>, and COMETCHAT_USER_UID with your actual credentials and user ID.
4. Documentation & Advanced Configuration
For detailed information on configuration options, advanced features, and troubleshooting, refer to CometChat Widget Builder Guide .