You can integrate the CometChat Chat 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@latest/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_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 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

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 APIs

Once the widget is loaded, interact with it via the global CometChatApp object:

​
Chat and Call Methods

// Chat with a particular user
CometChatApp.chatWithUser("UID");

// Chat with a particular group
CometChatApp.chatWithGroup("GUID");

// Initiate calls with a particular user
CometChatApp.callUser("UID");

// Initiate calls with a particular group
CometChatApp.callGroup("GUID");

​
UI Event Listeners

// Message received listener
CometChatApp.uiEvent("onMessageReceived", (msg) => {
  console.log("New message received:", msg);
});

// Chat opened listener (for docked mode)
CometChatApp.uiEvent("onOpenChat", (args) => {
  console.log("Chat opened", args);
});

// Chat closed listener (for docked mode)
CometChatApp.uiEvent("onCloseChat", (args) => {
  console.log("Chat closed", args);
});

// Active chat change listener
CometChatApp.uiEvent("onActiveChatChanged", (args) => {
  console.log("onActiveChatChanged", args);
});

​
User and Group Management

// Create or update a user on-the-fly
const user = new CometChatApp.CometChat.User("UID");
user.setName("User Name");
user.setAvatar("https://example.com/uid.png");
user.setLink("https://example.com/profile/uid");

CometChatApp.createOrUpdateUser(user).then((createdUser) => {
  console.log("User created/updated", createdUser);
});

// Create or update a group on-the-fly
const group = new CometChatApp.CometChat.Group("GUID", "GROUP_NAME", "public");
CometChatApp.createOrUpdateGroup(group).then((createdGroup) => {
  console.log("Group created/updated", createdGroup);
});

​
Authentication Methods

// Login with authToken
CometChatApp.login({ authToken: "your-auth-token" }); // More secure

// Login with UID
CometChatApp.login({ uid: "your-uid" });  // Less secure

// User logout
CometChatApp.logout();

// Logout listener
CometChatApp.uiEvent("onLogout", (args) => {
  console.log("onLogout", args);
});

​
Localization

With language localization, our Chat Widget adapts to the language of a specific country or region. Chat Widget allows you to detect the language of your users based on their browser settings and set the language of the widget accordingly. You can also set the language manually using the CometChatApp.localize method. The CometChat App supports localization for multiple languages, allowing you to provide a tailored experience for users across different regions. You can find the list of supported languages and their corresponding language codes below:
LanguageCode
English (United States)en-US
English (United Kingdom)en-GB
Dutchnl
Frenchfr
Germande
Hindihi
Italianit
Japaneseja
Koreanko
Portuguesept
Russianru
Spanishes
Turkishtr
Chinesezh
Chinese (Traditional)zh-TW
Malayms
Swedishsv
Lithuanianlt
Hungarianhu
CometChatApp.localize(LANGUAGE_CODE);

Eg. CometChatApp.localize('en-US');
It takes the following parameters:
ParameterDescriptionType
LANGUAGE_CODEThe language code the texts to be translated intoRequired

​
Need Help?

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