Earn points template

Description

The earn points template displays information about available behaviours that users can perform to earn points. This template can be triggered from multiple widgets including the Header, Profile, Leaderboard and Activities Widgets.

Control classes

The following control classes determine how the earn points template functions:

Class	Description	Required
mambo-ctrl-close	Hides the Earn Points widget when clicked, using a right-to-left slide animation in reverse	No
mambo-ctrl-earn	Identifies the container element for the earn points widget. Elements with this class animate into the screen from right to left	No
mambo-ctrl-earn-header	Identifies the widget header element, used to calculate proper widget height for scrollbar rendering	No
mambo-ctrl-earn-content	Identifies the core content container, used for scrollbar rendering	No

Template data

The template receives the following data:

Variable	Description	Type
data	Array of behaviours that can be performed to earn points. Always check the hideInWidgets property before displaying behaviours to avoid revealing surprise behaviours. For detailed behaviour object structure, see the Behaviours API documentation	Array
isLoading	Flag indicating whether the behaviour list is still loading. When true, you should display a loading indicator. The template will re-render automatically once loading completes	Boolean

Implementation example

This example shows a custom earn points template with basic styling and loading state handling:

JavaScript

<style type="text/css">
  .earn-item {
      margin: 3px;
      border: 1px solid #ccc;
      width: 150px;
      height: 50px;
  }
</style>

<script type="text/template" id="earn-template">
  <% if( isLoading ) { %>
      <div>Loading!</div>
  <% } else { %>
      <div class="mambo-ctrl-earn">
          <div class="mambo-ctrl-earn-header">
              How do I earn points?
          </div>
          <div class="mambo-ctrl-earn-content">
              <% _.forEach( data, function( item, idx ) { %>
                  <div class="earn-item"><%= item.name %></div>
              <% }); %>
          </div>
      </div>
  <% } %>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the default How to Earn Points template
      Mambo.updateTemplate( Mambo.Template.earn, Mambo('#earn-template').html() );
  });
</script>

Customisation options

You can enhance the earn points template by:

• Adding icons or images to represent different behaviour types
• Including point values for each behaviour
• Grouping behaviours by categories
• Adding tooltips with additional information about each behaviour
• Implementing a search or filter function for larger behaviour lists