Skip to main content
You can integrate the CometChat UI Kit Builder widget into your Squarespace site without touching your theme files—just use Squarespace’s Code Injection and Page Code Blocks. Once installed, it will:
  • Load and initialize the widget on page load
  • Automatically log in a predefined user
  • Display a docked chat window on your site

​
Quick Steps to Embed CometChat Widget

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

Inject the Chat-Embed Script into `<head>`

  1. In your Squarespace Dashboard, go to Website → Pages → Custom Code → Code Injection.
  2. In the Header box, paste: 
    <script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
This makes the CometChat library available site-wide.
3

Embed the Widget Container & Init Script

  1. Still under Website → Pages → Custom Code → Code Injection, scroll to the Footer box.
  2. Paste the following just before </body>: 
    <div id="cometChatMount"></div>

<script>
  const COMETCHAT_CREDENTIALS = {
    appID:     "<YOUR_APP_ID>",
    appRegion: "<YOUR_APP_REGION>",
    authKey:   "<YOUR_AUTH_KEY>",
  };

  const COMETCHAT_USER_UID = "UID"; // Replace with actual user UID

  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"
  };

  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

Optional: Page-Specific Embedding

If you only want the widget on a single page, instead of site-wide:
  1. In Pages, hover the desired page → ⚙️ Page Settings → Advanced.
  2. Paste the <div id="cometChatMount"></div> into Page Header or Page Footer.
  3. Use a Code Block in the page editor if you want to position the widget within specific content.
5

Troubleshooting

  • Widget not appearing?
    • Verify your App ID, Region & Auth Key.
    • Check browser console for errors (CSP, ad-blockers).
  • Login fails?
    • Ensure the COMETCHAT_USER_UID matches an existing user in your CometChat Dashboard.
  • Styling issues?
    • Add custom CSS in Design → Custom CSS to override default widget styles.

​
Advanced JavaScript Controls

The embed works out of the box. Use the helpers below only if you need to open a specific chat, listen for widget events, or change settings on the fly.

​
Before you follow advanced setup steps

  1. Keep the standard widget snippet (from the Integration guide) on your page.
  2. Add another <script type="module"> right after it or inside your site builder’s “custom code” area.
  3. Wrap your code in window.addEventListener("DOMContentLoaded", () => { ... }) so it runs after the widget loads.
  4. Replace placeholder text such as UID, GUID, and LANGUAGE_CODE with your real values.
When the widget is ready, it exposes a global helper named CometChatApp. Every example below shows a tiny recipe you can paste inside the script mentioned above.

​
Open a chat or start a call

Use these helpers when you want the widget to jump straight to a person/group or begin a call. Drop the snippet inside your custom script and replace UID/GUID with real IDs from your CometChat app. 
// Open chat with a specific person
CometChatApp.chatWithUser("UID");

// Open chat with a specific group
CometChatApp.chatWithGroup("GUID");

// Start a call with a person or a group
CometChatApp.callUser("UID");
CometChatApp.callGroup("GUID");

// Toggle extra UI bits
CometChatApp.showGroupActionMessages(true); // Show join/leave messages
CometChatApp.showDockedUnreadCount(true);   // Show unread badge on docked bubble

​
Listen for widget events

Run your own code when something happens inside the widget—new message, docked bubble opened, or someone switching chats. Keep the event names as shown; just change what happens inside each arrow function. 
// Fire when a new message arrives
CometChatApp.uiEvent("onMessageReceived", (message) => {
  console.log("New message:", message);
});

// Fire when the docked bubble opens or closes
CometChatApp.uiEvent("onOpenChat", () => console.log("Chat opened"));
CometChatApp.uiEvent("onCloseChat", () => console.log("Chat closed"));

// Fire when the user switches between conversations
CometChatApp.uiEvent("onActiveChatChanged", (chat) => {
  console.log("Now viewing:", chat);
});

​
Create/Update users on the fly

  • This will only work with authKey
If you collect names, avatars, or profile links on your site, you can push them straight into CometChat. Replace the placeholders and run the snippet after the widget loads. 
// Create or update a user
const user = new CometChatApp.CometChat.User("UID");
user.setName("User Name");
user.setAvatar("https://example.com/avatar.png");
user.setLink("https://example.com/profile");

CometChatApp.createOrUpdateUser(user).then((result) => {
  console.log("User saved:", result);
});

​
Create/Update groups on the fly

If you want to create groups directly from your page, use this snippet. Replace the placeholders and run the snippet after the widget loads. 
// Create or update a group
const group = new CometChatApp.CometChat.Group("GUID", "GROUP_NAME", "public");

CometChatApp.createOrUpdateGroup(group).then((result) => {
  console.log("Group saved:", result);
});

​
Log users in or out with code

Use an auth token if you have a backend, or fall back to a plain UID for quick tests. Run these helpers after the widget loads. 
// Sign in with a secure auth token from your server
CometChatApp.login({ authToken: "USER_AUTH_TOKEN" });

// ...or sign in directly with a UID (less secure, but fast for demos)
CometChatApp.login({ uid: "UID" });

// Sign the current user out
CometChatApp.logout();

// Listen for logout so you can clean up your UI
CometChatApp.uiEvent("onLogout", () => {
  console.log("User logged out");
});

​
Control where data is stored

Pick whether the widget should remember login info in the browser tab only (SESSION) or across visits (LOCAL). Update the placeholders, then drop this script right after the default widget embed. 
const COMETCHAT_DATA = {
  appID: "<YOUR_APP_ID>",
  appRegion: "<YOUR_APP_REGION>",
  authKey: "<YOUR_AUTH_KEY>",
  storageMode: "SESSION", // or "LOCAL" (default)
};

const COMETCHAT_USER_UID = "UID"; // The person who should log in

const COMETCHAT_LAUNCH_OPTIONS = {
  targetElementID: "cometChatMount",
  isDocked: true,
  width: "700px",
  height: "500px",
};

window.addEventListener("DOMContentLoaded", () => {
  CometChatApp.init(COMETCHAT_DATA)
    .then(() => CometChatApp.login({ uid: COMETCHAT_USER_UID }))
    .then(() => CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS))
    .catch(console.error);
});

// Optional extras:
// COMETCHAT_LAUNCH_OPTIONS.variantID = "YOUR_VARIANT_ID";
// COMETCHAT_LAUNCH_OPTIONS.chatType = "user" | "group";
// COMETCHAT_LAUNCH_OPTIONS.defaultChatID = "uid_or_guid";
// COMETCHAT_LAUNCH_OPTIONS.dockedAlignment = "left" | "right";

​
Change the widget language

The widget auto-detects the browser language, but you can force it to any supported locale. Run the helper once after the widget loads and swap in the language code you need. 
CometChatApp.localize("en-US"); // Example: force English (United States)
Popular codes
LanguageCode
English (United States)en-US
English (United Kingdom)en-GB
Dutchnl
Frenchfr
Germande
Hindihi
Italianit
Japaneseja
Koreanko
Portuguesept
Russianru
Spanishes
Turkishtr
Chinese (Simplified)zh
Chinese (Traditional)zh-TW
Malayms
Swedishsv
Lithuanianlt
Hungarianhu
Need another locale? Use the same pattern with its code (for example CometChatApp.localize("ko") for Korean).

​
Need Help?

If you have questions or run into issues, reach out to CometChat Support.