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

<script src=""></script>

    schemeId: 'schemeId', 
   	successUrl: 'successUrl', 
   	errorUrl: 'errorUrl',
  	fields: 0,
   	environment: 'production'

The function accepts the following settings

schemeIdstring: The scheme id of your loyale schemeThis can be found in loyale backoffice under Scheme SettingsYes
successUrlstring: The success url for redirectionThis is where the sso will redirect on successfully authenticating of the customerYes
errorUrlstring: The error url for redirectionThis is where the sso will redirect on failure to authenticate the customersYes
fieldsenum: The fields required by the siteThe 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 2No
environmentstring: Environment nameThe 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.

loyale-otherstringAny string data that you want to receive back in the success or error callbackNo
loyale-userstring: stringified jsonA strigified json object of the user data you have. Currently this accetps the properties email, firstName and lastNameNo
loyale-routestringThis is where the sso will open first, it can be either 'signin' or 'signup'. Default value 'signin'No
loyale-labelstringThis is the text shown on the generated button. Default value 'Sign In with Loyale'No
loyale-modenumberThe sso element can be shown in button or box mode. Default value 0No

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

What’s Next