Add CometChat Widget to Squarespace

• App ID
• Region
• Auth Key

1. In your Squarespace Dashboard, go to Website → Pages → Custom Code → Code Injection.
2. In the Header box, paste:
   Report incorrect code

   Copy

   Ask AI

   <script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@latest/dist/main.js"></script>
   

1. Still under Website → Pages → Custom Code → Code Injection, scroll to the Footer box.
2. Paste the following just before </body>:
   Report incorrect code

   Copy

   Ask AI

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

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.

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