Add To Mobile Wallet

Standalone component

❗️

This standalone component is only available if you are using "Splio Mobile Wallets". Read more on "What's Splio Mobile Wallets?".

Goal

Whether you are an existing e-commerce user discovering the loyalty card for Mobile Wallets directly in the website, or a new user discovering it from Social Media, In-store Display or printed flyers, users should be able to smoothly add their loyalty card to their mobile.

Using this component will help you with the technical integration and the UI to let your customer add their cards to their mobile without having to build anything.

Pre-requisites

SDK configuration settings

First of all, the isMobileWalletsActivated boolean in the settings section of your configuration should be set totrue :

JSON

"settings": {
  "isMobileWalletsActivated": true
}

Note the CSS styles and content will inherit from the settings of your configuration: color background, font style, wording and Mobile Wallet preview image.

Init the SDK

📘

If you don't know about the init function, you can read this.

To init the SDK with the Add To Mobile Walletstandalone component, you need to add a property in the display object. Example:

JavaScript

splioSDK.init({
	authType: 'jwt',
	authToken: '{{yourtoken}}',
  display: {
  	mode: 'inline',
  	container: '#splio-sdk',
  	component: 'AddToMobileWallet' // this is the setting for standalone component
  }
});

Rendering

The AddToMobileWallet component is displayed in the specified container. The component is responsive and its display will be adapted to the screen size and/or the parent <div> size.

Recommandations

This component can be embedded in any page of your e-commerce where you want to highlight the Mobile Wallets. We provide you with general recommandation in this article .