Web Widget Installation & Initialization Guide

The TRIFFT Web Widget enables you to offer a seamless loyalty program experience directly on your website. It acts as an additional member-facing touchpoint—alongside your app or loyalty microsite—and is especially effective for integrating into your e-commerce or brand website.

This guide walks you through installing and initializing the widget using TRIFFT’s secure APIs and a simple JavaScript snippet.

Overview

The widget installation process consists of three steps:

Obtain the Member UUID
Retrieve a Session Token (JWT)
Initialize the Widget

1. Obtain the Member UUID

The widget requires a member UUID to personalize the loyalty experience. There are several ways to obtain this value depending on your integration.

Option A: UUID already stored in your backend

If you’ve already integrated with TRIFFT and have the member.id stored in your backend, you can use it directly.

Option B: Retrieve UUID using member’s email

If you have the user’s email, you can retrieve the UUID using the Get a list of members API.

🟢 Request

curl --request POST \
     --url https://api.trifft.io/v1/members \
     --header 'Authorization: Bearer eec*********************************d1d' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "limit": 10,
  "offset": 0,
  "filter": [
    {
      "type": "EQ",
      "field": "email",
      "value": "[email protected]"
    }
  ]
}'

🔵 Response

{
  "status": 200,
  "success": true,
  "data": {
    "items": [
      {
        "id": "981***************************53c3",
        ...
      }
    ]
  }
}

Save the id field as your member UUID: UUID: 981***********53c3

⸻

Option C: Retrieve UUID using loyalty card number

If you have a card number, use the GET member detail by card Get member detail API to retrieve the UUID.

🟢 Request

curl --request GET \
     --url https://api.trifft.io/v1/card/999********3581/member \
     --header 'Authorization: Bearer eec*********************************d1d' \
     --header 'accept: application/json'

🔵 Response

{
  "status": 200,
  "success": true,
  "data": {
    "member": {
      "id": "981***************************53c3",
      ...
    }
  }
}

Again, save the id as your member UUID: 981*******************53c3

⸻

2. Retrieve a Session Token (JWT)

Once you have the member UUID, use it to get a session token from TRIFFT. This is done using the Get Member Session Token API.

🟢 Request

curl --request GET \
     --url https://api.trifft.io/v1/member/981***************************53c3/session-tokens \
     --header 'Authorization: Bearer eec*********************************d1d' \
     --header 'accept: application/json'

🔵 Response

{
  "status": 200,
  "success": true,
  "data": {
    "token": "yJ***************************JxwYo",
    "refresh_token": "700***************************7ed2"
  }
}

Save both the token and refresh_token — you’ll use them to initialize the widget.

⸻

3. Initialize the Widget

Add the following snippet to your site’s <head> section. It loads and initializes the TRIFFT Web Widget using the session tokens retrieved above.

<script src="https://widget.trifft.io/widget.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    window.trifftWidget.init({
      token: 'eyJ***************************JxwYo',
      refreshToken: '700***************************7ed2'
    });
  });
</script>

Replace the token values with the ones retrieved in Step 2.

⸻

✅ You’re Done!

The TRIFFT Web Widget is now installed and ready to serve personalized loyalty content to your members.

Need help or want to further customize the widget?
➡️ Reach out to your TRIFFT contact or visit our API documentation for more details.