Discourse Reactions

:discourse2: Summary Discourse Reactions allows users to React to a post from a choice of emojis, rather than only the Like heart. The available emoji selection can be set from the admin settings.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-reactions
:open_book: Install Guide How to install plugins in Discourse

Bored of likes in discourse? Here’s something you will definitely love.

Overview

Discourse-reactions is a plugin that allows user to add their reactions to the post. This plugin can engage more audiences to the post. Users who may not have previously wanted to Like your content are now able to send more specific signals about how your content makes them feel. Users who may not have wanted to use their phones to post can now use them to “react” much easier.

Reactions can be different on each website as we have an amazing feature where site admin can set their list of emojis which can be used as reactions.

To customize the reactions use the site setting discourse_reactions_enabled_reactions and define emojis you want as reactions separated by | eg: open_mouth|cry|angry

This plugin will work as an add-on to the likes feature, anytime you want to remove the plugin, all likes will be preserved.


Configure

You can configure these Site Settings:

  • discourse_reactions_enabled To enable the plugin
  • discourse_reactions_enabled_reactions To define the list of enabled reactions, any emoji is allowed here. default: laughing|open_mouth|cry|angry|thumbsup|thumbsdown
  • discourse_reactions_like_icon To replace the like icon.
  • discourse_reactions_reaction_for_like To define the name of like reaction.

Creating a reaction

The reaction can be created either by clicking the like icon OR by hovering and selecting reaction from the reaction picker.

Note:

  • In Mobile to open the reaction-panel long press on like icon.

Screenshot 2021-03-15 at 10.14.04 AM

See who reacted?

On the left side of the post, there will be a list of reactions, by clicking on it, there will be a modal displayed with the list of reactions.


If there are only likes in the post, a list of reactions will not be available but there will be a like-count besides the like button. clicking on it will display the same modal.

Don’t want to see this whole modal? Just hover on the reaction-emoji in the list to see the recently reacted users (Available Only on the desktop site).

See Your reactions?

In the user page activity, there is an extra Reactions tab where you will find all reactions you made.

See who reacted to your post?

In the user page notifications, there is an extra Reactions tab where you will find all reactions made to your posts.

Badge

First Reaction Badge is granted to the user when they make their first reaction to a post.

Contributors

@Ahmed_Gagan

@joffreyjaffeux
@kris.kotlarek
@Roman_Rizzi

Special Thanks

Special thanks to @joffreyjaffeux for being such a nice mentor and for being super helpful in everything :open_hands: and @team for helping us to make the plugin works perfect by finding bugs as much as possible.

Last edited by @JammyDodger 2024-06-18T14:22:05Z

Check documentPerform check on document:
170 Likes

6 posts were split to a new topic: Errors with Reactions after upgrade

First, thanks so much for giving us reactions! :tada:

I’ve come across a scenario where reactions don’t work quite as intended.

  1. I have an existing site with likes (hearts)
  2. I add discourse-reactions, and configure it to have the slight-smiling emoji (like github) as the “like” icon
  3. Now, all previous “hearts” are “slightly smiling” faces instead.

Problem 2: default likes are treated differently from other emoji responses, meaning that if I choose “slightly smiling face” as my reaction icon and “heart” as my default like emoji, then the heart does not show up when the face is clicked. Instead, the face shows a little 1 to it, which does not make sense in that scenario.

Recommendation: add an option to handle “likes” the same as any other emoji, i.e. to display them off to the left.

3 Likes

Is there a way to limit the reactions available depending on Group/TL? e.g. you get only the heart unless you are in the XYZ group in which case you can also make a ThumbsUp reaction.

Hi @Isambard :smiley:

I’m afraid that at the moment, you can’t restrict reactions to a group. Feel free to create a feature request though :wink:

4 Likes

I believe this can possibly be accomplished to some extent using the CSS Classes for Current User's Groups theme component and some css conditionals, probably in an accompanying theme component.

4 Likes

Hi. How can I change it so that there’s no timer on how long reactions can be un-done/changed? Only after a short time, I get: “You can no longer remove your reaction”

1 Like

It’s the post undo action window mins setting

2 Likes

I see I can set it to 0 or even negative numbers…which option makes it so there’s no timer at all? :open_mouth:

3 Likes

Ah, ok. Hopefully there will be an option added to disable timer completely. Surprised there isn’t on launch, haha. Thank you!

1 Like

Need some help anyone please

I placed beer for a like icon

The image displays a web interface setting specifying "beer" as the Font Awesome icon name for a discourse reaction like button. (Captioned by AI)
image

and got the color changed with a component

common css

.discourse-reactions-actions.has-reacted.has-used-main-reaction .discourse-reactions-reaction-button .reaction-button .d-icon {
    color: #ffd000;
}

past beers I have given, all is well
image

one’s I get, good I’m happy
image

but nothing shows to give one

image

page with instances

Can anyone help with getting the giving a beer to show please?

Thank you :beers:

You can look at a solution here:

3 Likes

excellent, I placed your script in a component head I had working on beer color

image

and it worked, thank you!

image

but it seems what I was doing for beer color caused other issues

is there some bad recipe here for icon color?

.discourse-reactions-actions.has-reacted.has-used-main-reaction .discourse-reactions-reaction-button .reaction-button .d-icon { color: #ffd000;}