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

# Embedding Thread Iframes

> Learn how to embed Kash prediction market threads on your website

Embed Kash prediction market threads on your website using HTML iframes. This guide covers the basics of thread embeds, iframe parameters, and best practices.

***

## Quick Start

The simplest way to embed a thread is using an iframe with the thread iframe URL:

```html theme={null}
<iframe
  src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
  width="100%"
  height="900"
  frameborder="0"
  allow="clipboard-write"
  title="Kash Prediction Markets"
></iframe>
```

Replace `abc123` with your thread ID (obtained from the [GET /api/threads](/developer-docs/public-embed-api/endpoints/threads) endpoint).

***

## Iframe Attributes

### Required Attributes

<ParamField path="src" type="string" required>
  The thread iframe URL: `https://app.kash.bot/threads/{threadId}/iframe`
</ParamField>

### Recommended Attributes

<ParamField path="width" type="string" default="100%">
  Iframe width - use `100%` for responsive design
</ParamField>

<ParamField path="height" type="string" default="600">
  Iframe height in pixels (minimum 400px recommended)
</ParamField>

<ParamField path="frameborder" type="string" default="0">
  Border width (set to `0` for seamless embed)
</ParamField>

<ParamField path="allowfullscreen" type="boolean">
  Allow fullscreen mode for market charts
</ParamField>

<ParamField path="loading" type="string" default="lazy">
  Use `eager` for above-fold embeds, `lazy` for below-fold
</ParamField>

<ParamField path="title" type="string">
  Accessibility: describe the iframe content for screen readers
</ParamField>

***

## Query Parameters

<ParamField query="source" type="string">
  Source identifier for revenue tracking (e.g., your domain name). **Recommended** for proper attribution.
</ParamField>

***

## Complete Example

Here's a fully configured iframe embed:

```html theme={null}
<iframe
  src="https://app.kash.bot/threads/abc123/iframe?source=example.com"
  width="100%"
  height="900"
  frameborder="0"
  allow="clipboard-write"
  loading="lazy"
  title="2024 Presidential Election Prediction Markets"
></iframe>
```

**What this does:**

* Embeds thread `abc123` with the 20-tile market heatmap
* Tracks source as `example.com` for revenue sharing
* Displays thread title, description, and stats
* Users can click any tile to view market details in a new tab
* Predictions are made via Twitter (no login required in the iframe)

***

## Responsive Design

### Using CSS for Responsiveness

Wrap the iframe in a responsive container:

```html theme={null}
<div class="kash-embed-container">
  <iframe
    src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

<style>
  .kash-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
  }

  .kash-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
```

### Mobile-Responsive Height

Adjust iframe height for different screen sizes using CSS media queries:

```html theme={null}
<iframe
  id="kash-embed"
  src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
  width="100%"
  height="900"
  frameborder="0"
></iframe>

<style>
  @media (max-width: 768px) {
    #kash-embed {
      height: 700px;
    }
  }
  
  @media (max-width: 480px) {
    #kash-embed {
      height: 600px;
    }
  }
</style>
```

***

## Security Considerations

### Sandbox Attribute

Use the `sandbox` attribute to restrict iframe capabilities:

```html theme={null}
<iframe
  src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
></iframe>
```

**Sandbox permissions explained:**

* `allow-scripts` - Required for embed functionality
* `allow-same-origin` - Allows API calls to Kash backend
* `allow-popups` - Enables market detail modals
* `allow-forms` - Allows trading form submissions

<Warning>
  **Do not use `allow-top-navigation`** - This prevents the iframe from redirecting your parent page.
</Warning>

### Content Security Policy (CSP)

If your site uses CSP headers, add Kash to allowed sources:

```
Content-Security-Policy: frame-src https://app.kash.bot; script-src 'self' https://app.kash.bot;
```

***

## Finding Thread IDs

Use the [GET /api/threads](/developer-docs/public-embed-api/endpoints/threads) endpoint to discover thread IDs:

```javascript theme={null}
async function findThreads() {
  const response = await fetch(
    'https://app.kash.bot/api/threads?status=active&limit=10'
  );
  const data = await response.json();

  data.threads.forEach((thread) => {
    console.log(`Thread: ${thread.title}`);
    console.log(`ID: ${thread.id}`);
    console.log(`Embed URL: https://app.kash.bot/threads/${thread.id}/iframe?source=your-site\n`);
  });
}

findThreads();
```

***

## Performance Best Practices

### 1. Lazy Loading

Load below-fold iframes only when visible:

```html theme={null}
<iframe
  src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
  loading="lazy"
></iframe>
```

### 2. Preconnect to Kash Domain

Speed up iframe loading with DNS preconnect:

```html theme={null}
<head>
  <link rel="preconnect" href="https://app.kash.bot" />
  <link rel="dns-prefetch" href="https://app.kash.bot" />
</head>
```

***

## Accessibility

### Provide Descriptive Title

Help screen reader users understand iframe content:

```html theme={null}
<iframe
  src="https://app.kash.bot/threads/abc123/iframe?source=your-site"
  title="2024 Presidential Election prediction markets - Current probabilities"
></iframe>
```

### Keyboard Navigation

Kash embeds support full keyboard navigation:

* **Tab** - Navigate between markets
* **Enter** - Open market details
* **Escape** - Close modals

### ARIA Labels

The iframe automatically includes ARIA labels for interactive elements within the embed.

***

## Common Issues

### Iframe Not Displaying

**Problem:** Blank iframe or "Refused to display" error

**Solutions:**

1. Verify thread ID is correct
2. Ensure URL uses the `/iframe` route: `https://app.kash.bot/threads/{id}/iframe`
3. Check browser console for CSP errors
4. Confirm parent page is served over HTTPS (required)

### Height Not Correct

**Problem:** Iframe shows scrollbars or cuts off content

**Solutions:**

1. Set appropriate height: `height="900"` for threads, `height="500"` for markets
2. Use CSS media queries to adjust height for different screen sizes
3. Test on multiple devices and screen sizes

### Markets Not Loading

**Problem:** Embed loads but shows no markets

**Solutions:**

1. Check thread has active markets using [GET /api/threads/:id/markets](/developer-docs/public-embed-api/endpoints/thread-markets)
2. Verify the thread ID is correct and the thread is active

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Code Examples" href="/developer-docs/public-embed-api/examples/html">
    View complete implementation examples
  </Card>

  <Card title="API Reference" href="/developer-docs/public-embed-api/endpoints/threads">
    Explore REST API endpoints
  </Card>
</CardGroup>