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

Cheetah Elements

You can use Cheetah Elements to show loyalty content on your website. You can show member login/signup, profile, content, activities, and more.

Each Cheetah Element is an ordinary HTML DIV with a specific CSS class such as stellar-challenges or stl_token_first_name. They are as easy to add to your website as the ubiquitous Facebook Like button.


Member Login / Profile

  • Use Cheetah Elements to display member login/signup, profile, and activities.
<p>
  <div class="stellar-login"></div>
  <div class="stellar-summary"></div>
  <div class="stellar-profile"></div>
  <div class="stellar-activities"></div>
  <div class="stellar-activity-table"></div>
</p>

Personalized Content

  • Use Cheetah Elements display personalized content.
<p>
  <div class="stellar-rewards"></div>
  <div class="stellar-offers"></div>
  <div class="stellar-newsfeed"></div>
  <div class="stellar-gallery"></div>
</p>

Content Tokens

  • You can also use any Content Tokens you have configured in Cheetah.
  • Note: Content Tokens can be added to most elements, commonly or
<p>
  <div class="stl_token_first_name"></div>
  <div class="stl_token_point_balance"></div>
</p>

Login

This will allow member to login / register to Cheetah site from front end.

Signin form (default view)

<div class="stellar-login"></div>

Attributes

Attributes Type Description
data-mode string set default active form. signin or signup

To use show signup form use data-mode=”signup” to make signup form as active view.

<div class="stellar-login" mode="signup"></div>

You can customize the signup form by overriding the children of the the Cheetah login element. You can style it as you want as long as you include the correct elements.

<div class="stellar-login" data-mode="signup">
  <form id="stellar-register-form">
     <div class="stellar-signup-notification"></div>
     <label>First Name: </label>
       <input type="text" name="first_name" sl-validation="required" />
       <label>Last Name: </label>
       <input type="text" name="last_name" sl-validation="requied" />
       <label>Email: </label>
       <input type="text" name="email" sl-validation="required,email" />
       <label>Password: </label>
       <input type="password" name="password" sl-validation="required" />
       <label>Confirm Password: </label>
       <input type="password" name="password_confirmation" sl-validation="equalTo[password]"/>
       <label>Age</label>
       <input type="text" name="age" sl-validation="required"/>
    <div>
     <label><input type="checkbox" value="1" name="receive_email_offers" />Receive Email Offers</label>
  </div>
  <div> 
    <label>Gender:</label>
        <label><span><input type="radio" value="m" name="gender" sl-validation="required" />Male</span></label>
        <label><span><input type="radio" value="f" name="gender" sl-validation="required" />Female</span></label>
  </div>
    <button id="stellar-btn-signup">SIGN UP</button>
    <p>Already Have an account?</p>
    <button id="stellar-btn-show-signin">SIGN IN</button>
    </form>
 </div>

Add sl-validation, sl-message-{type} attribute to element which you want to control validate.

    <input type="text" name="first_name" 
           sl-validation="required,minLength[2],maxLength[3]"
           sl-message-requied="This field is required"
           sl-message-minLength="Minimum of 2 characters allowed!"
           sl-message-maxLength="Maximum of 3 characters allowed!" />

Validators

Name Description
required Checks fields whether it is empty or not or it is chosen or not.
number Checks fields if it is consist of number or not.
email Checks email if it is valid or not.
equalTo[input_name] Checks if the two fields are equal to each other according to input name.
different[input_name] Checks if the two fields are different to each other according to input name.
minLength[x] Checks fields if it is consist of minimal X character.
maxLength[x] Checks maximal X character entry to the area.
minChecked[x] Checks minimal X option if it is marked or not.
maxChecked[x] Checks maximal X option if it is marked or not.
minSelected[x] Checks minimal X option if it is chosen or not.
maxSelected[x] Checks maximal X option if it is chosen or not.
regExp[validator_name] Checks if field is suits to identified ordered expression or not.

You can also use Captcha (optional)

<div id="stellar-signup-captcha"></div>


! NOTE: In creating a customize signup form you must include these required elements, class name and field names.

<form id="stellar-register-form">
  <div class="stellar-signup-notification"></div>
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <input type="text" name="email" />
  <input type="password" name="password" />
  <input type="password" name="password_confirmation" />
  <button id="stellar-btn-signup">SIGN UP</button>
  <button id="stellar-btn-show-signin">SIGN IN</button>
</form>

Visitor

The JS SDK will detect this element and create a visitor token by calling Stellar.api.callVisitorToken()

