Notification template

Description

The notification template is used by the Notification Widget. Notifications can display various reward information, including coupons if the unlocked reward is associated with one. You can either render coupons directly within the notification or use control classes to have the Coupon Template render and inject the coupon.

Control classes

Class	Description	Required
mambo-ctrl-close	Closes and removes the notification from the screen when clicked	Yes
mambo-ctrl-facebook	Displays a "Share to Facebook" popup with the reward information when clicked. Highly recommended for enabling social sharing of rewards	No

Template data

The template receives the following data:

Variable	Description	Type
data	The notification's reward data object containing all information about the reward to be displayed. For more details about the reward object, refer to the Notification Widget	Object
note	The notification object containing all information about the notification displaying the data	Object
hasFB	Flag indicating whether the Facebook SDK is available on the page	Boolean
hasTwitter	Flag indicating whether the Twitter SDK is available on the page	Boolean
twitterUrl	URL to be used when posting to Twitter. When adding a Tweet button, wrap it in an anchor tag (<a>) using this URL. If the Twitter SDK is available, a "Tweet" popup will appear with the notification's reward data ready to share	String

Implementation example

This example shows a simple notification template with Facebook sharing and close functionality:

JavaScript

<style type="text/css">
  .notified {
      margin: 3px;
      border: 1px solid #ccc;
  }
</style>

<script type="text/template" id="notify-template">
  <div class="notified">
      Reward name: <%= (data.reward) ? data.reward.name : data.name %>
      <div class="mambo-ctrl-facebook">Post to Facebook</div>
      <div class="mambo-ctrl-close">Close!</div>
  </div>
</script>

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

Customisation options

Consider these enhancements for your notification template:

• Adding reward images or icons
• Implementing animations for notification entry/exit
• Including Twitter sharing functionality
• Customising appearance based on reward type
• Adding countdown timers for time-limited rewards
• Displaying coupon codes with copy functionality