> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Add CometChat Widget to Squarespace > Learn how to embed the CometChat UI Kit Builder widget into your Squarespace website using Code Injection and Code Blocks. 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 Before you begin, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create a new app. Copy: * **App ID** * **Region** * **Auth Key** 1. In your Squarespace Dashboard, go to **Website → Pages → Custom Code → Code Injection**. 2. In the **Header** box, paste: ```html theme={null} ``` This makes the CometChat library available site-wide. 1. Still under **Website → Pages → Custom Code → Code Injection**, scroll to the **Footer** box. 2. Paste the following just before ``: ```html lines highlight={5-7, 10} theme={null}

``` > Replace ``, ``, ``, and `COMETCHAT_USER_UID` with your actual credentials and user ID. 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 `

` 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. *** ## Advanced JavaScript APIs Once the widget is loaded, interact with it via the global `CometChatApp` object: ### Chat and Call Methods ```js theme={null} // 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"); // Show or hide action messages in group chats CometChatApp.showGroupActionMessages(true); // Show or hide unread message count bubble on docked layout CometChatApp.showDockedUnreadCount(true); ``` ### UI Event Listeners ```js theme={null} // 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 ```js theme={null} // 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 ```js theme={null} // 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); }); ``` ### Storage Methods ``` const COMETCHAT_DATA = { appID: "", appRegion: "", authKey: "", storageMode:"SESSION" // "SESSION" || "LOCAL", defaults to "LOCAL" }; const COMETCHAT_USER_UID = "UID"; // Replace with your 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_DATA) .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); }); }); ``` ### 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: | Language | Code | | ------------------------ | ------- | | English (United States) | `en-US` | | English (United Kingdom) | `en-GB` | | Dutch | `nl` | | French | `fr` | | German | `de` | | Hindi | `hi` | | Italian | `it` | | Japanese | `ja` | | Korean | `ko` | | Portuguese | `pt` | | Russian | `ru` | | Spanish | `es` | | Turkish | `tr` | | Chinese | `zh` | | Chinese (Traditional) | `zh-TW` | | Malay | `ms` | | Swedish | `sv` | | Lithuanian | `lt` | | Hungarian | `hu` | ```javascript theme={null} CometChatApp.localize(LANGUAGE_CODE); Eg. CometChatApp.localize('en-US'); ``` It takes the following parameters: | Parameter | Description | Type | | -------------- | ------------------------------------------------- | -------- | | LANGUAGE\_CODE | The language code the texts to be translated into | Required | *** ## Need Help? If you have questions or run into issues, reach out to [CometChat Support](https://www.cometchat.com/contact).