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: 'scheme_id', 
    successUrl:'success_url', 
    errorUrl: 'error_url', 
    fields: 0,
    environment: 'env_name'
  });
</script>

The function accepts the following settings

ParmeterValueDescriptionRequired
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 successfull authentication of the customerYes
errorUrlstring: The error url for redirectionThis is were the sso will redirect on failure to authenticate the customersYes
fieldsenum: The fields required by the siteBy default the basic fields will always be required by loyale, but if you require personal details such as gender or date of birth you can pass 0, if you require the address details you can pass 1, if you want both you can pass 2No
environmentstring: Environment nameThe environtment on which to run the sso, either 'staging' or 'producton'. If left empty production environtment will be usedNo

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>

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

AttributeValueDescriptionRequired
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

This will load the Loyale SSO button like the example below

454454

What’s Next