Gigya Job Openings

Gamification Plugins Demo

Skip to end of metadata
Go to start of metadata

 

See it in Action


Login:



 

Read More

Developer Guide

API Reference

Check Out the Code

<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
	src="http://cdn.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">
	</SCRIPT>
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 303px; display: block; height: auto;">
	<SCRIPT>
		// 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,
			
			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 popups will appear even if no new level has been reached
		}
		onLoad();
	</SCRIPT>
<br />
    
	<style>
		.gig-achievements-badge-container {
			height: 85px;
		}
		#divAchievements {
			height: 115px;
		}
		#divUserStatus {
			height: 115px;
		}
		#divUserStatus_container {
			height: 93px;
		}
	</style>
	<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 />
</div>
</body>
</html>

 

Notes:

In order to make the above code work in your environment, please note:

  • 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 from 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.
  • If you are using https, be sure to further adjust the JS API url to: https://cdns.gigya.com/js/gigya.js?apikey=<Your_API_Key>.