<div class="stellar-visitor"></div>
Attributes Type Description
data-email string visitor email
data-mobile-number string visitor mobile number
data-integration-id string visitor integration-id

Stellar Gate

Show or hide content based on a condition, such as whether or not the member is logged in.

<div class="stellar-gate" data-member="true"></div>
Attributes type Description
data-member boolean show to member or not a member
data-visitor boolean TBA
data-gate function TBA

Summary

This is to show the member summary.

<div class="stellar-summary"></div>

Preferences

This will show member preferences

<div class="stellar-preferences"></div>

Profile

This will show member profile

<div class="stellar-profile"></div>

Attributes

Attribute Type Description
data-fields function overrides default fields in labels, return array of objects. Sample below


Sample using data-fields attribute

<div class="stellar-profile" data-fields="memberProfileFields"></div>

<script>
function memberProfileFields() {
  var fields = [];
  fields.push({ attrib: "address", source: "profile", label: "Your Address", editable: true, 
      fields: [
        { attrib: "mailing_street", source: "profile", label: "Mailing Street: ", type: 'text'},
        { attrib: "mailing_city", source: "profile", label: "Mailing City: ", type: 'text'},
        { attrib: "mailing_state", source: "profile", label: "Mailing State: ", type: 'text'},
        { attrib: "mailing_postal_code", source: "profile", label: "Postal Code: ", type: 'text'},
        { attrib: "mailing_country", source: "profile", label: "Mailing Country: ", type: 'text' }
      ]});
  return fields;
}
</script>

Activities

Display List of member activities

<div class="stellar-activities"></div>

Using custom element data attributes

<div class="stellar-activities"  
   data-activity-type="sl_reward" 
   data-template="customActivitiesTemplate" 
   data-limit="200"></div>
   
<script>
function customActivitiesTemplate(item) {
return '<div class="stl_content">'+
          '<span class="col-1">'+item.created_at+'</span>'+
          '<span class="col-2">'+item.type+'<br></span>'+
       '</div>';
}
</script>

Attributes

Attribute Type Description
data-template string(html) Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-limit number show the maximum limit of member activities
data-with-details boolean show more detailed activities. accepts true or false
data-activity-type string if no data-activity-type provided all types of activity will be shown. sl_rewards, sl_challenge, sl_survey
data-with-metric-change boolean Optional (true or false). Will return activities with metric changes.

Offers

Display list of offers

<div class="stellar-offers"></div>

with custom data-attributes

<div class="stellar-offers" data-layout="medium_rectangle" data-category="electronics" data-limit="100"></div>

Attributes

Attribute Type Description
data-layout string generated layout defined in content editor
data-category string filtered offers by category
data-limit number display the number of offers
data-id number,string display specific offer. if string, name of the offer
data-template string(html) Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-detailed-template string(html) override the details layout html
data-datatype string display public offers
data-set string Display offers known to offer set
data-widget string display in carousel style

Challenges

Display list of challenges

<div class="stellar-challenges"></div>

Custom element with data-attribute

<div class="stellar-challenges"
   data-template="customChallengeTemplate"
   data-category="students"
   data-limit="100"
   data-customHandler="customChallengeHandler">
</div>
<script>
function customChallengeTemplate(item) {
  return '<div class="stl_content">'+
            '<span class="col-1">' + item.heading +'</span>'+
            '<span class="col-2">' + item.details +'<br></span>'+
         '</div>';
}
function customChallengHandler() {
// used by generic challenge to redirect to a certain path
}
</script>

Attributes

Attribute Type Description
data-layout string generated layout defined in content editor
data-category string filter challenges by category
data-limit number display the number of challenges
data-id number,string display specific challenge
data-template string(html) Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-widget string use to display as an alert
data-respondable string display only respondable challenges
data-static-srckey string use to display static challenges defined in config as key
data-customHandler function define the custom action after the challenge has been clicked
data-sort_by string Values can be update_date or publish_date or name or points default: update_date
data-sort_dir string Sort direction. Values can be desc or asc. default: desc


Note: you cannot respond challenge if data-static-srckey is used.

Challenges Responses

Display list of member challenge responses

<div class="stellar-challenges-responses"></div>

Custom element using data-attributes

<div class="stellar-challenges-responses"
   data-template="customChallengeResponseTemplate"
   data-limit="100">
</div>
<script>
function customChallengeResponseTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.challenge.heading +'</span>'+
              '<span class="col-2">' + item.challenge.details +'<br></span>'+
           '</div>';
}
</script>

