# Discourse Stickers
**URL:** https://meta.discourse.org/t/discourse-stickers/280873
**Category:** Theme component
**Created:** [October 3, 2023, 11:19am UTC](https://meta.discourse.org/t/discourse-stickers/280873 "2023-10-03T11:19:44Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 3, 2023, 11:19am UTC](https://meta.discourse.org/t/discourse-stickers/280873/1 "2023-10-03T11:19:44Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Add Stickers |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/discourse-stickers) |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub](https://github.com/VaperinaDEV/discourse-stickers) |
| ❤ | **Found it useful?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
* * *
> **Discourse Stickers v1.0**
>
> Hello 👋
>
> With this theme component you can add stickers to posts and chat messages…
>
> **How it works?**
>
> It place a button in composer which opens the sticker modal.
>
> 
>
> Stickers Modal
>
> 
>
> When you click a sticker it will add it to the composer.
> The image markdown code is going inside `[wrap=sticker] img [/wrap]` which means the sticker images are targetable separately from the other images.
>
> 
>
> The stickers are always goes to new line and contains title and size. The size now fixed 180x180px. Each stickers has a shadow which makes the image more stickery…
> In the composer and posts the hover - meta information are hidden with CSS.
>
> * * *
>
> **How to setup?**
>
> First you need to upload the images you want to use for stickers. Simple upload these images in a topic post.
> We will work with these images we need the image url and markdown url.
>
> Example:
> I uploaded the image in a post. I use the `optimized` version of the image url. Which is found here 🔽 but you can use whatever url of the image.
>
> 
>
> The markdown upload url inside brackets 🔽
>
> 
>
> * * *
>
> **Settings**
>
> 
>
> **sticker images**
> In the sticker images setting you can set up the stickers…
>
> 
>
> **title** : This is the image title and alt. It will goes to the markdown code title too.
>
> **emoji** : It will goes in the Sticker Modal to each sticker top right corner.
>
> **previewUrl** : This the image what shown in Sticker Modal.
>
> **markdownUrl** : This is the previously uploaded image markdown url.
>
> * * *
* * *
# Discourse Stickers v2.0
Hello 👋
With this theme component you can add **stickers to posts, replies, and chat messages**.
Version **2.0** introduces a redesigned sticker manager with native image uploads, sticker groups, category-based visibility, and chat-specific controls.
## How does it work?
The component adds a sticker button to the composer. Clicking it opens the sticker picker.
When you select a sticker, it is inserted directly into the composer.
For regular posts and replies, stickers are wrapped in:
`[wrap=sticker][/wrap]`
This allows sticker images to be styled separately from regular images.
Published stickers are not clickable and will not open the Discourse lightbox.
* * *
## Sticker picker
The sticker picker supports **groups** when you have a larger collection of stickers.
If multiple groups are configured, a filter bar is displayed at the top of the picker.
Stickers without a group are automatically placed under **Other**.
If no stickers are available for the current context, the picker displays an empty state.
* * *
## How to set up?
The sticker configuration has been completely redesigned in v2.0.
You **no longer need to upload images to a topic first or manually copy image URLs**.
Simply go to the component settings and add a sticker. The **Image** field allows you to upload the sticker directly.
### Sticker settings
Each sticker can now have the following properties:
**Title**
The name of the sticker. This is used as the sticker’s tooltip and alt text.
**Group**
Optional. Use groups to organize your stickers and filter them in the picker.
Leave empty to place the sticker under **Other**.
**Emoji badge**
Optional. Displays a small emoji in the corner of the sticker.
You can use an actual emoji or a Discourse shortcode such as `:heart:` or `:smile:`.
**Image**
The sticker image.
Upload the image directly using the setting. The same image is used for both the picker and the posted sticker.
**Categories**
Optional. Restrict the sticker to specific categories.
If categories are selected, the sticker will only appear in the regular post/reply composer when one of those categories is selected.
Leave empty to make the sticker available in all categories.
This setting does not affect chat.
**Hide from direct messages**
When enabled, the sticker will not be available in private/direct message chats.
**Chat channels**
Optional. Restrict the sticker to specific public chat channels.
Enter channel IDs separated by commas.
For example, if the channel URL is:
`/chat/c/channel-name/123`
use:
`123`
Leave empty to make the sticker available in all public/category chat channels.
* * *
## Upgrading from v1.x
If you are already using an older version of the component, **you do not need to recreate your sticker collection**.
v2.0 includes a settings migration that automatically converts the old `sticker_images` configuration to the new format.
The migration preserves:
- sticker titles
- emoji badges
- existing uploaded sticker images
Existing uploaded images are resolved back to their original Discourse uploads and populated in the new **Image** field.
The old `previewUrl` and `markdownUrl` settings are no longer required.
Simply update the component and your existing stickers should be migrated automatically.
* * *
> [@Discourse Stickers](https://meta.discourse.org/t/discourse-stickers/280873/12):
>
> Discourse Stickers v2.0 This release is a fairly significant modernization of the component. Besides a number of internal improvements, the sticker configuration has been redesigned to make managing larger sticker collections much easier. artist_palette A completely redesigned sticker setting The biggest change in v2.0 is the sticker configurat…
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 3, 2023, 11:52am UTC](https://meta.discourse.org/t/discourse-stickers/280873/2 "2023-10-03T11:52:47Z")
Hi Don 👋
Nice job! I had a quick look 🙂
Managing the stickers is a bit tedious – especially the preview part – as they isn’t a specific, dedicated layout or feature to do this (like there is with avatars and custom emojis), but I understand it would be much more work.
The drop shadow filter is disabled when a gif is stopped, and doesn’t appear as a square background on the middle image here (a rectangle jpg which triggers a lightbox):
The filter effect is really neat, but I’d put it as an optional setting 🙂
The sticker picker use justified content such as:
```plaintext
XXX
X
```
But I think I’d prefer right aligned:
```plaintext
XXX
X
```
Very personal opinion, of course ✌
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 3, 2023, 2:10pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/3 "2023-10-03T14:10:33Z")
Thanks for the feedback @Canapin 🙂
> [@Canapin](#):
>
> I’d put it as an optional setting 🙂
I’ve added a new settings for this…
> [@Canapin](#):
>
> But I think I’d prefer right aligned:
>
> ```plaintext
> XXX
> X
>
> ```
This one also done… Much better 🙂
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 3, 2023, 4:54pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/4 "2023-10-03T16:54:57Z")
Update: [DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub](https://github.com/VaperinaDEV/discourse-stickers/commit/b6c30eb3978fb74c85a95895cb0feb7b2181fe7d)
---
### Author:  [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [October 28, 2023, 3:53pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/5 "2023-10-28T15:53:09Z")
Would it be possible to limit this to certain categories? (And, for that matter, have different stickers per category?)
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [October 28, 2023, 4:37pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/6 "2023-10-28T16:37:33Z")
If you can allow administrators to create sticker groups and users can customize sticker selection according to each group of their favorite topics.
And further, recommend based on the installed icon when a user uses an icon in an article, but I think this is a difficult feature.
---
### Author:  [@deltaR](https://meta.discourse.org/u/deltaR)
#### Post date: [November 9, 2023, 2:12pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/7 "2023-11-09T14:12:03Z")
May I ask what should I do to let the sticker in the text line, not in a new line? ( I’ve forked this repo)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 9, 2023, 4:31pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/8 "2023-11-09T16:31:36Z")
Hello 👋
Yeah you have to remove the `\n` from the beginning and end of this line.
>
* * *
> [@mattdm](#):
>
> Would it be possible to limit this to certain categories?
Hey @mattdm 👋 Sorry for the delay. Yeah I think it probably possible to show the button in composer per category. I need to check this.
> [@mattdm](#):
>
> different stickers per category
The component is already a little complex to setup. I am not sure with this. 🤔
> [@hoangphuctran93](#):
>
> If you can allow administrators to create sticker groups and users can customize sticker selection according to each group of their favorite topics.
> And further, recommend based on the installed icon when a user uses an icon in an article, but I think this is a difficult feature.
Hello 👋 Yeah this is an other level. 🙂 I am not sure it’s possible now with this built.
---
### Author:  [@deltaR](https://meta.discourse.org/u/deltaR)
#### Post date: [November 9, 2023, 5:03pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/9 "2023-11-09T17:03:36Z")
Thanks for replying!
But after changing, the sticker can’t be displayed, like this
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 9, 2023, 5:13pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/10 "2023-11-09T17:13:57Z")
Oh my bad sorry I think you should remove the `[wrap=sticker]` and [/wrap] too. It will display the image inline so it probably won’t missing. 🤔
The `[wrap=sticker]` is only for adding some styling to the sticker image.
>
---
### Author:  [@deltaR](https://meta.discourse.org/u/deltaR)
#### Post date: [November 9, 2023, 5:23pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/11 "2023-11-09T17:23:16Z")
I see, inline display can’t use `[wrap=sticker]`?
It works, thanks!
ps: I’m wondering if it is possible to hide hide the `markdownUrl` in the Composer, since it’ll be a long url and takes too much space?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 14, 2026, 2:31pm UTC](https://meta.discourse.org/t/discourse-stickers/280873/12 "2026-08-14T14:31:04Z")
## Discourse Stickers v2.0
This release is a fairly significant modernization of the component. Besides a number of internal improvements, the sticker configuration has been redesigned to make managing larger sticker collections much easier.
## 🎨 A completely redesigned sticker setting
The biggest change in v2.0 is the sticker configuration itself.
The old version stored stickers as a JSON setting containing values such as:
- `title`
- `emoji`
- `previewUrl`
- `markdownUrl`
In v2.0, this has been replaced with Discourse’s native **`objects` setting type**.
Each sticker is now a proper configurable object with its own fields:
- **Title** - the sticker name / tooltip text
- **Group** - optionally organize stickers into groups
- **Emoji badge** - optionally display a small emoji in the corner
- **Image** - upload the sticker directly through the setting
- **Categories** - optionally restrict stickers to specific categories
- **Hide from direct messages** - control whether a sticker is available in DMs
- **Chat channels** - optionally restrict stickers to specific public chat channels
This makes the sticker configuration much easier to understand and maintain, especially for larger collections.
## 🍱 Sticker groups and filtering
You can now assign stickers to a **Group**.
When multiple groups are available, the sticker picker automatically displays a filter bar at the top.
You can switch between:
- **All**
- individual groups
- **Other** for stickers without a group
The filter is generated dynamically from the stickers currently available to the user.
## 🏷 Category-specific stickers
Stickers can now optionally be assigned to specific Discourse categories.
If a sticker has categories configured, it will only appear in the regular post/reply composer when one of those categories is selected.
If no categories are configured, the sticker remains available everywhere.
## 💬 More control over Chat stickers
v2.0 adds more control over sticker availability in Discourse Chat.
You can now:
- hide individual stickers from direct messages;
- restrict stickers to specific public chat channels;
- leave the channel setting empty to make a sticker available in all public/category chat channels.
This allows administrators to maintain different sticker sets for different parts of their community.
## 🚫 Published stickers are no longer clickable
Published stickers are now treated as non-interactive images.
They no longer open the Discourse lightbox when clicked.
This applies both to:
- stickers in regular posts;
- stickers posted in Chat.
The goal is to make stickers behave more like actual sticker/reaction content rather than normal uploaded images.
## 🪹 Better empty state
If no stickers are available for the current context, the picker now displays a proper empty state instead of simply showing an empty picker.
For example, this can happen when category or Chat restrictions prevent any sticker from being available.
## 🔄 Existing sticker configurations are migrated
One of the most important parts of v2.0 is that existing installations **do not need to recreate their sticker collection**.
The old `sticker_images` JSON setting is automatically migrated to the new `objects` format when the component is updated.
Existing sticker titles and emoji values are preserved.
Most importantly, existing uploaded sticker images are also migrated automatically.
So if you already have dozens of stickers configured, updating to v2.0 should **not require you to upload all of them again**.
The old `markdownUrl` property is no longer needed and is not carried over because the new `Image` field represents the actual Discourse upload.
* * *
>
>
> Modernizes the component and significantly expands sticker management.
>
> \### Wh…at's included
>
> \- Migrate \`sticker\_images\` from the legacy JSON setting to Discourse's native \`objects\` setting.
> \- Add native image uploads for stickers.
> \- Add optional sticker groups with filtering in the picker.
> \- Add category-based sticker visibility.
> \- Add Chat-specific visibility controls for direct messages and channels.
> \- Modernize the sticker modal to Glimmer.
> \- Improve sticker selection by passing the selected sticker directly to the action.
> \- Prevent published stickers from opening the lightbox.
> \- Add a proper empty state when no stickers are available.
> \- Add localization for the new UI and settings.
> \- Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version.
>
> \### Migration
>
> Existing \`sticker\_images\` configurations are automatically migrated when the component is updated.
>
> Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again.
>
> The legacy \`markdownUrl\` property is no longer used because the new \`image\` property directly represents the sticker upload.
I’ve updated the [OP](https://meta.discourse.org/t/discourse-stickers/280873) too.