);
}
```
***
## Theming
The Web Component uses CSS custom properties for theming. Override them on the host element:
```css theme={null}
apitraffic-request-log {
/* Typography */
--at-font-family: 'Inter', sans-serif;
--at-font-size: 13px;
/* Colors */
--at-bg-color: #ffffff;
--at-text-color: #1f2937;
--at-text-muted: #6b7280;
--at-accent-color: #3b82f6;
--at-danger-color: #ef4444;
/* Layout */
--at-border-color: #e5e7eb;
--at-border-radius: 6px;
--at-row-hover-bg: #f9fafb;
--at-max-height: 600px;
}
```
### Available CSS Custom Properties
| Property | Default | Description |
| -------------------- | ----------------- | ------------------------------ |
| `--at-font-family` | System font stack | Font family |
| `--at-font-size` | `13px` | Base font size |
| `--at-bg-color` | `#ffffff` | Container background |
| `--at-text-color` | `#1f2937` | Primary text color |
| `--at-text-muted` | `#6b7280` | Secondary/muted text |
| `--at-accent-color` | `#3b82f6` | Links, buttons, GET method |
| `--at-danger-color` | `#ef4444` | Errors, DELETE method |
| `--at-border-color` | `#e5e7eb` | Border color |
| `--at-border-radius` | `6px` | Container border radius |
| `--at-row-hover-bg` | `#f9fafb` | Row hover background |
| `--at-max-height` | `none` | Max height (set for scrolling) |
### Dark Mode
Set `theme="dark"` for a built-in dark theme, or `theme="auto"` to follow the user's OS preference via `prefers-color-scheme`.
***
## Token Refresh Flow
Embed tokens are short-lived by design. The SDK fires a `token-expired` event approximately 30 seconds before expiry, giving your app time to fetch a fresh token seamlessly:
```mermaid theme={null}
sequenceDiagram
participant Component as Embed Component
participant App as Your App
participant Server as Your Server
participant AT as ApiTraffic API
Note over Component: Token expires in 30s
Component->>App: apitraffic:token-expired event
App->>Server: GET /api/embed-token
Server->>AT: POST .../embeds/token
AT-->>Server: { token, expiresAt }
Server-->>App: { token }
App->>Component: el.token = newToken
Note over Component: Re-fetches data with new token
```
***
## Security
All filters (bucket, environment, criteria, stream view) are cryptographically signed into the JWT using HMAC-SHA256. The client SDK reads the token to display data but cannot modify the filters. Any tampering invalidates the signature.
No. The embed data endpoints extract the `accountSid`, `bucketSid`, and all filters directly from the verified JWT payload. Query parameters from the client are ignored for filtering — only pagination cursors (`from`, `limit`) are accepted.
Tokens are short-lived (default 1 hour, max 24 hours) and scoped to a specific bucket and filter set. An attacker can only see the same data the embed was designed to show, and only until the token expires. You can also rotate the signing secret by calling the token endpoint — a new secret is auto-generated if the existing one is cleared.
No. Your API token is only used **server-side** to generate embed JWTs. The browser only ever sees the embed JWT, which cannot be used to access any other ApiTraffic API endpoints.
***
## API Reference
### Create Embed Token
```
POST /v1/accounts/{accountSid}/embeds/token
```
**Authentication:** Bearer token (API token)
**Request Body:**
```json theme={null}
{
"bucketSid": "string (required)",
"view": "request-log",
"filters": {
"environmentSid": "string",
"criteria": "string",
"streamViewSid": "string"
},
"ttl": 3600,
"theme": "light"
}
```
**Response:**
```json theme={null}
{
"token": "eyJhbGciOiJIUzI1NiJ9...",
"expiresAt": "2025-03-17T05:27:00.000Z"
}
```
### Get Embed Requests
```
GET /v1/embed/requests?from={cursor}&limit={25}
```
**Authentication:** Bearer token (embed JWT)
### Get Embed Request Detail
```
GET /v1/embed/requests/{requestSid}
```
**Authentication:** Bearer token (embed JWT)
***
## Troubleshooting
Verify the `bucketSid` in your token request matches a bucket that has traffic. Check that any filters aren't too restrictive.
The embed token has likely expired. Implement the `apitraffic:token-expired` event handler (or `onTokenExpired` prop in React) to auto-refresh.
The component uses Shadow DOM, so your page styles should not affect it. If you see issues, ensure you're setting CSS custom properties on the `apitraffic-request-log` element itself, not inside its shadow root.
Ensure the SDK script or import is loaded before the element appears in the DOM. With the CDN approach, place the `