Core SDK functionality

This section explains the fundamental components of the JavaScript SDK and how to interact with its event system.

The Mambo object

The Mambo object is the primary interface for the JavaScript SDK. It extends jQuery to provide widget initialization capabilities along with all standard jQuery functionality.

To use the Mambo object:

JavaScript

// Select an element by class and attach the header widget
Mambo(".header").header();

// Select an element by ID and attach the header widget
Mambo("#header").header();

// Use standard jQuery methods
Mambo(".content").html("Adding this string here...");

The Mambo object takes a selector parameter and returns a jQuery object enhanced with Mambo widget methods. This lets you render widgets in specific locations on your page.

Event system

The SDK uses an event-driven architecture that allows you to listen for and respond to various system events. This enables you to customize behavior, modify data before rendering, and integrate with your site's functionality.

Listening for events

The SDK extends jQuery's standard on() and one() methods for event handling. You can use these to listen for events triggered by the SDK:

JavaScript

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

  // Social Event
  // An example of how to listen for the mambo.social.loaded event
  Mambo.on('mambo.social.loaded', function() {
  	console.log('Social Media libraries have been loaded!');
  });

  // Data Event
  // An example of how to listen for the mambo.data.user event
  Mambo.on('mambo.data.user', function(event, data) {
  	console.log('The user data: ', data); // Backbone Model object
  	console.log('The user data: ', data.toJSON()); // JSON object

  	// Data can be manipulated before it is rendered
  	// The example below changes the displayName of the user.
  	// Try this out with the Header Widget.
  	// Note: both the lines below do the same thing. In the second version it's important
  	// to use the silent flag otherwise some views will get re-rendered unnecessarily
  	data.attributes['displayName'] = 'Override!';
  	data.set('displayName', 'Override!', {
  		silent: true
  	});
  });

  // Render Event
  // An example of how to listen for the mambo.render.header event
  // The data variable can be used to manipulate the header widget.
  Mambo.on('mambo.render.header', function(event, data) {
  	console.log('The header data: ', data);
  });

});

Note

Some of the mambo.data.* events return either a Backbone Collection or Model. To work with these as standard JSON objects, call the toJSON() function on the data object. Other mambo.data.* events return JSON objects directly. See the events reference table for specifics.

Note

The mambo.render.* events return a jQuery object containing the rendered element. See the jQuery API documentation for more information.

Available events

The SDK triggers various events that you can listen for.

Event	Description	Data Type
mambo.social.loaded	Triggered when both Facebook and Twitter SDKs have been loaded	N/A
mambo.social.fb_post	Triggered when a badge is shared on Facebook	N/A
mambo.social.tweet	Triggered when a badge is tweeted	N/A

User events

Event	Description	Data Type
mambo.user.create	Triggered when creating users	Backbone Model
mambo.user.update	Triggered when updating users	Backbone Model
mambo.user.search	Triggered when searching for users	Backbone Model

Activity events

Event	Description	Data Type
mambo.activity.create	Triggered when creating activities	Backbone Model
mambo.activity.cancel_bounty	Triggered when cancelling a bounty	Backbone Model
mambo.activity.award_bounty	Triggered when awarding a bounty	Backbone Model
mambo.activity.error	Triggered when an Activity API error occurs	Object

Data events

Event	Description	Data Type
mambo.data.activities	Triggered when activities data is loaded	Backbone Model
mambo.data.clear_notification	Triggered when a notification is marked as read	JSON Object
mambo.data.clear_all_notifications	Triggered when all notifications are marked as read	JSON Object
mambo.data.behaviours	Triggered when behaviours data is loaded	Backbone Collection
mambo.data.user	Triggered when user data is loaded	Backbone Model
mambo.data.user_notifications	Triggered when notifications data is loaded	Backbone Collection
mambo.data.user_wallets	Triggered when user point wallets are loaded	Backbone Collection
mambo.data.user_coupons	Triggered when user coupons are loaded	Backbone Collection
mambo.data.user_rewards	Triggered when user rewards are loaded	Backbone Collection
mambo.data.user_achievements	Triggered when user achievements are loaded	Backbone Collection
mambo.data.user_levels	Triggered when user levels are loaded	Backbone Collection
mambo.data.user_gifts	Triggered when user gifts are loaded	Backbone Collection
mambo.data.user_missions	Triggered when user missions are loaded	Backbone Collection
mambo.data.user_kpis	Triggered when user KPIs are loaded	Backbone Collection
mambo.data.user_activities	Triggered when user activities are loaded	Backbone Model
mambo.data.achievements	Triggered when achievements are loaded	JSON Object
mambo.data.levels	Triggered when levels are loaded	JSON Object
mambo.data.missions	Triggered when missions are loaded	JSON Object
mambo.data.leaderboard	Triggered when leaderboard data is loaded	Backbone Model
mambo.data.leaderboards	Triggered when multiple leaderboards are loaded	JSON Object

Render events

Event	Description	Data Type
mambo.render.tooltip	Triggered when a tooltip is rendered	jQuery Element
mambo.render.tooltip_reward	Triggered when a reward tooltip is rendered	jQuery Element
mambo.render.earn	Triggered when the "How do I earn points?" popup is rendered	jQuery Element
mambo.render.gift	Triggered when the "Gifting" widget is rendered	jQuery Element
mambo.render.activities	Triggered when the Activities Widget is rendered	jQuery Element
mambo.render.activity	Triggered when an individual activity is rendered	jQuery Element
mambo.render.notification	Triggered when the Notification Widget is rendered	jQuery Element
mambo.render.leaderboard	Triggered when the Leaderboard Widget is rendered	jQuery Element
mambo.render.header	Triggered when the Header Widget is rendered	jQuery Element
mambo.render.profile_simple	Triggered when the simple profile is rendered	jQuery Element
mambo.render.profile	Triggered when the Profile Widget is rendered	jQuery Element
mambo.render.tab_kpis	Triggered when the Profile Widget KPIs are rendered	jQuery Element
mambo.render.tab_gifts	Triggered when the Profile Widget gifts are rendered	jQuery Element
mambo.render.tab_levels	Triggered when the Profile Widget levels are rendered	jQuery Element
mambo.render.tab_achievements	Triggered when the Profile Widget achievements are rendered	jQuery Element
mambo.render.tab_missions	Triggered when the Profile Widget missions are rendered	jQuery Element
mambo.render.tab_mission_details	Triggered when the Profile Widget mission details are rendered	jQuery Element
mambo.render.tab_coupons	Triggered when the Profile Widget coupons are rendered	jQuery Element
mambo.render.tab_activities	Triggered when the Profile Widget summary is rendered	jQuery Element
mambo.render.tab_[tags]	Triggered when a Tag Tab is rendered, where [tags] is dynamically generated based on the tags used	JSON Object

The Mambo object​

Event system​

Listening for events​

Available events​

Social events​

User events​

Activity events​

Data events​

Render events​