Forem Creators and Builders

Cover image for Badges! Part 1: Creating Badges

Badges! Part 1: Creating Badges

Photo by Luciana Lambert from Pexels

If you're ready to dig into custom badges (and automatically awarded badge presets) for your Forem, Community Success are right here with you.

Video

A few months back, I channeled my inner riot grrrl and recorded a short tutorial for badge making, but... Let's just say that one of the things I love most about Forem is that it remains a constant work in progress, and so a few months later that tutorial is already outdated. Here's a newer version with way more words:
a preview of the video tutorial
click the image above to play the video

Step-by-step

Whilst we always recommend consulting the Forem Admin Docs for the latest information, this post will run you through the key steps as they are at the time of pubishing.

  1. Navigate to your-forem-url/admin/content_manager/badges or click your way there through the Admin Portal:

    Location of Badges in Admin Navigation bar

  2. You'll see a list of your current badges:

    Badge Overview with a List of current badges

  3. Click on Create Badge to open form with the following fields:

    Blank Create Badge form

    Title: name of badge (a badge's link is auto-generated based on the title, e.g. the title Slug of Badge would generate the link /badges/slug-of-badge)
    Description: the description that appears when a user is awarded the badge
    Badge Image: upload an image of your badge
    Credits Awarded: number of credits awarded to a user after they were awarded the badge

  4. Go ahead and fill out your fields:

    Completed Create Badge form

  5. Click Create Badge to confirm your choices and view your new badge in the list:

    New Badge in the list yay!

Congratulations! You have a new badge!

Remember to keep an eye on the Forem Admin Docs pages for the latest instructions.

Discussion (8)

Collapse
ildi profile image
Ildi

Another awesome tutorial! Thank you very much for creating this @ellativity

In this comment @michaeltharrington explained how Top Post by Tag Badges work. He mentioned that these are based on a weekly time frame. Is this customizable? The admin docs say: various badges are awarded for the author with the most popular article in a specific tag.

Few more questions:

  • Wondering about the best size/dimensions for badges. I'm not sure if there are any specific recommendations?

  • Is there a link where we can see a full list of all the dev.to badges that are available?

  • If we dont plan to use the marketplace/credit system, can we leave Credits Awarded field empty?

Collapse
ildi profile image
Ildi

I answered my own question about the link of all dev.to badges 🥳 It's here: dev.to/badges/

Collapse
ellativity profile image
Ella Ang (she/her/elle) Author

It's on your own Forem, too, @ildi !

You can see the badge I added in the video on forem.dev/badges

Collapse
lee profile image
Lee

I would love to know how to set all these up to be issued automatically, simple stuff first like getting a badge for your first comment and your first article.

Collapse
ellativity profile image
Ella Ang (she/her/elle) Author

As it stands now @lee , only the following badges can be issued automagically on your Forem:

  • Anniversary Badges: the 1-year, 2-year, 3-year badges are awarded on the anniversaries of a community member join date
  • Streak Badges: the 4-week, 8-week, and 16-week streak badges are awarded for publishing a post in consecutive weeks
  • Top Post by Tag Badges: various badges are awarded for the author with the most popular article in a specific tag
  • Beloved Comment: this badge is awarded automatically for any comment that reaches a certain threshold of positive reactions

This helpful thread from Michael and Dan details some of the logic of badges, and if the video skims over the instructions too quickly, more info on creating automatically-awarded badges can be found in the Forem Admin Docs.

Collapse
lee profile image
Lee

'automagically' 😇

Thread Thread
ellativity profile image
Ella Ang (she/her/elle) Author

🪄

Collapse
ellativity profile image
Ella Ang (she/her/elle) Author

I should have added that I would 100% welcome a Feature Request for customizable badges, if anyone wants to bite 😉