Events dispatcher (beta)

🛎️

Beta feature

Please note that this is a beta version of the events dispatcher which is still undergoing final testing before its official release. As such, it may be subject to changes, including additions, modifications, or removals, as we continue to refine and optimize the product. In the meantime, please feel free to share any feedback.

Exhaustive list of events

The Loyalty Web Kit can dispatch JavaScript events that you can use to trigger specific user flows or for analytics purposes. Events are triggered on window object, Here is an exemple of code on how to use events, and the full list of event:

CoffeeScript

window.addEventListener('splioSDK:loaded', function(event) {
  console.log('Triggered when the SDK js object is loaded');
});

window.addEventListener('splioSDK:pageViewed', function(event) {
  console.log('Triggered when a navigating to a SDK page (ex: rewards list)', event.detail);
});

window.addEventListener('splioSDK:userConnected', function(event) {
  console.log('Triggered when SDK is loaded in connected mode', event.detail);
});

window.addEventListener('splioSDK:configLoaded', function(event) {
  console.log('Triggered when the SDK configuration is loaded', event.detail);
});

window.addEventListener('splioSDK:rewardGranted', function(event) {
  console.log('Triggered when a user buy a reward with points', event.detail);
  // { cardCodeId, rewardExternalId, reward, externalId }
});

window.addEventListener('splioSdk:langUpdated', function(event) {
  console.log('Triggered when updating SDK lang', event.detail);
  // { lang }
});

Navigation through the Loyalty Web Kit

The SDK offers a way to be loaded directly on on page, using URLs anchors. Simply add the anchor in your URL, like this :

https://mysite.com/menu/page#rewards-list

Alternatively, you can navigate through the SDK using a javascript function :

splioSDK.navigate("#rewards-list");

Here is the full list of usable anchors :

Page	Anchor
List of Rewards	#rewards-list
Points history of the contact	#points-history
Missions list	#missions-list
Earned rewards	#earned-rewards
Earned reward specific page	#reward/{{id}}

Build your analytics dashboard

Here is an example of a dashboard using the exposed events: