Profile widget

The Profile Widget provides users with an overview of their gamification programme. While usually embedded in the Header Widget, it can also be rendered as a standalone element in any HTML container.

Below are screenshots of the widget in action:

Profile widget showing the missions tab with available missions

Tool tip showing additional mission information on hover

Profile widget showing the achievements tab

Profile widget showing the levels tab with user progression

Profile widget showing the gifts tab

Profile widget showing the coupons tab

Profile widget showing the summary tab with overall statistics

Implementation

To render the Profile Widget, add a call to the Mambo profile() function in the mamboCallbacks() array. The example below shows the function call with all available options. None of these options are required, so you could simply use: Mambo('.selector').profile().

JavaScript

// Initialise the Mambo Callbacks array
var mamboCallbacks = window.mamboCallbacks || [];
mamboCallbacks.push(function() {

  // Render the Profile Widget in the DOM Element with an ID of 'profile'
  Mambo('#profile').profile({
    hasPicture: true,
    hasProfileLink: false,
    hideOnError: false,
    hasEarnPoints: true,
    earnPointsUrl: null,
    uuidOverride: null,
    hasGifting: true,
    giftOpts: {},
    tabs: {
      hasKPIs: true,
      hasMissions: true,
      hasLevels: true,
      hasAchievements: true,
      hasGifts: true,
      hasCoupons: true,
      hasSummary: true,
      selected: 'achievements',
      custom: [{
        title: "Marketing",
        tags: ['marketing']
      }],
      kpis: {
        label: null,
        filters: {
          daily: true,
          weekly: true,
          monthly: true,
          quarterly: true,
          yearly: true,
          selected: 'monthly',
          presentOnly: false
        }
      }
    },
    pointOpts: {
      show: true,
      img: true,
      abbr: true,
      exclude: ['549c0f26a95dfabe4a5e49ff'],
      include: ['549c0f1ba95dfabe4a5e49fe']
    },
    imgOpts: {
      picSize: 'medium',
      badgeSize: 'small'
    }
  });
});

Configuration options

Each option found in the code above is explained in detail below. None of these options are required.

Basic display options

Option	Description	Default Value	Sample Value
hasPicture	Determines whether the user's pictureUrl should be used to display the profile picture in the widget.	true	false
hasProfileLink	Controls whether the user's name should be a link to their profile page. The link will be taken from the user's profileUrl property. See the User APIs for more information.	false	true
hideOnError	Hides the widget if there is an error retrieving the user's data from the server. When set to true, the widget will only be shown after successfully retrieving user data, meaning no "Loading..." message will be displayed during data fetching.	false	true
uuidOverride	Allows you to override the default UUID initialised on startup with a custom UUID. This enables User A to view User B's profile information when navigating to User B's profile page.	N/A	unique_user_id

Option	Description	Default Value	Sample Value
hasEarnPoints	Controls whether the "How do I earn Points?" link is displayed. It is highly recommended to leave this option enabled.	true	false
earnPointsUrl	Provides an alternative behaviour for the "How do I earn Points?" link. By default, this link opens a popup window showing all available behaviours the user can perform. If earnPointsUrl is set, the link will instead open the specified URL.	N/A	http://site.com/user
pointOpts.show	Determines whether points should be displayed in the profile.	true	false
pointOpts.img	Controls whether images associated with points should be displayed. These images can be uploaded through the Administration Panel.	true	false
pointOpts.abbr	Controls whether points should be displayed using abbreviated units of measure. When false, the full unit of measure is used.	true	false
pointOpts.exclude	Specifies which points should not be displayed. Takes an array of point IDs, which can be found in the Administration Panel when editing a specific point.	null	['pointId']
pointOpts.include	Specifies which points should be displayed. Takes an array of point IDs, which can be found in the Administration Panel when editing a specific point. When both include and exclude are specified, the include list takes precedence.	null	['pointId']

Gifting options

Option	Description	Default Value	Sample Value
hasGifting	Controls whether the Gifting link is displayed. When clicked, this link opens the Gift Widget popup, allowing users to recognise each other with badges and/or points.	true	false
giftOpts	Allows customisation of the Gift Widget that appears when the Gifting link is clicked. For full details, refer to the Gift Widget documentation.	N/A	N/A

Tab display options

Option	Description	Default Value	Sample Value
tabs.hasKPIs	Controls visibility of the KPIs tab.	true	false
tabs.hasMissions	Controls visibility of the Missions tab.	true	false
tabs.hasLevels	Controls visibility of the Levels tab.	true	false
tabs.hasAchievements	Controls visibility of the Achievements tab.	true	false
tabs.hasGifts	Controls visibility of the Gifts tab.	true	false
tabs.hasCoupons	Controls visibility of the Coupons tab.	true	false
tabs.hasSummary	Controls visibility of the Summary tab.	true	false
tabs.selected	Specifies which tab should be selected when the Profile Widget is first rendered. Valid values include: kpis, missions, achievements, levels, coupons, and summary. For custom tag-based tabs, use the tab ID (tags joined by underscore, e.g., hr_dept_hr_group).	kpis	achievements
tabs.custom	Allows creation of custom tabs based on tags. The example shows how to add tabs for 'Marketing' and 'HR' rewards.	null	[{title:'Marketing',tags:['marketing']},{title:'HR',tags:['hr']}]

KPI display options

Option	Description	Default Value	Sample Value
tabs.kpis.label	Allows you to override the default tab name for KPIs.	KPIs	Performance
tabs.kpis.filters.daily	Controls whether daily filtering is available for KPIs.	true	false
tabs.kpis.filters.weekly	Controls whether weekly filtering is available for KPIs.	true	false
tabs.kpis.filters.monthly	Controls whether monthly filtering is available for KPIs.	true	false
tabs.kpis.filters.quarterly	Controls whether quarterly filtering is available for KPIs.	true	false
tabs.kpis.filters.yearly	Controls whether yearly filtering is available for KPIs.	true	false
tabs.kpis.filters.selected	Specifies which time period filter is selected by default. Note that user selections are stored as preferences.	monthly	weekly
tabs.kpis.filters.presentOnly	Determines if users can select any time frame or only the present time frame. When false, users can select specific past dates. When true, options are based on today's date (Today, This Week, This Month, etc.)	false	true

Image size options

Option	Description	Default Value	Sample Value
imgOpts.picSize	Controls the size of the user's profile picture displayed on the left side of the Profile Widget. Valid values: small, medium, large.	medium	small
imgOpts.badgeSize	Controls the size of badges (excluding KPIs) in the Profile Widget. Valid values: small, medium, large.	small	medium

Implementation​

Configuration options​

Basic display options​

Points-related options​

Gifting options​

Tab display options​

KPI display options​

Image size options​