How to Add Widgets to a Gamification System
Many gamification providers provide a suite of widgets that you can embed in your site to educate, encourage, and guide users. The point of using widgets is that they’re crazy easy to implement in your gamification system.
Examples of widgets you might add to your gamification program include the following:
Activity feed widget: An activity feed widget displays achievements unlocked by users in a continually updated stream. This widget serves a few purposes: creating a dynamic, live feeling to the site, advertising available rewards, and giving users recognition.
Missions widget: This type of widget displays all missions in which a user is currently engaged. Mission progress should be clearly indicated numerically and with a visual progress bar. In addition, this widget should list all missions available for a user. Ideally, clicking a mission opens the mission widget, which displays all rewards for gameplay in the mission.
Showcase widget: The showcase widget is a collection of gameplay progress and stats. A list of missions is a component of the showcase. Each mission card opens a mission widget, where you can see all of the achievements/ rewards in the mission. You would use this type of widget on a profile page, because it represents a member’s rewards-based identity and status.
Rewards widget: A rewards widget contains a user profile summary, recent achievements, access to a showcase widget, and access to a settings widget.
Settings widget: A settings widget allows your user to configure options like selecting a profile image and enabling/disabling browser and e-mail notifications.
Header widget: A header widget displays the user name, profile picture, points, and level information. As users navigate and use your site, their points increase in real time. This widget, which is designed to be added inline to an existing header on your page, brings great visibility to your gamification rewards program. It educates users about your rewards program and, as points continually increase, it encourages continued on-site activity.
The header tab widget is similar. The header tab widget offers all the same benefits as the header widget, but in a self-contained block, placed on a static location on your gamification site.
Player card widget: Like the header widget, this type of widget is designed to communicate member identity succinctly and prominently. The player card contains a user profile image on the left along with her numeric level; on the right is other information such as display name, level, and points.
Leaderboard widget: With this type of widget, the top users for the configured time slice are displayed. This widget can be used when you want to prominently advertise the rewards program and advertise its social nature. It creates a social layer and provides instant gamer community around achievement and rewards.
Multitab widget: A multitab widget is essentially a hybrid, melding a gamification leaderboard widget with a gameplay rewards widget. Again, the rewards widget in turn offers access to a showcase widget and a settings widget.
Levels widget: This type of widget displays all unlocked and locked levels in a single display. It’s excellent for gamification programs in which level progression is critical.
Some gamification providers let you alter their widgets by customizing the look and feel. Some even help you to design your own. If your styling requirements can only be met through CSS, you may be able to create a CSS file and override existing styles as necessary. You then link to the CSS file as you normally would.