Summary
Introduce a "Social Sharing" feature that allows users to generate and share visual "Achievement Cards" for their unlocked badges, levels, or completed milestones on platforms like X (Twitter), LinkedIn, and Discord.
Problem
Currently, when users unlock an achievement or reach a new level on the platform, their progress is confined to the application itself. This limits the "social proof" and status-building aspects that are imp for effective gamification Users miss out on the ability to showcase their hard work, and community managers miss out on organic, user-driven growth and visibility for their platforms.
Proposed solution
What we are making: We are adding a "Share" button to unlocked achievements that dynamically generates an image (an "Achievement Card") and allows the user to share it on social media or download it.
how will implement:
- will use html-to-image (or html2canvas) to handle DOM-to-image conversion cleanly on the frontend.
- Create the Card Template Component : will build a visually appealing React component that takes props (ex- userName, badgeName, badgeIcon, dateUnlocked).
- Update the Achievement UI: will add a "Share" icon/button next to each unlocked badge. where the existing profile or dashboard page where achievements are listed.
Benefits
Increased User enagement Social recognition is a massive driver for continued engagement.
Organic Growth: Shared achievement cards act as free, marketing for the communities using this platform.
Enhanced Reward Value: Making digital badges easily shareable gives them more tangible value to the end user.
Additional context
If client-side generation causes performance issues, we can do server-side image generation using satori on the Node.js backend to provide dynamic Open Graph images.
Notes for contributors
Summary
Introduce a "Social Sharing" feature that allows users to generate and share visual "Achievement Cards" for their unlocked badges, levels, or completed milestones on platforms like X (Twitter), LinkedIn, and Discord.
Problem
Currently, when users unlock an achievement or reach a new level on the platform, their progress is confined to the application itself. This limits the "social proof" and status-building aspects that are imp for effective gamification Users miss out on the ability to showcase their hard work, and community managers miss out on organic, user-driven growth and visibility for their platforms.
Proposed solution
What we are making: We are adding a "Share" button to unlocked achievements that dynamically generates an image (an "Achievement Card") and allows the user to share it on social media or download it.
how will implement:
Benefits
Increased User enagement Social recognition is a massive driver for continued engagement.
Organic Growth: Shared achievement cards act as free, marketing for the communities using this platform.
Enhanced Reward Value: Making digital badges easily shareable gives them more tangible value to the end user.
Additional context
If client-side generation causes performance issues, we can do server-side image generation using satori on the Node.js backend to provide dynamic Open Graph images.
Notes for contributors