Add CometChat Widget to Webflow

Add the CometChat Widget with a single snippet in a Webflow Embed element. Pick the sign-in flow that matches your site: guests, auto-created users from your IDs, or backend-issued auth tokens. Choose how visitors sign in:

Anonymous Chat (Guest Mode)

Visitors can chat without accounts.
Fastest, friction-free setup.

Create + Log In User On The Fly

Auto-create CometChat users with your existing IDs (email, user ID, etc.).
No backend needed; CometChat creates users on first visit.

Backend-Created User (Auth Token Login)

Use your backend to issue auth tokens.
Keep your Auth Key off the page.

Where to place the snippet in Webflow

Open Custom Code settings

Load the CometChat script once (recommended)

Add this to Head Code so every Embed can reuse it:

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

If you prefer, you can keep the script tag directly inside the Embed snippet instead.

Save and publish

Click Save, publish the site, then Visit Website to confirm the widget appears.

1. Anonymous Chat (Guest Mode)

Use this when: you want visitors to chat without signing in.

Paste this into the Webflow Embed

<div id="cometChatMount"></div>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
<script>
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",   // e.g. "us", "eu", "in"
    mode: "guest",               // keep this as "guest"
    authKey: "YOUR_AUTH_KEY",

    language: "en-US",           // optional, defaults to "en-US"

    // Optional: how the guest appears in chat
    user: {
      name: "Guest User",
      avatar: "",                // e.g. "https://example.com/guest.png"
      link: ""                   // e.g. "https://example.com/profile"
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,               // true = docked widget (recommended)
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
    //autoOpenFirstItem: false,
  };

  const startWidget = () => CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startWidget);
  } else {
    startWidget();
  }
</script>

Update these values

Setting	What to enter / where to find it
`appID`, `region`, `authKey`	Copy from Dashboard
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`user.name`, `user.avatar`, `user.link`	Optional guest display info—leave blank if you don’t need it.
`width`, `height`, `isDocked`	Adjust the widget width & height. isDocked = true - appears as icon on page and expands when clicked. isDocked = false - appears embedded on the page.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls the position of the docked widget interface on the page (left side or right side).
`autoOpenFirstItem`	When set to false, the widget does not automatically open the first conversation on load. Defaults to true.

2. Create + Log In User On The Fly

Use this when: you already have user IDs (email, username, member ID) and want to log people in with that ID automatically. CometChat creates the user the first time it sees the ID.

Add this to Site Settings → Custom Code → Head Code

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

Paste this into the Webflow Embed

<div id="cometChatMount"></div>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
<script>
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",      // e.g. "us", "eu", "in"
    mode: "uid",                    // keep this as "uid"
    authKey: "YOUR_AUTH_KEY",

    // IMPORTANT: this must be unique per user
    uid: "UNIQUE_USER_ID",          // e.g. "user_123", "customer_42"

    language: "en-US",              // optional, defaults to "en-US"

    // Optional: user profile shown in chat
    user: {
      name: "User Name",            // e.g. "Alex Johnson"
      avatar: "https://example.com/uid.png",
      link: "https://example.com/profile/uid"
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
    //autoOpenFirstItem: false,
  };

  const startWidget = () => CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startWidget);
  } else {
    startWidget();
  }
</script>

Update these values

Setting	What to enter / where to find it
`appID`, `region`, `authKey`	Copy from Dashboard
`uid`	Pass the unique ID from your page (for example `member.id`, email, or a UUID). CometChat creates the user the first time it sees that ID.
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`user.name`, `user.avatar`, `user.link`	Optional profile info you already store for that person.
`mode`	Keep this as `"uid"` so the widget knows you’re logging in with IDs.
`width`, `height`, `isDocked`	Adjust the widget width & height. isDocked = true - appears as icon on page and expands when clicked. isDocked = false - appears embedded on the page.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls the position of the docked widget interface on the page (left side or right side).
`autoOpenFirstItem`	When set to false, the widget does not automatically open the first conversation on load. Defaults to true.

Use this when your Webflow site uses Memberstack and you want the widget to log members in automatically (with a persistent guest fallback). Step 1 — add Memberstack to Head (Site Settings → Custom Code → Head):

<!-- Memberstack Installation -->
<script
  data-memberstack-id="YOUR_PUBLIC_KEY_HERE"
  src="https://static.memberstack.com/scripts/v1/memberstack.js"
  type="text/javascript">
</script>

Step 2 — add the chat widget (Site Settings → Custom Code → Footer, or a page Embed):

<script src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
<div id="cometChatMount"></div>

