CometChat Widget Builder For Webflow

CometChat Widget Builder for Webflow is a no-code solution for embedding a fully functional chat interface with a simple code snippet.

It provides a ready-to-use chat widget backed by CometChat’s real-time infrastructure — add the embed code to your Webflow project and go live.

With CometChat Widget Builder, you can:

• Embed chat and calling into any Webflow website
• Customize themes, colors, and typography
• Toggle features on and off
• Go live with a simple embed code snippet

The widget connects to CometChat’s SDK and infrastructure, which manages message transport, sync, and backend scaling.

Ready to add chat to your Webflow website?

Go to the Integration Guide

---

Widget Builder Features

No-Code Visual Configuration — Widget Builder provides a visual configuration environment for designing your chat widget before embedding.

Toggle-Based Feature Control — Messaging and calling features can be controlled through configuration settings in the Widget Builder in dashboard.

Ready-to-Embed Code — After configuration, Widget Builder generates a code snippet you can add to your Webflow project using a custom code embed.

---

How to Use Widget Builder

1. Design

Customize your chat widget using the visual Widget Builder:

• Configure layout — Toggle all the required features in the dashboard.
• Toggle features — Turn chat and calling features on and off from the builder interface.
• Themes — Select between system, light, and dark themes. Choose custom colors and typography.

2. Get Embed Code

Once configured, get the embed code snippet for your widget.

1. Click on Get Embedded Code
2. Note your app credentials (App ID, Auth Key, Region, Variant ID)
3. Copy the code snippet

What these credentials mean

Credential	What it is
App ID	The unique identifier of your CometChat app, from the Dashboard.
Region	The region your app is provisioned in (for example us, eu, in).
Auth Key	An app-level key used to log users in directly from the page. Convenient for development, but it is visible to anyone who views your page source — see Authenticating users below.
Variant ID	Identifies a specific saved version (snapshot) of your Widget Builder configuration. If you omit it, the first available variant is used.

3. Integrate

Add the embed code to your Webflow website and go live.

1. Add a custom code embed — In the Webflow Designer, add an Embed element to your page
2. Paste the code snippet into the Embed element
3. Configure credentials — Set your App ID, Region, and Auth Key in the snippet
4. Authenticate users — Choose a sign-in mode so CometChat knows who each visitor is (see Authenticating users below)
5. Launch — Publish your Webflow site and the chat widget is live

Follow the full Integration Guide

Step-by-step instructions for embedding the Widget Builder into your Webflow website

---

Authenticating users

Every person in CometChat is identified by a UID (User ID) — a unique, unchangeable string such as user_123, an email, or a member ID from your site. Before the widget can send or receive messages, it must log a user in. The embed snippet supports three sign-in modes, selected with the mode field in the widget config:

Guest mode

mode: "guest" lets anyone chat without an account. CometChat assigns a temporary identity. Best for marketing pages, help centers, and demos.

UID mode

mode: "uid" logs people in with an ID you already have (member ID, email, etc.). CometChat creates the user the first time it sees that UID. No backend required.

Auth token mode

mode: "authToken" logs people in with a short-lived token your server generates. This keeps your Auth Key off the page and is the recommended choice for production.

Do not ship your Auth Key in production. In guest and UID modes the Auth Key is embedded in the page and is visible to anyone who views the source. For production, generate a per-user auth token on your server and log in with mode: "authToken" instead. See Authentication and User Management for the server-side flow.

The full Webflow Integration Guide includes copy-paste snippets for all three modes, including a Memberstack auto-login example and the auth token login flow.

Webflow’s member-identity APIs (such as Memberstack) are owned by those platforms and are outside CometChat’s control. To map a logged-in member to a CometChat UID, consult that platform’s own documentation for the member object, then pass that ID as the uid (UID mode) or use it server-side to mint an auth token. The Integration Guide shows a worked Memberstack example.

---

Try Live Demo

Experience the CometChat Widget Builder in action:

Launch Live Demo

---

Need Help?

Developer Community

Connect with other developers and get answers

Support Portal

Contact our support team for assistance

---

Related Resources

Authentication & User Management

Create users and issue server-generated auth tokens

JavaScript Chat SDK

Learn more about the CometChat JavaScript SDK

HTML Widget

Widget Builder for HTML websites

Squarespace Widget

Widget Builder for Squarespace websites