Skip to main content

SDK-integration

SDK Integration​

To embed the member portal directly within your website or mobile app (via a WebView), Qualifio provides a lightweight SDK that facilitates rendering, resizing, and domain communication.

This is the recommended method for environments where a seamless and flexible integration is needed, especially to avoid redirection between different domains to authenticate a member before displaying the portal.

✅ Prerequisites​

  • A configured member portal (with a valid program-id)
  • A custom domain (CNAME & TXT records) linked to lb.prd.qualif.io, pointing to your portal (e.g., loyalty.mydomain.com)
  • A valid SecureToken (JWT or JWE) passed in the URL
  • For WebViews: if you're not using SecureToken, make sure the WebView supports and retains cookies to allow authentication. The domain serving the portal must match or be properly configured to allow authentication and session tracking within the app.

🚀 Step 1 – Load the SDK​

Add the SDK to the <head> of your HTML page:

<script src="https://sdk.qualifio.app/qualifio-web-sdk.min.js" async></script>

🔧 Step 2 – Embed the Portal​

Use the <qlf-member-portal> web component to render the portal:

<qlf-member-portal
  program-id="YOUR_PROGRAM_ID"
  base-url="https://your.custom.domain"
  default-height="1600px">
</qlf-member-portal>

Parameters​

AttributeDescription
program-idUUID of your reward program
base-urlCustom domain configured for the portal (must include https://)
default-height(Optional) Default height to render the portal; can adjust dynamically

Note: the UUID of your reward program to be found in the back-office, via the program webview link, e.g., b4bff9d2-834a-43d1-a477-b17a2ff67e7c

Screenshot​

📦 Example Implementation​

My Company

<qlf-member-portal
  program-id="444444xXX4-44xx-4x4x-xx44-4Xx4244444"
  base-url="https://loyalty.mycompanydomain.com"
  default-height="1600px">
</qlf-member-portal>

Using SecureToken with WebView + SDK​

When embedding the portal within a WebView (typically in a mobile app), SecureToken is the recommended method to authenticate members without requiring a full SSO flow.

🛠 Integration Steps​

1. Generate a SecureToken​

Use your backend to generate a cryptographically signed JWT or JWE. Follow the structure outlined in the SecureToken documentation.

2. Append the token to the portal URL​

Include the token in the base-url as a query parameter:

<qlf-member-portal
  program-id="444444xXX4-44xx-4x4x-xx44-4Xx4244444"
  base-url="https://loyalty.mycompanydomain.com"
  qual_token="YourToken"
  default-height="1600px">
</qlf-member-portal>

3. Ensure Same-Domain Context​

For token-based login to work in a WebView:

  • The portal must be served under the same domain context
  • Avoid redirects or domain mismatches during loading

💡 Additional Tips​

  • Token lifetime: Use the exp claim to avoid long-lived tokens
  • Prefill data: Use the profile object inside the token to prefill member info (email is mandatory)
  • Event tracking: Combine with Qualifio Webhooks to track events and trigger rules post-authentication