Was this article helpful?

Gamification Plugins

Last modified 11:53, 15 Sep 2014

 

See it in Action

Check Out the Code

<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
	src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
	</SCRIPT>
	<SCRIPT type="text/javascript" lang="javascript" >
		// This method is activated when the page is loaded
        function onLoad() {
            // register for login event
           gigya.socialize.addEventHandlers({
					onLogin: onLoginHandler,
					onLogout: onLogoutHandler
			});
        }
		
		// onLogin Event handler
        function onLoginHandler(eventObj) {	 
			// Show the User Status plugin on login
			gigya.gm.showUserStatusUI(userStatusParams); 
		}
		
		// onLogout Event handler
        function onLogoutHandler(eventObj) {	
			//Include the default challenge's badge in the Achievements plugin 
			gigya.gm.showAchievementsUI({containerID: 'divAchievements', excludeChallenges:''});
		}
		
		// Logout from Gigya platform. This method is activated when "Logout" button is clicked 
		function logoutFromGS() {
			gigya.socialize.logout(); // logout from Gigya platform
        }
		
		var loginParams = {
			containerID: 'divLogin',
			showTermsLink:false,
			hideGigyaLink:true,
			height: 45,
            width: 180
		}	
		
		var userStatusParams = {
		    containerID: 'divUserStatus'
		}
		var challengeStatusParams = {
			containerID: 'divChallengeStatus'
		}
        var achievmentsParams = {
            containerID: 'divAchievements'
		}
        var leaderboardParams = {
            containerID: 'divLeaderboard'
        }
		var notificationParams = {
			debugMode:true // The notification plugin will appear even if no new level has been reached
		}
	</SCRIPT>
</head>

<body onload="onLoad()">
	<br />
   <font face="arial"> Login: </font>
    <div id="divLogin"></div><br />
	<div id="divUserStatus"></div>
	<div id="divChallengeStatus"></div>
    <div id="divAchievements"></div>
    <div id="divLeaderboard"></div>
    
	<script>
		gigya.socialize.showLoginUI(loginParams); 
		gigya.gm.showUserStatusUI(userStatusParams);
		gigya.gm.showChallengeStatusUI(challengeStatusParams);
		gigya.gm.showAchievementsUI(achievmentsParams);
		gigya.gm.showLeaderboardUI(leaderboardParams);
       gigya.gm.showNotifications(notificationParams);
	</script>
       
	<br />
    <input id="btnLogout" type="button" value="Logout" 
            onclick="logoutFromGS()"/>
    <br />

</body>
</html>

Note:
In order to make this code work in your environment, please:
  • Click the "view source" icon (link located above code on the right hand side) - This will open a popup window with a text version of the code, which you may copy.
  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained on the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.

Was this article helpful?
Pages that link here
Page statistics
365 view(s) and 1 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.

Comments

You must to post a comment.

Attachments