Stickers

The Stickers Extension is more like an image manager which allows you to quickly add/remove stickers directly from the dashboard.

Extension settings

1. Open your CometChat app

   Login to CometChat and select your app.

2. Enable Stickers

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

3. Save settings

   Open the extension settings and click Save to activate Stickers.

CometChat provides 14 default sticker sets. You can also create your own sets and enable only the stickers you want to use.

How does it work?

• Load stickers: Fetch enabled sticker sets for your UI.
• Send stickers: Send stickers as media messages.
• Receive stickers: Render sticker messages received in chat.

Loading stickers

Before you start Sending or Receiving stickers in your app, you first have to load the Sticker Sets. In your app, you can add a section/drawer that shows the enabled stickers. A user can click on any of these stickers to send it in a chat.

In order to load stickers, you can use the callExtension method provided by our SDKs.

JavaScript

CometChat.callExtension('stickers', 'GET', 'v1/fetch', null)
.then(stickers => {
 	// Stickers received
})
.catch(error => {
	// Some error occured
});

Java

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

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

Swift

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

In response, you will get the following JSON which contains defaultStickers and customStickers arrays. Stickers with the same stickerSetId can be grouped together while displaying them in your application.

JSON

{
  "defaultStickers": [
    { 
      "stickerOrder": "4",
      "stickerSetId": "9bc4bf29-6913-4a95-84c5-53a385c8fa0f",
      "stickerUrl": "https://site.bear1.png",
      "stickerSetName": "Bear",
      "id": "530fe94e-e7b9-424b-8f6f-fa8454ae8d97",
      "stickerSetOrder": "1",
      "stickerName": "bear_1.png"
    },
    {
      ...
    }, ...
  ],
  "customStickers":[
    {
      "modifiedAt": "2020-06-03T14:28:17.339Z",
      "stickerOrder": "1",
      "stickerSetId": "70bcd62c-103a-4d8a-acc8-a9af3debd423",
      "stickerUrl": "https://images.com/812/hurray.png",
      "createdAt": "2020-04-25T10:41:42.697Z",
      "stickerSetName": "rejoice",
      "id": "dd8ab83a-b036-4220-9351-ad968152fd36",
      "stickerSetOrder": "1",
      "stickerName": "hurray"
    },
    {
      ...
    }, ...
  ]
}

Sending Stickers

Stickers can be sent as a media message. You can check Send message section (linked for JavaScript) of our SDKs for more details.

Also, you can send stickers as Custom message and include the incrementUnreadCount: true in the metadata of that custom message. This will help you increment unread counts for Custom messages (in this case stickers).

Receiving Stickers

Stickers are images that can be received and displayed as any regular media message. In your application, you can use the onMediaMessageReceived listener in order to receive stickers.

Refer to our Receive Messages documentation under the SDK of your choice.