A user seeks to display their gamification points from the Discourse Gamification plugin in the site header, specifically showing their total points from the leaderboard. After discussion, they successfully implement a solution by creating a custom component using the Discourse API to fetch and display the score in the header. The code dynamically adds a score container with a gold icon and points value, ensuring it appears only for logged-in users. The user shares the working implementation and a test site trgala.com for reference. TRgala_Murat explains the method, while NateDhaliwal and merefield provide guidance on using theme components and plugin outlets like before-header-panel.
Hello, I’m trying to do something. I want to display the user points from the Discourse Gamification plugin at the top of the site. For example, if a user named Adam has 700 points, how can I show this in the header section? Where should I place the code?
I mean, what I really want is for the user to see their own points.
Best regards!
at least give me an html example for user ratings
Perhaps this?
This supports just below header and Topic Route too
But you might need to build the Component yourself.
I want to move the Cheer Points from the user cards to the top of the homepage. The user should be able to see their score. These scores are taken from the leaderboard.
Would the placing for this banner/header item be by month, quarter, day, week, year, or all time?
Here’s the current Header API:
But you probably just want to attach a Component to an outlet
before-header-panel looks like a good one.
No sir. The user should only see their score in the header. I need to add the section that is added to the profile card to the header. This score is obtained from the leaderboard, which reflects the points earned from task
t will be based on the total points earned over all time.
Each user should see their score in the header section on the homepage. If there is a code or method to do this, please let me know. I’ve been struggling for 14 hours, and I’m fighting with my cat! 
There are loads of examples of Components. Look at the codebases of Customization > Theme component to look at examples of .gjs glimmer Components and note how they are attached to Plugin Outlets.
@merefield was referring to how you could build this component. The thing is, this is not a feature, so it’ll have to be made as a Theme Component.
I am sorry . I thought you didn’t understand me because my English was bad. I felt bad
the job is done
Do you mind sharing how you accomplished this?
I created a new component. I used API for points. I moved the user section to the home page
It is a temporary but useful method. Maybe they want to improve it, I leave the code here
Test website: https://trgala.com
Js
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("0.8", (api) => {
api.onPageChange(() => {
const currentUser = api.getCurrentUser();
if (!currentUser) {
console.warn("User not logged in");
return;
}
fetch(`/u/${currentUser.username}.json`)
.then(response => response.json())
.then(data => {
console.log("Gamification Data:", data);
let score = data?.user?.gamification_score ?? 0;
// Eğer puan kutusu zaten varsa tekrar ekleme
if (document.querySelector("#gamification-score")) return;
// Header'ın .contents kapsayıcısını bul
let headerContents = document.querySelector(".d-header>.wrap .contents");
if (headerContents) {
// Puan kutusunu oluştur
let scoreContainer = document.createElement("a");
scoreContainer.id = "gamification-score";
scoreContainer.classList.add("gamification-box");
scoreContainer.href = "website";
scoreContainer.target = "_blank"; // Yeni sekmede aç
// Altın simge
let icon = document.createElement("span");
icon.innerText = "T";
icon.classList.add("gold-icon");
// Puan metni
let scoreText = document.createElement("span");
scoreText.innerText = `${score}`;
scoreText.classList.add("gold-text");
// Simge ve metni kutuya ekle
scoreContainer.appendChild(icon);
scoreContainer.appendChild(scoreText);
// Kutuyu header'a ekle
headerContents.appendChild(scoreContainer);
}
})
.catch(error => console.error("Error fetching gamification score:", error));
});
});