Get Started with the Loyalty Web Kit

Introduction

Splio Loyalty Web Kit is a powerful, easy-to-integrate JavaScript SDK for brands who want to create interactive loyalty experiences for their users. With the Loyalty Web Kit, Splio provides a quick and easy interface to integrate into your e-commerce platform, allowing customers to earn and redeem rewards, track their points progress and engage with your brand.

The SDK is designed to be packaged yet customizable, so developers can ship the fully responsive Loyalty front at a glance without having to build it yourself from scratch.

You can read more on the features of the Loyalty Web Kit in this article.

1. General principles

1.1 Integration on your e-commerce

The Loyalty Web Kit lets you integrate a User Interface of your Loyalty program without having to build UI components and API calls to Splio. For the integration you will need to:

• Client side: Load the SDK JavaScript that we provide you with. Different display modes are available (inline, widget, manual) and you can freely embed it in the div of your choice. You can read more in this section.
• Server side:
  • authToken: Generate the JWTs used to secure the calls and authenticate contacts with Splio. You can read more in this section.
• User flow recommandations: once authenticated through your website, we recommend to redirect the user to the initial Loyalty SDK page for an optimized flow. We provide more details in this article.

Note that these are the generic principles and the SDK can be integrated in any e-commerce tool such Shopify, Prestashop, Magento, Salesfroce Commerce Cloud, WooCommerce etc.

📘

Pre-requisite

Please note that in order for the Loyalty Web Kit to work, your e-commerce needs to know the unique key set in Splio Customer Platform.

1.2 Configuration on Splio Customer Platform

Here are the main concepts related to your universe in Splio:

• The SDK is linked by a 1-1 relationship with a Loyalty Program.
• Multiple SDK can be created and setup in a single universe.
• An instance of the SDK is called a configuration with a unique configurationId.
• A specific api_key is provided for each SDK configuration that you will be able to retrieve on the platform.

2. Main features

2.1 Customization

All CSS assets are hosted by Splio and lets your brand customize the UI through Splio Customer Platform directly. The Loyalty SDK offers different integration modes:

• Full integration with the user interface
• Build a custom UI: if you wish to build your own UI, you can use the Loyalty SDK as a mean to achieve that quickly through our available methods.. Our APIs can also be used for specific needs not covered by the Loyalty SDK.

The choice between these options depends on the brand’s need for personalization freedom. Note that if a custom UI is built using the available methods, the CSS sheets become irrelevant, and any personalized styling sheets created in the Splio Customer Platform won’t be necessary for the marketing team.

📘

Beta feature

As we recommend to promote your Loyalty program on different pages of your e-commerce, you also have the possibility to integrate standalone UI components of the SDK.

2.2 Display modes

With the SDK, you will be able to manage several display modes:

Inline: the "splio-sdk" div will serve as the container of the interface which will occupy the entire width of the interface and will be responsive.

Widget: displays the current point balance in an interactive badge on the bottom corner. Ideal to integrate the SDK in multiple pages of your e-commerce. The position of the badge can be customized.

Note that the SDK is fully responsive and does not depend on the container you are using.

2.3 Multi lang management

If your website supports multiple language, we provide you with the ability of handling different SDK configurations to handle each of the language needed. In this case, a configuration is associated to a language configured in Splio Platform. This way, you can have distinct translations, rewards and even loyalty program for each language.

Integration detail: load the SDK server-side based on the users' navigation language. We provide you with the details in the guides.

2.4 Anonymous and authenticated mode

The Loyalty SDK allows displaying information on your program for an anonymous or authenticated users:

• When a user is anonymous, the Loyalty Web Kit needs basic information about the loyalty program to be able to display configurations such as the tier benefits, how to earn points and rewards etc.
• When a user is logged in, the Loyalty Web Kit needs to authenticate them to display their information (points, rewards, current tier etc.) and allow them to perform actions like earning points and claiming rewards.

What's next ?

If you are using Shopify, please go this dedicated article.