Add CometChat Chat Builder Widget to Shopify

You can integrate the CometChat Chat Builder widget directly into your Shopify store to enable real-time chat. Once installed, it will:

Load the Chat Builder bundle on page load
Initialize CometChat with your App ID, Region & Auth Key
Automatically log in each visitor (using their Shopify customer.id or “guest”)
Launch a docked chat UI on every page

What You’ll Build

A persistent, docked chat widget in your Shopify theme—fully configurable via Theme Settings or a snippet/app block.

Before you start, sign up at the CometChat Dashboard and create an app. Copy:

App ID
Region
Auth Key

Add the Chat Builder Bundle

In Shopify Admin, navigate to Online Store → Themes → Edit code
Open layout/theme.liquid

Inside the <head> tag, add:

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

Mount & Initialize the Widget

Decide where you want the chat widget to appear—commonly in sections/footer.liquid or a new snippets/cometchat-widget.liquid. Paste:

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

(Optional) Expose Credentials in Theme Settings

To let non-developers manage credentials from the Shopify Theme Editor, add this section in config/settings_schema.json (just before the final ]):

,
{
  "name": "CometChat Settings",
  "settings": [
    {
      "type": "text",
      "id": "cometchat_app_id",
      "label": "CometChat App ID",
      "default": "YOUR_APP_ID"
    },
    {
      "type": "text",
      "id": "cometchat_app_region",
      "label": "CometChat App Region",
      "default": "YOUR_REGION"
    },
    {
      "type": "text",
      "id": "cometchat_auth_key",
      "label": "CometChat Auth Key",
      "default": "YOUR_AUTH_KEY"
    }
  ]
}

(Advanced) Use an Online Store 2.0 App Block

If your theme supports Shopify 2.0 app blocks, you can make a reusable section:

Online Store → Themes → Edit code
Under Sections, click Add a new section → cometchat-widget.liquid
Paste the snippet from the previous step into that file.
Save, then add it in Customize theme under App embeds or as a section on any template:
{% section 'cometchat-widget' %}

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:

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

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

Troubleshooting

Widget not appearing?
- Verify your <script> URL is correct
- Confirm your App ID, Region & Auth Key
Login errors?
- Ensure the uid exists under Users in your CometChat Dashboard
Script blocked?
- Use the snippet method rather than inline page HTML

Need Help?

Reach out to CometChat Support or visit our docs site for more examples.

Legacy

Advanced

Add CometChat Chat Builder Widget to Shopify

What You’ll Build

Quick Steps to Embed CometChat Widget

Advanced JavaScript APIs

Chat and Call Methods

UI Event Listeners

User and Group Management

Authentication Methods

Localization

Troubleshooting

Need Help?

​What You’ll Build

​Quick Steps to Embed CometChat Widget

​Advanced JavaScript APIs

​Chat and Call Methods

​UI Event Listeners

​User and Group Management

​Authentication Methods

​Localization

​Troubleshooting

​Need Help?

What You’ll Build

Quick Steps to Embed CometChat Widget

Advanced JavaScript APIs

Chat and Call Methods

UI Event Listeners

User and Group Management

Authentication Methods

Localization

Troubleshooting

Need Help?