CometChat Pro Documentation

You'll find comprehensive guides and documentation to help you start working with CometChat as quickly as possible. Let's jump right in!

WordPress

This tutorial tell us how to add Chat Widget to your WordPress application.

Before getting started

Go through the introduction to set up Chat Widget from the CometChat Dashboard

Installation

  1. Download the CometChat Pro plugin
  2. Go to the WordPress Admin section and visit Plugins > Add New

Add new plugin

  1. Click on the ‘Upload Plugin’ button, here you need to click on the ‘Choose File’ button and select the plugin zip file. After you have selected the file, you need to click on the ‘Install Now’ button.

Upload Plugin > Choose File > Install Now

  1. WordPress will now upload the plugin file and install it for you.
  2. Once installed, you need to click on the 'Activate Plugin' link to start using the plugin.

Activate the plugin

Configuration

  1. You can access the App ID, Region, Rest API key and Auth Key from the CometChat Dashboard under Chat Widgets section > Chat Widget App > Under Install tab on the right panel

Reference of the CometChat Dashboard

Visit Settings on WordPress dashboard >> CometChat Pro

  • Add CometChat App ID,
  • Select CometChat Region
  • Add CometChat Rest API Key
  • Add CometChat Auth Key

Configuration of settings in the WordPress Dashboard

  1. Once the Update Settings button is clicked, the WordPress login user will automatically be registered as a user in the CometChat dashboard

  2. You have two options to load the chat widget layout of your choice

  • Embedded Layout
  • Docked Layout

Embedded Layout

Embedded Layout of Chat Widget

Use the shortcode to load the Chat Widget in the embedded layout. You need to configure the keys and pass the required values to the keys in the shortcode.

[cometchat-pro default-type='user' widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v2']

The list below gives the configurable keys and their description

Keys

Description

default-type

Either user or group depending upon the default ID

widget-id

The ID of the widget can be accessed from the CometChat dashboard

widget-width

Width of the widget

widget-height

Height of the widget

widget-version

Version of the Chat Widget

You may pass optional parameters in the shortcode

Keys (optional)

Description

default-username

The default user with whom the logged In user can start a conversation

default-id

To show a default logged in user or group in your chat
a.Use UID of a user for one - one conversations
b.Use GUID for group conversations

rounded-corners

Boolean value (true/false) that enables/disables rounded corners

Docked Layout

Docked Layout of Chat Widget

Use the shortcode to load the Chat Widget in the docked layout. You need to configure the keys and pass the required values to the keys in the shortcode.

[cometchat-pro default-username='USERNAME' default-type='user' widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v2' widget-docked='true' widget-docked-position='right' rounded-corners='true']

The list below gives the configurable keys and their description

Keys

Description

default-type

Either user or group depending upon the default ID

widget-id

The ID of the widget can be accessed from the CometChat dashboard

widget-width

Width of the widget

widget-height

Height of the widget

widget-version

A version of the Chat Widget

widget-docked

Boolean value to show or hide the docked layout

widget-docked-position

Alignment of the Chat widget to the left or right of the screen

You may pass optional parameters in the shortcode

Keys (optional)

Description

default-username

The default user with whom the logged In user can start a conversation

default-id

To show a default logged in user or group in your chat
a.Use UID of a user for one - one conversations
b.Use GUID for group conversations

rounded-corners

Boolean value (true/false) that enables/disables rounded corners

Show docked layout on all pages

  1. Visit WordPress Settings >> CometChat Pro
  2. Copy the above shortcode and paste under Load CometChat Pro on all pages/sitewide?

If the above steps are followed, you should successfully be able to launch the Chat Widget in your WordPress application

Advanced Features

Message Listener

We have provided a callback that is fired every time a message is received. You can use this to show Custom Notifications on your website or perform some other custom action as per your requirement.

CometChatWidget.launch({
  // Refer to the docked or embedded layout
}).then(response => {

  // OPTIONAL: This is called in the success callback of launch method
  CometChatWidget.on("onMessageReceived", (args) => {
    console.log("CometChatWidget onMessageReceived", args);
  });
});

Open or close chat window

Chat window of docked layout can be opened/closed using the below method.
This method can be triggered on the click event of any element of your webpage.

CometChatWidget.openOrCloseChat(FLAG); //true or false

It takes the following parameters:

Parameter

Description

Type

FLAG

Value could be true or false
true will open the chat window
false will close the chat window.

Required

Chat with a particular user

This method will open a particular user chat window.
This method can be triggered by the click event of any element of your webpage.

CometChatWidget.chatWithUser(UID);

It takes the following parameters:

Parameter

Description

Type

UID

The ID of the user you want to chat with

Required

Chat with a particular group

This method will open a particular group chat window.
This method can be triggered by the click event of any element of your webpage.

CometChatWidget.chatWithGroup(GUID);

It takes the following parameters:

Parameter

Description

Type

GUID

The ID of the group you want to chat with

Required

Localization

With language localization, our Chat Widget adapts to the language of a specific country or region.
Chat Widget allows you to detect the language of your users based on their browser settings and set the language of the widget accordingly.
Currently, we support the following 10 languages for localization:

  • English (en, en-US, en-GB)
  • Chinese (zh, zh-TW)
  • Spanish (es)
  • Hindi (hi)
  • Russian (ru)
  • Arabic (ar)
  • Portuguese (pt)
  • Malay (ms)
  • French (fr)
  • German (de)
CometChatWidget.localize(LANGUAGE_CODE);

It takes the following parameters:

Parameter

Description

Type

LANGUAGE_CODE

The language code the texts to be translated into

Required

Updated 26 days ago


WordPress


This tutorial tell us how to add Chat Widget to your WordPress application.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.