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;
Updated 4 days ago