Attributes

Attribute Type Default Description
data-layout string medium_rectangle generated layout defined in content editor
data-category string null filter challenges response by category
data-limit number 10 display the number of challenges responses
data-id number,string null display specific challenge responses
data-template string(html) null Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-customHandler function null define the custom action after the challenge response has been clicked

Rewards

Display List of rewards

<div class="stellar-rewards"
     data-layout="medium_rectangle" 
     data-category="certificates" 
     data-limit="100"
     data-sort_by="points"
     data-sort_dir="asc"
     data-template="customRewardsTemplate">
</div>
<script>
function customRewardsTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.heading +'</span>'+
              '<span class="col-2">' + item.details +'<br></span>'+
           '</div>';
}
</script>

Attributes

Attribute Type Default Description
data-layout string default generated layout defined in content editor
data-category string default filter rewards by category
data-limit string default maximum display of rewards
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-set string default description
data-sort_by string default sort by points
data-sort_dir string default sort by asc or desc default: desc
data-datakey string default set datakey name for rewards

Rewards Responses

Display member rewards responses

<div class="stellar-rewards-responses"
     data-layout="medium_rectangle"
     data-limit="100"
     data-template="customRewardResponsesTemplate">
</div>
<script>
function customRewardResponsesTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.reward.heading +'</span>'+
              '<span class="col-2">' + item.reward.details +'<br></span>'+
           '</div>';
}
</script>

Attributes

Attributes Types Default Description
data-layout string default Generated layout defined in content editor
data-limit string default maximum display of reward responses
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.

Newsfeed

Display list of newsfeed

<div class="stellar-newsfeed"
     data-layout="medium_rectangle"
     data-limit="100"
     data-feed-name="twitter"
     data-template="customNewsfeedTemplate"></div>
<script>
function customNewsfeedTemplate(item) {
  return '<div class="stl_content">'+
              '<span class="col-1">' + item.heading +'</span>'+
              '<span class="col-2">' + item..details +'<br></span>'+
           '</div>';
}
</script>

Attributes

Attribute Type Default Description
data-layout string default Generated layout defined in content editor
data-limit string default Display maximum number of newsfeed
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-feed-name string default Display newsfeed by feed category
data-datatype string static if data-datatype="static" is provided it will show static newsfeeds
data-datakey string default Get newsfeed in local storage by key
data-static-srckey string default Get json data link defined in config.js

Display list of gallery

<div class="stellar-gallery"
     data-template="customGalleryTemplate"></div>
<script>
function customGalleryTemplate(item) {
  // return html string
}
</script>

Attributes

Attribute Type Default Description
data-limit number default Display maximum number of Gallery
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-feed-name string default Fetch galley by name (gallaries are under newsfeed)
data-animate boolean default Animate gallary default is fadeIn fadeOut
data-show-items string default Number of items to show before animating gallery
data-shuffle string default Multiply the maximum limit to number of shuffle

Leaderboard

Display Leaderboards

<div class="stellar-leaderboard"
     data-limit="50"
     data-template="customLeaderboardTemplate"
     data-datakey="region"
     data-name="all_time"
     data-endpoint="group_mates"></div>

<div class="stellar-leaderboard" 
     data-name="all_time" 
     data-region-group-mates="true" 
     data-template="myRankTemplate" 
     data-datakey="region_group_mates"></div>
<script>

<script>
function myRankTemplate(item) {
  // return html string
}
</script>

Attributes

Attribute Type Default Description
data-limit string default Display maximum number of newsfeed
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-datakey string default Get leaderboard in local storage by key
data-name string default Fetch list of leaderboard by name
data-endpoint string default Get leaderboards by group_name, friends, top, around me
data-region-group-mates string default TBA
all-time-group-mates string default TBA

Static Page

Display Static Page - this will wrap the page in an iframe. Must match the main origin page

<div class="stellar-static-page"></div>

Attributes

Attribute Type Default Description
data-src string default link to static page
data-name string default static page name

Content Block

Display Content Block (TBA)

<div class="stellar-content-block"></div>

Attributes

Attribute Type Default Description
data-layout string default Generated layout defined in content editor
data-id string default fetch content block by id
data-template string default Overrides the default html template. Template must be wrapped on an element with class “stl_content”.

Content Page

Display Content Page (TBA)

<div class="stellar-content-page"></div>

Attributes

Attribute Type Default Description
data-layout string default Generated layout defined in content editor
data-id string default Fetch content page by id

Frame

