Build your JWT server-side

This is the token to authenticate your loyalty program & your user (i.e., used by the SDK to authenticate requests for both authenticated and non-authenticated users).

🦉

How to embed the Loyalty SDK to your Website?

Open Recipe

You can build your JWT by passing the following data. When a user is authenticated in your website, you need to pass its data that will be upserted into Splio (Contacts and Members):

Splio Parameter	SDK syntax	Mandatory	Description
universe	universe	yes	Your Splio tenant identifier.
n/a	configuration_id	yes	Configuration Id of your SDK. You need 1 configuration per language - configuration(1:1)lang.
contact_id	external_id	yes (authenticated user)	Unique key of the contact set in your Splio universe.
card_code	card_code	no	Need to be provided, only if Splio Customer Platform is not owning its attribution. Used to uniquely identify a membership to a program. If you are providing it, make sure that it is unique and immutable.
email	email	no	Email of the contact.
list_ids	list_ids	no	Subscribe the contact to the list(s) which ids are provided (comma separated). Check this article for more information about List Management.

Initialize the SDK client side

Here is an exemple of React code, that integrate the SDK. Please note that the authToken value must computed from the backend, for security reasons.

import { useEffect } from 'react';

function App() {

  useEffect(() => {
    window.addEventListener('splioSDK:loaded', () => {
      global.splioSDK.init({
        authType: "sha256",
        // The authToken must be computed server side
        authToken: "universe=pophat&configuration_id=3&&[email protected]&[email protected]&firstname=Elodie&lastname=Riquier|298472263849dab0b117c178a86653a302f9574df369d7b7bf5301d41ddb",
        display: { mode: 'inline', container: '#splio-sdk' },
      })
    });
    var myScript = document.createElement('script');
    myScript.crossOrigin= true;
    myScript.src= 'https://static.splio.pro/sdk/web-sdk/v1/splio-web.js';
    myScript.type= 'module';
    myScript.async = true
    document.body.appendChild(myScript);
  }, []);

  return (
    <div className="App">
      <div id="splio-sdk"></div>
      <link
    			rel="stylesheet"
    			id="link-css"
    			href="https://static.splio.pro/sdk/web-sdk/v1/splio-web.css" />
    </div>
  );
}

export default App;