Mentions

Mentions are a great way to get someone's attention in a conversation. Mentions start with the @ symbol followed by a name.

Extension settings

1. Login to CometChat and select your app.
2. Go to the Extensions section and enable the Mentions extension.

How does it work?

Implement UI logic in your app

Simply enabling the extension will not add the functionality to your apps. The Mentions extension heavily depends on the UI. It should have the following logic already implemented.

1. When @ symbol is typed in the message composer, show a list of all the users of that group.
2. Insert the selected name from the list in the message composer as @{Name|UID}.
3. The message bubbles and the message composer render the @{Name|UID} as just @Name.

For showing a list of users in a group, you can refer to our Retrieve Group Members documentation under the SDK of your choice.

For example:

To mention Ironman with UID superhero1, the text message should be Hello @{Ironman|superhero1}. However, it should be rendered or formatted as Hello @Ironman in the message composer as well as the message bubbles in the chat.

You have to use third party libraries that make the above mentioned implementation simpler and a rich text editor like Quill or TinyMCE.

Listing messages with mentions

To get all the messages with mentions for a user, make use of the callExtension method provided by CometChat SDK as shown below:

Javascript

const URL = "v1/fetch";
CometChat.callExtension('mentions', 'GET', URL, null).then(response => {
    // {messages: []}
})
.catch(error => {
    // Error occured
});

Java

String URL = "/v1/fetch";

CometChat.callExtension("mentions", "GET", URL, null,
new CometChat.CallbackListener < JSONObject > () {
    @Override
    public void onSuccess(JSONObject jsonObject) {
        // {messages: []}
    }
    @Override
    public void onError(CometChatException e) {
        // Some error occured
    }
});

Swift

CometChat.callExtension(slug: "mentions", type: .get, endPoint: "v1/fetch", body: nil, onSuccess: { (response) in
        // { messages: [] }
      }) { (error) in
        // Some error occured
      }
    }