Display frame (TBA)

<div class="stellar-frame"></div>

Progressbar

Display Progressbar

<div class="stellar-progress-bar" 
     data-goal="10000"
     data-reward-text="10,000 POINTS = $5 VOUCHER"></div>

Attributes

Attribute Type Default Description
data-goal string default Goal for the progressbar to be full
data-reward-text string default Description to be displayed below progressbar

Giftcards

Display Giftcards

<div class="stellar-giftcards"></div>

OR display giftard list in a carousel view

<div class="stellar-giftcards" data-widget="carousel"></div>

Attributes

Attribute Type Default Description
data-widget string carousel Can be change to carousel view or table view

Giftcard Lookup

Display Giftcard Lookup

<div class="stellar-giftcards-lookup"
     data-placeholder="xxxx-xxxx-xxxx"
     data-keymask="SSS-999-aaa"></div>

Attributes

Attribute Type Default Description
data-placeholder string default The default is “xxxx-xxxx-xxxx”, where the delimiter “-” creates a space between two separate text input fields. The placeholder value also defines the max characters that can be entered.
       
data-keymask string default used to specify a keymask, such as only allowing numbers, letters, or both. S for both, 9 for numbers, a for letters only

Documents

Display Documens ( developmenet)

<div class="stellar-documents"></div>

Punchcards

Display list of challenges

<div class="stellar-punchcards"></div>

Custom element with data-attribute

<div class="stellar-punchcards" 
    data-template="punchcardsTemplate"
    data-category="minitours"
    data-sort_by="expiration_date"
    data-limit="100"></div>
<script>

// Cheetah Ready Function
window.stellarReady = function() {
    console.log("JS SDK Ready")

    // Punchcards loaded event binding to initialize punchcard image
    Stellar.events.bind('punchcards.loaded', function(response) {
        initializePunches();
    });
}

// Loop thgrough all the .punch-container and add active class to color the image
function initializePunches() {
    const punchContainers = document.querySelectorAll('.punch-container');
    punchContainers.forEach(punchContainer => {
        const punches = punchContainer.querySelectorAll('.punch');
        
        punches.forEach(punch => {
            let images = punch.querySelectorAll('img');
            let punchCount = parseInt(punch.getAttribute('data-punch'));
            let totalPunch = parseInt(punch.getAttribute('data-total-punch'));
                
            images.forEach((image, index) => {
                if (punchCount > 0) {
                    image.classList.add('active');
                    punchCount--;
                }
            });
        });
    });
}

function generateImageList() {
    let image = `<img src="https://s3.us-east-1.amazonaws.com/stellar-donatos-staging-75qidy7f9y6ldbiaklla/static_files/pizza.png?1692926910" alt="instagram">`;
    let punches = '';

    for (let i = 5 - 1; i >= 0; i--) {
        punches += image
    }
    return punches
}

// Punchcard template override
// Display x number of image based on the required_punches.
// Display description, number of punches and expiration data
function punchcardsTemplate (item) {
    let description = item.heading || item.label;
    let expires = `<p class="item-expiration">Expires ${Stellar.ui.formatters.USDateFormat(item.punchcard_type.expiration_date)}</p>`
    let expiration = item.punchcard_type.expiration_type == "none" ? "" : expires;

    // Temporary image.
    // We can also retrieve the image in the extra json of the punchcard definition.
    let punches = generateImageList()

    return `<div class="stl_content punch-container">
            <div class="punch" data-punch="${item.current_punches}" data-total-punch="${item.required_punches}">${punches}</div>
            <div class="punch-content">
                <div class="required-punches">${item.current_punches}/${item.required_punches}</div>
                <div class="content-description">${description}</div>
                <div class="expiration">${expiration}</div>
            </div>
        </div>`
}
</script>

Attributes

Attribute Type Description
data-layout string generated layout defined in content editor
data-category string filter challenges by category
data-limit number display the number of challenges
data-id number,string display specific challenge
data-template string(html) Overrides the default html template. Template must be wrapped on an element with class “stl_content”.
data-widget string use to display as an alert
data-status string display only respondable challenges
data-virtual string use to display static challenges defined in config as key
data-hide_expired string use to display static challenges defined in config as key
data-show_contents string use to display static challenges defined in config as key
data-customHandler function define the custom action after the challenge has been clicked
data-sort_by string Values can be update_date or publish_date or name or points default: update_date
data-sort_dir string Sort direction. Values can be desc or asc. default: desc




Previous Reference Next: Cheetah API