Gigya Job Openings

Screen-Set on Page Demo

Skip to end of metadata
Go to start of metadata

Screen-Set Hosted On Site Using Mark-up

 

The following example shows a simple screen-set written inside the web-page:

See it in Action

 

 

Read More

Developer Guide

API Reference

Check Out the Code

 

<html>
<head>
    <title></title>
 	<SCRIPT type="text/javascript" lang="javascript" 
	   src="https://cdns.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: 300px; display: block; height: 200px;">
    <style>
		.gigya-error-display {
			background-color: rgb(254, 233, 234);
			border: 1px solid rgb(228, 157, 159);
		}
    </style>
<span style="font-size: 16px;font-weight: bold;letter-spacing: 1px;float: left;font-family: Arial;">
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'login-screen'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'registration-screen'});">Register</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'edit-profile'});">Edit Your Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>&nbsp;&nbsp;&nbsp;&nbsp;
	</span>
	<!-- ScreenSet code begin -->
    <div class="gigya-screen-set" id="simple-screen-set" data-width="500" data-height="600" style="display: none" data-on-pending-registration-screen="edit-profile">

<!-- Login Screen -->
        <div class="gigya-screen" id="login-screen" data-width="365" data-height="565" data-caption="Login">
            <h2>Login with Your Social Identity:</h2>
            <div class="gigya-social-login">
                <param name="buttonsStyle" value="fullLogo">
                <param name="width" value="313">
				<param name="height" value="160">
				<param name="showTermsLink" value="false">
			</div>
			</br>
			<h2 style="letter-spacing: 1px;text-align: center;color: rgb(156, 156, 156);">------------  OR  ------------</h2>
			</br>
            <h2>Login with Your Site Credentials:</h2>
			</br>
			<form class="gigya-login-form">
                <p >User Name:</p> 
				<input type="text" name="loginID" style="width:300">
				<div class="gigya-error-msg" data-bound-to="loginID"></div>
                
                <p >Password:</p>
				<input type="password" name="password" style=" width:300">
               <div class="gigya-error-msg" data-bound-to="password"></div>
                </br>
                <input type="submit" value="Login" style="float: right;"></p>
            </form>
            </br>
           	<p style="float: right;">Don't have an Account yet? 
				<a data-switch-screen="registration-screen" >Click here</a></p>			
        </div>
<!-- Registration Screen -->
        <div class="gigya-screen" id="registration-screen" data-width="320" data-height="735" data-caption="Register">
            <h2>Register with Your Social Identity:</h2>
            <div class="gigya-social-login">
                <param name="buttonsStyle" value="fullLogo">
                <param name="width" value="313">
				<param name="height" value="160">
				<param name="showTermsLink" value="false">
           </div>
			<h2 style="letter-spacing: 1px;text-align: center;color: rgb(156, 156, 156);">------------  OR  ------------</h2>
		
            <h2>Create a New Account:</h2>	
            <form class="gigya-register-form" data-on-success-screen="edit-profile">
                <p >Email address:</p>
				<input type="text" name="email" style=" width:180">&nbsp;&nbsp;<div class="gigya-loginID-availability" style="display: inline-block"></div>
				 </br><span class="gigya-error-msg" data-bound-to="email"></span>
                </br>
                <p >Password:</p>
				<input type="password" name="password" style=" width:180">&nbsp;&nbsp;<div class="gigya-password-strength" data-bound-to="password" data-on-focus-bubble="true"></div>
				 <span class="gigya-error-msg" data-bound-to="password"></span>
                </br>
                <p>Retype Password:</p>
				<input type="password" name="passwordRetype" style=" width:180">
				</br><span class="gigya-error-msg" data-bound-to="passwordRetype"></span>
 				</br></br>
                <div class="gigya-captcha" style="">
				</div>
                </br> 
                <input type="submit" value="Register" style="float: right;">
            </form>
			</br>
           	<p style="float: right;">Already have an Account? 
				<a data-switch-screen="login-screen" >Click here</a></p>	
				</br></br>
            <span class="gigya-error-display" data-bound-to="gigya-register-form" data-scope="all-errors" >
				<span class="gigya-error-msg" data-scope="all-errors" data-bound-to="gigya-register-form"></span>
			</span>				
        </div>
<!-- Profile update Screen -->
		<div class="gigya-screen" id="edit-profile" data-width="360" data-height="500" data-caption="Edit Your Profile"> 
            <form class="gigya-profile-form">
         <p>Upload your photo:</p> 
				<div class="gigya-myPhoto">
					<param name="mode" value="upload">
				</div>                  
 
                </br></br>
                <p>Gender:</p>
                <input type="radio" name="gender" value="m"><label>Male</label>
                <input type="radio" name="gender" value="f"><label>Female</label>
                </br></br>
				<p >Year of birth:</p>
				<select name="birthYear" style=" width:160"><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option></select> 
				</br></br>
                <p>Please fill your bio:</p>
				<textarea name="data.bio" data-display-name="Bio"></textarea>
                </br></br>
                <p>Please select your office location:</p>
                <select name="data.officeLocation" data-display-name="Office Location">
                    <option value=""></option>
                    <option value="TelAviv">New York</option>
                    <option value="PaloAlto">Palo Alto</option>
                    <option value="UK">London</option>
                </select>
				</br>
                <input type="submit" value="submit" style="float: right;">
            </form>
			<span class="gigya-error-display" data-bound-to="gigya-profile-form" data-scope="all-errors">
				<span class="gigya-error-msg" data-bound-to="gigya-profile-form" data-scope="all-errors"></span>
            </span>
        </div>
    </div>
	<!-- ScreenSet code end -->
	<script>
		// Handle logout response
		function onLogout(response) {   
			if ( response.errorCode == 0 ) {                
				alert('User has logged out'); 
			} 
			else { 
				alert('Error :' + response.errorMessage); 
			} 
		}
	</script>
</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>.

More Information

See the Markup Extensions resource for more information.