> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat Widget Builder For WordPress

> CometChat Widget Builder for WordPress is a no-code solution for embedding a fully functional chat interface with plugin configuration.

> [!NOTE]
>
> **Using the v1 widget (Chat Embed `@1.x.x`)?** Widgets created in the
> CometChat Dashboard now use v2. **Please upgrade to v2.** v2 is published on npm
> under the `next` tag today; in a future update it will become the default
> (`latest`) version and v1 will be marked as legacy. On WordPress the plugin picks the
> widget version: update to plugin **0.0.15 or later** and add
> `version="v2"` to your shortcode. A shortcode without `version` keeps
> loading v1. Check your custom CSS, JavaScript and variant settings against
> [Upgrade from v1 to v2](https://www.cometchat.com/docs/widget/migration) before you switch.

It provides a ready-to-use chat widget backed by CometChat's real-time infrastructure — install the plugin, configure your credentials, and go live.

With CometChat Widget Builder, you can:

* Embed chat and calling into any WordPress website
* Customize themes, colors, and typography
* Toggle features on and off
* Go live with a WordPress plugin and shortcode

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

> [card] [Ready to add chat to your WordPress website?](https://www.cometchat.com/docs/widget/wordpress/integration.md)
>
> 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 use with the WordPress plugin to embed chat.

***

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

![](https://mintcdn.com/cometchat-22654f5b/dJPACx1AKXUTpAHt/images/uikit-builder-preview.png?fit=max\&auto=format\&n=dJPACx1AKXUTpAHt\&q=85\&s=8a801797bb6c3c9af164502d41708a4a)

### 2. Get Embed Code

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

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

### 3. Integrate

Install the CometChat plugin on your WordPress site and go live.

1. **Install the plugin** — Download and activate the CometChat WordPress plugin
2. **Configure credentials** — Set your App ID, Region, API Version, and REST API Key in the plugin settings
3. **User Authentication** — CometChat uses a UID (User ID) to identify each user. Authenticate users to enable chat functionality.
4. **Launch** — Use shortcodes or the plugin settings to display the chat widget on your site

> [card] [Follow the full Integration Guide](https://www.cometchat.com/docs/widget/wordpress/integration.md)
>
> Step-by-step instructions for embedding the Widget Builder into your WordPress website

***

## Customization

The Widget Builder controls theme, colors, and typography with no code — set those in its **Styles** tab. For anything it does not expose, open the **Custom Code** tab and target the widget's own `cometchat-*` component classes with your own **Custom CSS** (and Custom JS). See [Customize the widget with CSS](https://www.cometchat.com/docs/widget/wordpress/integration.md#customize-the-widget-with-css) in the Integration guide.

***

## Try Live Demo

Experience the CometChat Widget Builder in action:

> [card] [Launch Live Demo](https://preview.cometchat.com/)

[YouTube video](https://www.youtube.com/embed/0mmX_3Ohnz8)

***

## Need Help?

> [card] [Developer Community](https://community.cometchat.com/)
>
> Connect with other developers and get answers

> [card] [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
>
> Contact our support team for assistance

***

## Related Resources

> [card] [JavaScript Chat SDK](https://www.cometchat.com/docs/sdk/javascript/overview.md)
>
> Learn more about the CometChat JavaScript SDK

> [card] [HTML Widget](https://www.cometchat.com/docs/widget/html/overview.md)
>
> Widget Builder for HTML websites

> [card] [Shopify Widget](https://www.cometchat.com/docs/widget/shopify/overview.md)
>
> Widget Builder for Shopify stores

> [card] [Wix Widget](https://www.cometchat.com/docs/widget/wix/overview.md)
>
> Widget Builder for Wix websites


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.