Cheetah CES Docs Portal

Navigation
Home
GitHub
Email
Corporate Site

JS SDK
Introduction
Getting Started
Cheetah Elements
Cheetah API Calls
Branding (Template Sets)
SSO
Visitor Token
Override UI Templates
JS SDK CDN

Override UI Templates

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.tmpl namespace
  • 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>`
		}
	});
}