Skip to main content
Quick Reference for AI Agents & Developers - What this page covers: Step-by-step overview of setting up the CometChat Chat Widget for HTML websites — account creation, app setup, customization, and embedding. - Prerequisites: A CometChat account and access to the CometChat Dashboard. - Key action: Follow the steps below, then proceed to the HTML Integration guide to embed the widget code.
The Chat Widget enables you to embed a fully functional chat interface into your application with minimal setup. By following this guide, you will have a customized chat experience ready for your users in six simple steps.

​
Prerequisites

  • A valid CometChat account.
  • Permissions to create and manage applications in the CometChat Dashboard.
  • Basic familiarity with your target platform (Web, React, Angular, Vue, etc.).

​
Create Account

  1. Navigate to the CometChat Dashboard.
  2. Click Sign Up and complete the registration form.
  3. Confirm your email address to activate your account.

​
Create App

  1. Log in to the CometChat Dashboard.
  2. Click + Create New App.
  3. Enter an App Name, select a Region, and choose a Plan.
  4. Click Create and note your App ID, Region, and Auth Key.

​
Integrate No Code Solution

  1. In the Dashboard sidebar, select Integrate.
  2. Choose No Code.
  3. Select a Suitable Platform for your project (e.g., WordPress, HTML, PHP, Laravel etc.).
  4. Add a variant and customize the widget settings as needed.

​
Customize Chat Widget

  1. In UI Kit Builder, adjust Appearance.
    • Adjust Theme, Colors, and Typography to match your brand.
  2. Select Features (e.g., Block Users, Threaded Messages, Read Receipts).
  3. Preview changes in the Live Preview pane.
  4. Save and publish your changes.

​
Embed Code

  1. In UI Kit Builder, click Get Embedded Code.
  2. Note the app credentials:
    • App ID
    • Auth Key
    • Region
    • VariantID
  3. Follow the documentation to implement the code snippet.

​
Next Steps

HTML Integration

Embed the CometChat Widget into your static HTML website with a simple code snippet.

Advanced Setup

Explore advanced JavaScript controls for the CometChat Widget — open chats, listen for events, and more.

Legacy Widget

Using the older CometChat Widget? See the legacy integration guide.