<script>
  const COMETCHAT_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",
    authKey: "YOUR_AUTH_KEY",
    mount: "#cometChatMount",
    mode: "uid",
    language: "en-US",         // optional, defaults to "en-US"
    width: "700px",
    height: "500px",
    isDocked: true,
    // dockedAlignment: "right",
    // variantID: "YOUR_VARIANT_ID",
    // chatType: "user",
    // defaultChatID: "uid_or_guid",
  };

  const startWidget = async () => {
    try {
      const member = await window.$memberstackDom.getCurrentMember();
      let userConfig;

      if (member?.data) {
        const uid = member.data.id;
        const first = member.data.customFields["first-name"] || "";
        const last = member.data.customFields["last-name"] || "";
        const name = (first + " " + last).trim() || "User";

        userConfig = {
          uid,
          user: {
            name,
            avatar: member.data.profileImage || "",
            link: window.location.origin + "/profile/" + uid
          }
        };
      } else {
        let guestId = localStorage.getItem("cometchat_guest_id");
        if (!guestId) {
          guestId = "guest_" + Math.random().toString(36).substr(2, 9);
          localStorage.setItem("cometchat_guest_id", guestId);
        }

        userConfig = {
          uid: guestId,
          user: { name: "Guest User" }
        };
      }

      CometChatApp.CometChatAuth.start({
        ...COMETCHAT_CONFIG,
        ...userConfig
      });
    } catch (error) {
      console.error("CometChat init error:", error);

      const guestId = "guest_" + Math.random().toString(36).substr(2, 9);
      CometChatApp.CometChatAuth.start({
        ...COMETCHAT_CONFIG,
        uid: guestId,
        user: { name: "Guest User" }
      });
    }
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startWidget);
  } else {
    startWidget();
  }
</script>

Optional (without reload): listen for Memberstack auth changes and swap users/guests.

<script src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
<div id="cometChatMount"></div>

<script>
  const COMETCHAT_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",
    authKey: "YOUR_AUTH_KEY",
    mount: "#cometChatMount",
    mode: "uid",
    language: "en-US",         // optional, defaults to "en-US"
    width: "700px",
    height: "500px",
    isDocked: true,
  };

  let currentUid = null;

  const launchChat = (uid, name, avatar) => {
    if (currentUid === uid) return;
    currentUid = uid;

    CometChatApp.CometChatAuth.start({
      ...COMETCHAT_CONFIG,
      uid,
      user: { name: name || "User", avatar: avatar || "" }
    });
  };

  const launchGuestChat = () => {
    let guestId = localStorage.getItem("cometchat_guest_id");
    if (!guestId) {
      guestId = "guest_" + Math.random().toString(36).substr(2, 9);
      localStorage.setItem("cometchat_guest_id", guestId);
    }
    launchChat(guestId, "Guest User", "");
  };

  const initCometChat = async () => {
    try {
      const member = await window.$memberstackDom.getCurrentMember();

      if (member?.data) {
        const uid = member.data.id;
        const first = member.data.customFields["first-name"] || "";
        const last = member.data.customFields["last-name"] || "";
        const name = (first + " " + last).trim() || "User";

        launchChat(uid, name, member.data.profileImage || "");
      } else {
        launchGuestChat();
      }
    } catch (error) {
      console.error("CometChat error:", error);
      launchGuestChat();
    }
  };

  window.$memberstackDom?.onAuthChange(async (member) => {
    if (member?.data) {
      const uid = member.data.id;
      const first = member.data.customFields["first-name"] || "";
      const last = member.data.customFields["last-name"] || "";
      const name = (first + " " + last).trim() || "User";

      if (currentUid && currentUid !== uid) {
        await CometChatApp.logout();
        document.getElementById("cometChatMount").innerHTML = "";
        currentUid = null;
      }

      launchChat(uid, name, member.data.profileImage || "");
    } else {
      if (currentUid) {
        await CometChatApp.logout();
        document.getElementById("cometChatMount").innerHTML = "";
        currentUid = null;
      }
      launchGuestChat();
    }
  });

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initCometChat);
  } else {
    initCometChat();
  }
</script>

Use this when: people sign in through your backend and you generate their CometChat auth token server-side. This keeps your Auth Key off the page. Server-side flow (auth token login):

