Loyalty Quick Start Template

Skip to end of metadata
Go to start of metadata

Note: If you plan on integrating the Loyalty platform, we highly recommend reading the Loyalty - Gamification and User Behavior Guide. Loyalty is a premium Gigya platform that requires separate activation. If it is not yet a part of your existing site package, please contact Gigya Support via the Support link in the top menu of your Console Dashboard or email support@gigya.com.

Description

This guide will show you how to quickly set up and implement Gigya's default Loyalty Challenge within your site.

Dashboard Setup

This guide assumes the following prerequisites:

  • You have set up a site in the Gigya Dashboard with a valid API Key
  • You have both RaaS and the Loyalty Add-on enabled for that key
  • The gigya.js script is included in your site.
  1. Login to the Gigya Console and proceed to the Site Settings for the domain in which you wish to implement Loyalty by clicking either the Site Name or its Site Settings.
  2. Open the Game Mechanics Setup page from the left-hand menu.
  3. On the Game Mechanics Settings page, click on Default Challenge to expand the section.
  4. Click on the Settings icon.
  5. In the Challenge Settings page, you will see that the Default Challenge has all Actions already activated. You may: 
    • Remove Actions to prevent awarding points to your users from these actions. 
    • Edit the settings for any of the individual Actions to change the Points awarded for completing them.
    • Edit the Settings for the individual Levels.
    • Opt to Hide Challenge from user until first level is reached. This will keep the user from knowing that the challenge exists until they perform enough Actions to reach Level 1.
  6. To enable this Challenge with it's default OOB settings, all you need to do is set it's Status to Enabled and then Save Settings.
     

After enabling the Default Challenge, the Status light turns green for this challenge in the Game Mechanics Setup Dashboard.

 

Create your first implementation scripts

Required APIs

To implement a basic Loyalty configuration within your site requires the following Gigya APIs.

The following section will explain how to configure these APIs as well as provide you with plug-and-play code examples.

Individual Loyalty add-ons

There are 4 Loyalty widgets that you will need to implement as well as the Notifications add-on, to fully utilize this platform.

 

Plug And Play Code

The following code assumes that you have already implemented RaaS Login and Logout on your site. If still need to add RaaS to your site, please review the RaaS Quick Start Guide before continuing.

Paste the following code into your site:

<div id="Loyalty_Wrapper" style="border: 1px solid skyblue; padding: 15px; width: 303px; display: block; height: auto;">
<!-- You will need to customize the CSS depending upon your site and how you choose to display the Loyalty Add-on. -->
<!-- Note that you do not have to display all the widgets together, you can place them independently. -->
     <SCRIPT>
        // This method is activated when the page is loaded
        function onLoad() {
            // register for login event so Gigya fires the Loyalty APIs after users login
           gigya.socialize.addEventHandlers({
                    onLogin: onLoginHandler,
                    onLogout: onLogoutHandler
            });
        }
        // onLogin Event handler
        function onLoginHandler(eventObj) { 
            // Show the User Status add-on on login
            gigya.gm.showUserStatusUI(userStatusParams); // Gets the user's current challenge status and displays it
        }
        // onLogout Event handler
        function onLogoutHandler(eventObj) {   
            //Include the default challenge's badge in the Achievements add-on after the user logs out
            gigya.gm.showAchievementsUI({containerID: 'divAchievements', excludeChallenges:''});
        }   
        var loginParams = {
            containerID: 'divLogin',
            showTermsLink:false,
            height: 45,
            width: 180
        }  
         
        var userStatusParams = {
            containerID: 'divUserStatus'
        }
        var challengeStatusParams = {
            containerID: 'divChallengeStatus'
        }
        var achievmentsParams = {
            containerID: 'divAchievements'
        }
        var leaderboardParams = {
            containerID: 'divLeaderboard'
        }
        var notificationParams = {
            debugMode:false // The notification popups will only appear when a new level has been reached.
                            // (true enables the notification pop-ups on every page load and is not recommended).
        }
        onLoad();
    </SCRIPT>
    <style><!-- This is the minimum size of the individual add-ons for them to display properly. -->
        .gig-achievements-badge-container {
            height: 85px;
        }
        #divAchievements {
            height: 115px;
        }
        #divUserStatus {
            height: 115px;
        }
        #divUserStatus_container {
            height: 93px;
        }
    </style>
    <div id="divUserStatus"></div>
    <div id="divChallengeStatus"></div>
    <div id="divAchievements"></div>
    <div id="divLeaderboard"></div>
    <script>
        gigya.gm.showUserStatusUI(userStatusParams);
        gigya.gm.showChallengeStatusUI(challengeStatusParams);
        gigya.gm.showAchievementsUI(achievmentsParams);
        gigya.gm.showLeaderboardUI(leaderboardParams);
        gigya.gm.showNotifications(notificationParams);
    </script> 
</div>

 

The above code, assuming a new installation, will result in the following widget displayed on your site for users.

 

Creating Custom Challenges

You are now ready to create and implement your own custom challenges within your site.  For a more detailed explanation of all the various Actions, Levels and available parameters, see the following Additional Resources.

Additional Resources

 

 

 

 

  • No labels