Marketing Auto & LoyaltyPredictive CDPMobile Wallets

Generic Omnichannel Integration with the Loyalty Web Kit

Suggest Edits

1. Pre-requisites

Before starting please make sure the be familiar with the main concepts:

In this scenario you are working on an omnichannel integration with your different systems interacting with Splio Customer Platform. We also assume that you are using the Loyalty Web kit to display your loyalty program interface on your e-commerce. Below is a simplified overview of the integration.

1- Simplified architecture overview

1- Simplified architecture overview

2. Build your point-of-sales integration

2.1 General considerations

We consider here that you are already familiar with the different approaches on rewards management and have designed your target architecture. Some considerations and warnings depending on the integration scenario:

Asynchronous mode with batch files where Splio is the owner of the codes

A customer may present a voucher at the cash register that is not yet known to your PoS system. There is a possible window of fraud of x hours/minutes, which corresponds to the frequency of sending the file from Splio to your point of sales. To minimize fraud risks, you can add conditions of use (e.g., purchase threshold) to reduce the likelihood of fraudulent transactions. This information can be included as a custom field in the reward.

2.2 Impact on the Loyalty Web Kit integration

Delay of availability of a code in the PoS

If you are using an asynchronous mode between your point-of-sales system and Splio for rewards management, make sure to adapt the rewards description to indicate that the reward can only be used after a certain time period (e.g., "You will be able to use your reward only in xxx minutes").

3. Build your E-commerce Integration

3.1 Get data from Splio

The Loyalty Web Kit can be used to get Loyalty data from Splio Customer Platform instead of using the APIs in your e-commerce. Note that it is a web SDK designed to build the User Interface of your Loyalty program, thus is limited to this specific use case. For other needs not covered, you can always use dedicated Splio APIs.

Typical examples:

  • Display information in specific pages of your website without using the UI
  • Display rewards and available points information in the checkout

We provide you here with an example:

🦉
Use Loyalty Web Kit methods to build UI component
Open Recipe

🤦‍♀️

We recommend you here to adapt the message displayed to the end user in case on an error is caught.

Loading the Loyalty Web Kit to retrieve data across your application will depend on your architecture:

  • If you have a Single Page Application and the Loyalty Web Kit is already loaded, you don't need to make the init again. You can directly use splioSDK methods.
  • If you have a static site, then you have to init splioSDK on every page to use the methods. This article provides you with an example of integration into a react component.

📘

Any other data needed from Splio can be retrieved from the dedicated APIs.

3.2 Push data to Splio

The Loyalty Web Kit pushes data to Splio for the two following cases:

  • Grant a reward
  • Create contact/membership

It however not its intent to be used as an alternative to the APIs to push data into Splio. The most common problem you can run into with new user signups client-side is that some errors can occur and won't be caught, causing some discrepancy in Splio Customer Platform if the upsert of a contact failed from the SDK. As such we recommend you to use both the SDK and the Loyalty APIs to manage contact and memberships.

3.2.1 Contact and membership management

Depending on your marketing choice, you can either enroll every new customer in the loyalty program or choose to enroll customers in your program later in the process.

ScenarioAutomatic subscription of new contacts setting in SplioComment
Every new customer is enrolled in the loyalty programYesAny new customer in Splio will be enrolled to the loyalty program through the contact creation and Loyalty Web Kit.
Account creation and loyalty enrolment are separate processNoAny new customer coming from the Loyalty Web Kit should not be redirected to the page until the enrolment is done.
New loyalty program with existing databaseYesAny customer known in Splio will be enrolled in the loyalty program through the Loyalty Web Ki

The graph below shows the key steps for enrolment during an e-commerce registration process.

If your sign-in page requires specific consent to enroll the Loyalty program, make sure to avoid loading the SDK for any customer that should not be enrolled. We recommend adding a specific condition on your sign-in page based on the page source.

🚧

The sequencing should be performed synchronously for contact creation in your system. The SDK should be loaded only after you have received the unique key and the cardcode if a system other than Splio is responsible for assigning the card code.

3.2.2 Checkout process

1/ Process the order

Push data to Splio in asynchronous mode through API for each order processed (mandatory).

🚧

The burn of rewards should never be in the critical path of payment. Also, the burn of rewards should only occur once the order is fulfilled and validated.

2/ Create the discount codes in your e-commerce

The Loyalty Web Kit does not provide the UI for the checkout but the available methods can be used to ease the integration. You need to create the codes in your e-commerce from Loyalty Web Kit events and/or on the checkout if you let the customer exchange points or select a rewards from a list.

3/ Send the burn of the code to Splio

// https://dev-scp.splio.com/reference/post_loyalty-v1-reward-attributions-id-burn

curl --request POST \
     --url https://api.splio.com/loyalty/v1/reward-attributions/1000739378684/burn \
     --header 'accept: application/json' \
     --header 'authorization: Bearer eyJ0eXA!OiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiI4MmNkM2NhMC1jZTlmLTQ4NjAtYmMzMC03Zjg4ZjNlYWRiYTYiLCJzdWIiOiJ1c2VyIiwiYXVkIjoiYXBpLmNsaWVudCIsImlzX2FwaSI6dHJ1ZSwiZXhwIjoxNjg3MDI3NjQ0LCJpYXQiOjE2ODY5MzQwNDQsImp0aSI6IjIxNDQuNjQ4YzkyMWNkNGM0MiIsIm5hbWUiOiJrdGF2ZXJuaWVyYXBpIiwibG9jYWxlIjpudWxsLCJ1c2VyIjp7ImlkIjoyMTQ0LCJ1bml2ZXJzZSI6InBvcGhhdCJ9fQ.axk03cjlf8Gbs3luCvaLJRKbVfO5p1uhCC2c5Cv8bEaW8XidHwiWQdJmDCcMN62808eRE_dbojavvvoBf9C18FyVdBY7u4LK55ZFxB48quXYq638jibuAei7_501CZQZGkfcyoT7jqE68alXRO-8qaQpIstC2Y7lu8lGGX5GSzQvNHAEKKMNtWKcrP47FTcMd_7TeaSva1j9_qQHyUUkq2UeXhYFXP7_SqhgvCgNUUlu-AVqY5TfW4YXvZ8bsKulKT8cACxjo8_dDFFl3dVrrUjbiM6wD4msTDO6Lh3PGX6BDE3h1NRUX5zBBWHiZ_VqDGVAcJFXAmWdFbOWIUIYfMfcIp-6irsfzuiLKo9vGFgmuJv87UTNndqTEL4WEdfLwzpncpr5J1k1IbSwM97L09Ja1lbF_sApt7WE8-1uo-abMWDfCZg2W4RkY8EHqLL2B-TOEydvvCvGFX6m8qSe7Ap-_ujE1Eao5ntPUjA0iYoCaaoClCtn7UL8O21qbGEttmDn3cisLp4CtLY3VZGhehLv0mbCgeUrhyGkejQG3Qm5XrQQVWMLVrJ5Tu4l4Gmbr20ZY9_FkbjXeP9n3vcIeMKrCG8IXmAAXcGQqdc3b_25mwxN4bCsxsy9DBsQqmQ5SB7zwPwnpS8S71owU-EgeWmvHT1Ma23dQt0o7HlI9TY' \
     --header 'content-type: application/json' \
     --data '
{
  "card_code": "2171707962088",
  "burned_date": "2022-06-11 15:00:00",

}
'

The burn of a reward can also be processed through batch files.

Updated 10 months ago