Clasp components are plug-and-play UIs delivered as secure, magic-link URLs. You create the company/employee via API → request a component URL → iframe it in your app (or open it as a standalone page). That’s it.

Prerequisites

WhatWhy
Clasp API keyUsed as a Bearer token from your backend to call the API and mint component links.
Employer & Member IDsReturned from the API when you create each record.

Never expose your long‑lived API key in the browser.
All API calls that use the Bearer key should originate server‑side.

1. Employer Component

POST /components/employer
Authorization: Bearer $CLASP_API_KEY
Content-Type: application/json
{ "employer": "er_123" }

Response

{ "url": "https://benefits.withclasp.com/?otp_token=•••" }

2. Employee (Member) Component

POST /components/member
Authorization: Bearer $CLASP_API_KEY
Content-Type: application/json
{ "member": "mem_456" }

Response

{ "url": "https://benefits.withclasp.com/?otp_token=•••" }

Each URL is already scoped to that employer or member via the one‑time token (otp_token).

Embedding the Component

<iframe
  src={iframeUrl}          // the `url` returned above
  style={{
    border: 0,
    width: "100%",
    height: "900px"
  }}
/>
  • ✅ Works in any framework that supports iframes (React, Vue, plain HTML, etc.).
  • ✅ Can also be opened as a standalone magic link (handy for email‑based flows).

Need help? Ping us at support@withclasp.com or your dedicated solutions engineer.