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

[block:tutorial-tile]
{
  "backgroundColor": "#018FF4",
  "emoji": "🦉",
  "id": "64185bd2328782003d4ba119",
  "link": "https://developer-scp.readme.io/v1.0/recipes/how-to-embed-the-loyalty-sdk-to-your-website",
  "slug": "how-to-embed-the-loyalty-sdk-to-your-website",
  "title": "How to embed the Loyalty SDK to your Website?"
}
[/block]

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](https://support.splio.com/hc/en-us/articles/10336182072850-Lists-and-unsubscriptions-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.

```javascript
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;