Overview
Most of the time, brands want to customize the default UI display to fit with their brand. The SDK provides different ways to customize UI, below are some ways on how to override the default displays.
- Using data template attribute
- Overriding the default templates through the
Stellar.tmplnamespace - Inline Content
Data Template Attribute
Using the data-template attribute, you can override the UI display on some widgets.
You can simply override the UI display just by attaching this attribute on a stellar element, such as but not limited to
offers, challenges, and rewards. The value of the attribute must be a string that references a
global function.
Pre-requisite
Global function
This function is called by the SDK and the return value is used for displaying the contents of a specific item. The SDK passes the data of the object as an argument to the global function. The return value must be a string wrapped in a special markup, otherwise, the SDK won’t display the contents.
Special Markup
<div class="stl_content"></div>
Sample
Global Function
window.challengeTemplate = function(item) {
return "<div class=\"stl_content\">" +
"<h1>" + item.heading + " </h1>" +
"<p>" + item.body + "</p>" +
"</div>"
}
Cheetah Element
<div class="stellar-challenges" data-category="web" data-template="window.challengeTemplate"></div>
Based on the sample usage, the SDK will call the challengeTemplate function to get the display for each challenge.
List of ui widgets that supports the data-template
| UI Widgets | Arguments |
|---|---|
stellar-offers |
(item) |
stellar-challenges |
(item) |
stellar-rewards |
(item) |
stellar-activities |
(item) |
stellar-newsfeed |
(item) |
Override default templates using Stellar.tmpl namespace
Brands can override default templates through the Stellar.tmpl namespace by defining a custom template that will be used by a specific widget.
Sample
Simply override the default template with a custom function. The custom function must return a string of markup.
Stellar.tmpl.challengeResponseSuccess = function(item, response) {
return "<div class=\"stellar-response-content\">" +
"<div class=\"stellar-response-content-wrap\">" +
response.data.message +
"</div>" +
"</div>";
}
List of available templates
Challenge Success Response Screen
This allows you to override the default UI display after successfully responding to a challenge.
Method: Stellar.tmpl.challengeResponseSuccess
Arguments: (item, response)
| Argument | Description |
|---|---|
item |
The challenge data. |
response |
The server response after submitting a challenge. |
Ex.
window.stellarReady = function() {
Stellar.events.bind('challenges.loaded', function() {
Stellar.tmpl.challengeResponseSuccess = function(item) {
return `<div class="stellar-response-content">your html content</div>`
}
});
}
Redemption Success Response Screen
This allows you to override the default UI display after successfully redeeming to a reward.
Method: Stellar.tmpl.redemptionSuccess
Arguments: (item)
| Argument | Description |
|---|---|
item |
The reward data. |
Ex.
window.stellarReady = function() {
Stellar.events.bind('rewards.loaded', function() {
Stellar.tmpl.redemptionSuccess = function(item) {
return `<div class="stellar-response-content">your html content</div>`
}
});
}
Offer Success Response Screen
Offer doesn’t have its own success screen since normal offers only only popups details. But Offer can load challenges and rewards that can be configured in the marketing console. To override the success template you can use the same methods from chanllenge and rewards
Method: Stellar.tmpl.redemptionSuccess, Stellar.tmpl.challengeResponseSuccess
Arguments: (item)
| Argument | Description |
|---|---|
item |
The reward data. |
Ex.
window.stellarReady = function () {
Stellar.events.bind('offers.loaded', function () {
Stellar.tmpl.challengeResponseSuccess = function(item) {
return `<div class="stellar-response-content">your html content</div>`
}
Stellar.tmpl.redemptionSuccess = function(item) {
return `<div class="stellar-response-content">your html content</div>`
}
});
}