Message Shortcuts

The Message Shortcuts extension enables your users to send each other predefined messages.

For example, !hb can be automatically expanded to Happy birthday!

Global shortcuts are available to all users. User-created shortcuts are private to the creator.

Extension settings

1. Open your CometChat app

   Login to CometChat and select your app.

2. Enable Message Shortcuts

   Go to Chat & Messaging —> Features, under Extentions and enable Message Shortcuts.

3. Configure shortcuts

   Open the extension settings to view global shortcuts, then edit or add new ones.

4. Save settings

   Save your configuration to apply the updates.

---

How does it work?

The shortcuts saved in the Extension’s settings are Global message shortcuts that can be accessed by all the users of your app. The shortcuts saved by users are accessible only to them along with the Global message shortcuts.

With the Message Shortcuts extension, you can:

• Fetch shortcuts: Retrieve all shortcuts on the user’s device.
• Manage shortcuts: Allow users to add, edit, or delete shortcuts.
• Send faster: Expand shortcuts into full messages as users type.

---

Choose Your Integration Method

Choose the integration method that best suits your needs:

UI Kit Builder

• Enable it in both Dashboard and UI Kit Builder settings, then you can use the Message Shortcuts extension in your custom chat experience.

Widget Builder

• Enable it in both Dashboard and Widget Builder settings, then you can use the Message Shortcuts extension in your custom chat widget.

UI Kits

• Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our UI Kits.

SDK

• Enable it in the Dashboard settings, then you can use the Message Shortcuts extension in your custom chat experience built with our SDK.

---

Code

1. Fetch all shortcuts

Once the user has successfully logged in, you can request the shortcuts from the extension. Additionally, you can provide a button to refresh the shortcuts.

Make use of the callExtension method exposed by the CometChat SDK to fetch the shortcuts.

JavaScript

CometChat.callExtension('message-shortcuts', 'GET', 'v1/fetch', null)
.then(shortcuts => {
 	 // Save these shortcuts locally.
})
.catch(error => {
	// Some error occured
});

Java

CometChat.callExtension("message-shortcuts", "GET", "/v1/fetch", null,
    new CometChat.CallbackListener<JSONObject>() {
    @Override
    public void onSuccess(JSONObject responseObject) {
        // Shortcuts received here.
    }

    @Override
    public void onError(CometChatException e) {
        // Some error occured.
    }
});

Swift

CometChat.callExtension(slug: "message-shortcuts", type: .get, endPoint: "v1/fetch", body: nil, onSuccess: { (response) in
	print("Stickers",response)
}) { (error) in
  print("Error",error?.errorCode, error?.errorDescription)
}

The response will have the following JSON structure:

JSON

{
  "shortcuts": {
    "!hbd": "Happy Birthday! 🥳",
    "!cu": "See you later.",
    "!ty": "Hey! Thanks a lot! 😊",
    "!wc": "You're welcome!"
  }
}

2. Modify shortcuts

Shortcuts can be added, edited or deleted by your users. You need to have a section in your front-end application that allows the users to do so. The extension accepts a final list of shortcuts after all the modifications have been done by the user.

Make use of the callExtension method exposed by the CometChat SDK to submit the final customized list.

JavaScript

const finalList = {
  shortcuts: {
    "!hbd":"Happy birthday! Have fun!"
  }
};

CometChat.callExtension('message-shortcuts', 'POST', 'v1/update', finalList)
.then(response => {
 	 // Updated successfully.
})
.catch(error => {
	// Some error occured
});

Java

import org.json.simple.JSONObject;

JSONObject finalList = new JSONObject();
JSONObject shortcuts = new JSONObject();

shortcuts.put("!hbd", "Happy birthday! Have fun!");
shortcuts.put("!ttyl", "Talk to you later");

finalList.put("shortcuts", shortcuts);

CometChat.callExtension("message-shortcuts", "POST", "/v1/update", finalList,
 new CometChat.CallbackListener < JSONObject > () {
    @Override
    public void onSuccess(JSONObject jsonObject) {
        //On Success
    }
    @Override
    public void onError(CometChatException e) {
        //On Failure
    }
});

Swift

let finalList = ["shortcuts": ["!hbd": "Happy Birthday!" ,
            "!cu" : "See you later.",
            "!ty", "Hey! Thanks a lot! :blush:",
            "!wc", "You're welcome!"]]
CometChat.callExtension(slug: "message-shortcuts", type: .post, endPoint: "v1/update", body: finalList, onSuccess: { (response) in
	// Updated successfully.
}) { (error) in
	// Error occured
}

3. Use shortcuts

The UI implementation can be as follows:

1. Trigger the list

   When ! is typed in the composer, show a list of available shortcuts.

2. Filter as users type

   Filter the list by matching shortcuts as the next letters are entered.

3. Expand the shortcut

   Selecting a shortcut expands the predefined message in the composer.