Setup

At the end of your site body include the Loyale SSO library and call the loyalesso function.

<script src="https://web.loyale.io/loyale-sso-latest.js"></script>

<script>
  loyalesso({
    schemeId: 'schemeId', 
   	successUrl: 'successUrl', 
   	errorUrl: 'errorUrl',
  	fields: 0,
   	environment: 'production'
  });
</script>

The function accepts the following settings

Parmeter	Value	Description	Required
schemeId	string: The scheme id of your loyale scheme	This can be found in loyale backoffice under Scheme Settings	Yes
successUrl	string: The success url for redirection	This is where the sso will redirect on successfully authenticating of the customer	Yes
errorUrl	string: The error url for redirection	This is where the sso will redirect on failure to authenticate the customers	Yes
fields	enum: The fields required by the site	The extra fields shown to the customers in the signup form. To include gender and date of birth pass 0, to include address field pass 1. To include gender, date of birth and address fields pass 2	No
environment	string: Environment name	The environment on which to run the sso, either 'staging' or 'production'. Default value 'production'	No

Finally include the HTML placeholder tag wherever you want the 'Sign in with Loyale' button to appear.

<div data-loyale-sso></div>

<div data-loyale-sso data-loyale-other="userId_12345678"></div>

<div data-loyale-sso data-loyale-user='{"email":"[email protected]","firstName":"John","lastName":"Doe"}'></div>

<div data-loyale-sso data-loyale-route="signup" data-loyale-label="Sign up with Loyale" data-loyale-mode=1></div>

Each tag can also pass its own unique data, via specific attributes.

Attribute	Value	Description	Required
loyale-other	string	Any string data that you want to receive back in the success or error callback	No
loyale-user	string: stringified json	A strigified json object of the user data you have. Currently this accetps the properties email, firstName and lastName	No
loyale-route	string	This is where the sso will open first, it can be either 'signin' or 'signup'. Default value 'signin'	No
loyale-label	string	This is the text shown on the generated button. Default value 'Sign In with Loyale'	No
loyale-mode	number	The sso element can be shown in button or box mode. Default value 0	No

This will load the Loyale SSO button like the example below for mode 0

mode 0

And like the example below for mode 1

mode 1