JavaScript SDK introduction

The JavaScript SDK offers a quick and easy way to integrate gamification elements into your web application. It provides visual representations of your gamification programme for your customers and users.

What is the JavaScript SDK?

The JavaScript SDK consists of two main components:

1. Core JavaScript API: A foundation that handles requests directly from JavaScript on your web application. The API uses CORS (Cross-Origin Resource Sharing) to accept requests from different domains. When performing a request, the browser issues a preflight request using the HTTP OPTIONS method to verify that cross-domain requests are permitted.

2. UI Widgets: A collection of pre-built components built on top of the JavaScript API that provide visual elements like headers, profiles, leaderboards, and activity feeds.

Key features

• Easy integration: Simple implementation for quick deployment
• Customisable UI: Widgets can be styled and customised to match your site
• Real-time updates: Automatic updates when users earn points or unlock rewards
• Multi-language support: Internationalisation options for global audiences
• Event-driven architecture: Subscribe to events to extend functionality

How the SDK works

The SDK communicates with the Mambo platform's API endpoints to fetch and update gamification data. It uses a combination of asynchronous JavaScript and DOM manipulation to display gamification elements without requiring page refreshes.

When a user performs actions on your site, the SDK can be used to:

1. Track these actions as gamification activities
2. Award points and rewards based on your configured rules
3. Display notifications for newly unlocked achievements
4. Update UI components to reflect the user's current status

The Mambo object

The Mambo object is the primary interface for working with the JavaScript SDK. It extends the jQuery library, providing all the functionality of jQuery plus additional methods for rendering gamification widgets.

JavaScript

// Basic usage of the Mambo object
Mambo(".header-container").header();
Mambo("#leaderboard").leaderboard();

The Mambo object accepts standard CSS selectors and returns a jQuery object enhanced with widget methods. This makes it easy to integrate gamification elements into specific parts of your page.

Next steps

To get started with the JavaScript SDK:

1. Set up your API keys and URLs
2. Learn about initialisation options
3. Explore the available widgets