> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withclasp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK

> Steps to embed the Clasp Employer and Employee Component via iFrame.

<Info>
  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.
</Info>

## Prerequisites

| What                      | Why                                                                                |
| ------------------------- | ---------------------------------------------------------------------------------- |
| **Clasp API key**         | Used as a Bearer token from your backend to call the API and mint component links. |
| **Employer & Member IDs** | Returned from the API when you create each record.                                 |

<Warning>
  Never expose your long‑lived API key in the browser.\
  All API calls that use the Bearer key should originate **server‑side**.
</Warning>

## 1. Employer Component

```bash theme={null}
POST /components/employer
Authorization: Bearer $CLASP_API_KEY
Content-Type: application/json
```

```json theme={null}
{ "employer": "er_123" }
```

**Response**

```json theme={null}
{ "url": "https://benefits.withclasp.com/?otp_token=•••" }
```

## 2. Employee (Member) Component

```bash theme={null}
POST /components/member
Authorization: Bearer $CLASP_API_KEY
Content-Type: application/json
```

```json theme={null}
{ "member": "mem_456" }
```

**Response**

```json theme={null}
{ "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

```jsx theme={null}
<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](mailto:support@withclasp.com)** or your dedicated solutions engineer.