A white polar bear

Nice Polar Blog

Categories: [Matrix] [Posts]

Tags: [Matrix]

Matrix Stickers

Table of Contents

You possibly don’t know matrix stickers. e I have collected over these past few months some JSON’s, curiously I have found 2 types of “stickers”, so I will share and discuss them. Moreover I will also explain how some clients implement stickers.

Let’s open the dev console!

The m.room.message “hack” ๐Ÿ”—

This type of sticker is more of a inline message, you probably have seen this variant if a room has a discord bridge bot and users in the Discord room post custom emojis.

Here is the JSON data:

{
"body" : "sticker name",
"format" : "org.matrix.custom.html",
"formatted_body" : "<img data-mx-emoticon=\"\"
src =\ "mxc://example.org/hashid\" alt = \"sticker name\" title = \"sticker name\" height= \"12345\" vertical-align = \"middle\" />",
 "msgtype": "m.text"
}

Here is one real example, courtesy of Jaafar.

{
    "body": ":jerma: ",
    "format": "org.matrix.custom.html",
    "formatted_body": "<img data-mx-emoticon=\"\" src=\"mxc://kde.org/6b7facfc815238e85175193ffe9a2bf5c46fb35c\" alt=\":jerma:\" title=\":jerma:\" height=\"32\" vertical-align=\"middle\" />",
    "msgtype": "m.text"
}

Which will print you a Jerma amogus “sticker”. I would personally not use these, however they are very easy to craft

A message on Element demonstrating the Jerma \'amogus&rsquo; sticker. Nothing else to comment\...

The real method: m.sticker ๐Ÿ”—

Implemented on this Pull Request

This solution is much more clean and human readable, one popular implementation is the Element’s sticker picker for example.

Why m.sticker and not m.room.sticker? Well, because “i explicitly asked rick to s/m.room.sticker/m.sticker/g in some flu-riddled malaise last week”

{
    "body": "Landing",
    "info": {
      "mimetype": "image/png",
      "thumbnail_info": {
        "mimetype": "image/png",
        "h": 200,
        "w": 140,
        "size": 73602
      },
      "h": 200,
      "thumbnail_url": "mxc://matrix.org/sHhqkFCvSkFwtmvtETOtKnLP",
      "w": 140,
      "size": 73602
    },
    "url": "mxc://matrix.org/sHhqkFCvSkFwtmvtETOtKnLP"
}

And here is how it looks:

A message on Element demonstrating the Bunny sticker with red sticks.

Implementation examples ๐Ÿ”—

This section won’t go over a lot of technical details but instead provide a general overview of how some clients add stickers.

  • Element uses their own “Integration Manager” to provide a service for stickers, which in turn connects to scalar.vector.im. You will then be able to choose from a limited collection of sticker packs, my favorite pack is the KDE one ๐Ÿ˜Ž.

The integration manager, as viewed on the settings. Showing information and allowing the user to toggle it

  • Fluffychat has a very interesting implementation, they have both room stickers and user stickers, I suspect the room’s stickers are stored on whatever server they are hosted at, and similarly user stickers are stored on your homeserver.

The Fluffychat sticker creator as viewed on settings

Sadly I believe my homeserver (KDE) does not allow for user stickers, and about that, I think user stickers are just inline messages. (research needed!)

The Future of Stickers ๐Ÿ”—

Currently if you want to make your own stickerpicker it’s using this project (By the way I have not been able to pull dependencies on Windows, heeelpp). However this is not user friendly.

An interesting Pull Request for “Image Packs” is being discussed on GitHub and hopefully it will be merged once it’s stable.

Also see: https://matrix.org/blog/2021/07/23/this-week-in-matrix-2021-07-23

Previous: The Freedom Phone OEM problems

Next: New theme New year

This work is licensed under CC BY-SA 4.0 A circle with the letters CC in the middle A circle with the shape of a human in the middle A circle with an arrow circling to point itself