Using React Component

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).

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 ParameterSDK syntaxMandatoryDescription
universeuniverseyesYour Splio tenant identifier.
n/aconfiguration_idyesConfiguration Id of your SDK. You need 1 configuration per language - configuration(1:1)lang.
contact_idexternal_idyes (authenticated user)Unique key of the contact set in your Splio universe.
card_codecard_codenoNeed 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.
emailemailnoEmail of the contact.
list_idslist_idsnoSubscribe 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', () => {
        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= '';
    myScript.type= 'module';
    myScript.async = true
  }, []);

  return (
    <div className="App">
      <div id="splio-sdk"></div>
    			href="" />

export default App;