I’m creating a specific campaign for this year, and I’d love to use Docebo’s gamification and badging feature. We’ve used it successfully for many other things, but never quite like this.
For marketing reasons I want a way to show the badges someone has earned within this specific collection, and I can’t figure out how to make the gamification widget do that. No matter what settings I choose the widget shows the user every badge they have earned instead of just the ones in this collection.
Does anyone have a way to filter at the widget level instead of at the collection level? I don’t want to hide their other badges complete, just on this page.
Creative suggestions are welcome. I am familiar with CSS and other web markup languages.
Page 1 / 1
Ok get ready for a very “creative solution” that involves a lot of CSS.
I don’t believe there’s a way to just create a filter for which badges should appear in a gamification widget but with CSS we can add our own “filter”.
Here’s an example of the CSS I propose:
/*Hide all badges in gamification widget on page 14*/ #doc-page-14 gamification-widget .list-badges-content li { display: none; }
/* Force visibility of select badges based on badge image URL*/ #doc-page-14 gamification-widget .list-badges-content li:has(imgesrc="//cdn1.dcbstatic.com/files/n/t/ntosto_docebosaas_com/assets/badges/small/3a7ac0d613ce00e42f1a34b7321b470c37a240f2.png"]), #doc-page-14 gamification-widget .list-badges-content li:has(imgesrc="//cdn1.dcbstatic.com/files/n/t/ntosto_docebosaas_com/assets/badges/small/3a7ac0d613ce00e42f1a34b7321b472348757a240f2.png"]) { display: block; }
In the above code #doc-page-14 represents the page ID for the page you want to apply the code to. you can find the page ID in the URL of the page.
You could also target the specific gamification widget ID which can be found in the inspector.
The second block of code is selecting two badges to show based on the image URL. If you right click and inspect on the badge image, you should be able to find the URL. It will look something like this:
If you copy the image URLs and add them to the CSS you should be able to selectively decide which badges can show on this widget.
Note: Custom CSS doesn’t apply in the mobile app so this solution won’t work in the app.
Let me know if you have any questions or if it doesn’t work!
Ok get ready for a very “creative solution” that involves a lot of CSS.
I don’t believe there’s a way to just create a filter for which badges should appear in a gamification widget but with CSS we can add our own “filter”.
Here’s an example of the CSS I propose:
/*Hide all badges in gamification widget on page 14*/ #doc-page-14 gamification-widget .list-badges-content li { display: none; }
/* Force visibility of select badges based on badge image URL*/ #doc-page-14 gamification-widget .list-badges-content li:has(imgesrc="//cdn1.dcbstatic.com/files/n/t/ntosto_docebosaas_com/assets/badges/small/3a7ac0d613ce00e42f1a34b7321b470c37a240f2.png"]), #doc-page-14 gamification-widget .list-badges-content li:has(imgesrc="//cdn1.dcbstatic.com/files/n/t/ntosto_docebosaas_com/assets/badges/small/3a7ac0d613ce00e42f1a34b7321b472348757a240f2.png"]) { display: block; }
In the above code #doc-page-14 represents the page ID for the page you want to apply the code to. you can find the page ID in the URL of the page.
You could also target the specific gamification widget ID which can be found in the inspector.
The second block of code is selecting two badges to show based on the image URL. If you right click and inspect on the badge image, you should be able to find the URL. It will look something like this:
If you copy the image URLs and add them to the CSS you should be able to selectively decide which badges can show on this widget.
Note: Custom CSS doesn’t apply in the mobile app so this solution won’t work in the app.
Let me know if you have any questions or if it doesn’t work!
You’re a saint! I’ll try it out and see if this works.
