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 + Add 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).
  4. Add a variant and customize the widget settings as needed.

Customize Chat Widget

  1. In Chat 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.

Export Code

  1. In Chat 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

  • Test end-to-end chat functionality in a development environment.
  • Deploy the updated application to production.