Authenticate the user in your app.
If it’s their first time, call Create User (https://www.cometchat.com/docs/rest-api/users/create) — you can also request an auth token in that call.
For returning users, call Create Auth Token (https://www.cometchat.com/docs/rest-api/auth-tokens/create) to issue a fresh token.
Send the token to the browser and place it in the widget config below.
The same token works for the CometChat Widget, UI Kit, or SDK.

Full walkthrough: How to properly log in and create users in CometChat.

Paste this into the Webflow Embed

<div id="cometChatMount"></div>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
<script>
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",       // e.g. "us", "eu", "in"
    mode: "authToken",               // keep this as "authToken"

    // Generated BY YOUR BACKEND after user login
    authToken: "USER_AUTH_TOKEN",

    language: "en-US",               // optional, defaults to "en-US"

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
    //autoOpenFirstItem: false,
  };

  const startWidget = () => CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startWidget);
  } else {
    startWidget();
  }
</script>

Update these values

Setting	What to enter / where to find it
`appID`, `region`	Copy from Dashboard
`mode`	Keep as `"authToken"` so the widget expects a server-issued token.
`authToken`	Generate on your server: (1) call the CometChat Auth Token API with your API key, (2) get the token for that user, (3) send it to the page and place it here.
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`width`, `height`, `isDocked`	Adjust the widget width & height. isDocked = true - appears as icon on page and expands when clicked. isDocked = false - appears embedded on the page.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls the position of the docked widget interface on the page (left side or right side).
`autoOpenFirstItem`	When set to false, the widget does not automatically open the first conversation on load. Defaults to true.

Troubleshooting

Widget not appearing? Ensure the Embed is set to Code and the script loads (chat-embed@1.x.x). Publish the site after adding the snippet.
Login/auth errors? For UID mode, ensure the uid is unique and you’re using an App Auth Key (not REST API key). For auth token mode, make sure the token matches the logged-in user.
Only guests showing? Confirm you’re providing uid or authToken in the snippet and that your page logic passes the right IDs.
Embed clipped? Resize the Embed element to give the widget enough space (width/height also configurable in the config).

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

Keep the standard widget snippet (from the Integration guide) on your page.
Add another <script type="module"> right after it or inside your site builder’s “custom code” area.
Wrap your code in window.addEventListener("DOMContentLoaded", () => { ... }) so it runs after the widget loads.
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

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

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

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 (Simplified)	`zh`
Chinese (Traditional)	`zh-TW`
Malay	`ms`
Swedish	`sv`
Lithuanian	`lt`
Hungarian	`hu`

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.

Add CometChat Widget to Webflow

Anonymous Chat (Guest Mode)

Create + Log In User On The Fly

Backend-Created User (Auth Token Login)

Where to place the snippet in Webflow

1. Anonymous Chat (Guest Mode)

Paste this into the Webflow Embed

Update these values

2. Create + Log In User On The Fly

Add this to Site Settings → Custom Code → Head Code

Paste this into the Webflow Embed

Update these values

Paste this into the Webflow Embed

Update these values

Troubleshooting

Advanced JavaScript Controls

Before you follow advanced setup steps

Open a chat or start a call

Listen for widget events

Create/Update users on the fly

Create/Update groups on the fly

Log users in or out with code

Control where data is stored

Change the widget language

Need Help?

Anonymous Chat (Guest Mode)

Create + Log In User On The Fly

Backend-Created User (Auth Token Login)

​Where to place the snippet in Webflow

​1. Anonymous Chat (Guest Mode)

​Paste this into the Webflow Embed

​Update these values

​2. Create + Log In User On The Fly

​Add this to Site Settings → Custom Code → Head Code

​Paste this into the Webflow Embed

​Update these values

​Memberstack auto-login (Webflow + Memberstack, still UID flow)

​3. Backend-Created User (Auth Token Login)

​Paste this into the Webflow Embed

​Update these values

​Troubleshooting

​Advanced JavaScript Controls

​Before you follow advanced setup steps

​Open a chat or start a call

​Listen for widget events

​Create/Update users on the fly

​Create/Update groups on the fly

​Log users in or out with code

​Control where data is stored

​Change the widget language

​Need Help?

Where to place the snippet in Webflow

1. Anonymous Chat (Guest Mode)

Paste this into the Webflow Embed

Update these values

2. Create + Log In User On The Fly

Add this to Site Settings → Custom Code → Head Code

Paste this into the Webflow Embed

Update these values

Memberstack auto-login (Webflow + Memberstack, still UID flow)

3. Backend-Created User (Auth Token Login)

Paste this into the Webflow Embed

Update these values

Troubleshooting

Advanced JavaScript Controls

Before you follow advanced setup steps

Open a chat or start a call

Listen for widget events

Create/Update users on the fly

Create/Update groups on the fly

Log users in or out with code

Control where data is stored

Change the widget language

Need Help?