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:

<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 endpoint).

---

Iframe Attributes

Required Attributes

src · string · required

The thread iframe URL: https://app.kash.bot/threads/{threadId}/iframe

Recommended Attributes

width · string · default: "100%"

Iframe width - use 100% for responsive design

height · string · default: "600"

Iframe height in pixels (minimum 400px recommended)

frameborder · string · default: "0"

Border width (set to 0 for seamless embed)

allowfullscreen · boolean

Allow fullscreen mode for market charts

loading · string · default: "lazy"

Use eager for above-fold embeds, lazy for below-fold

title · string

Accessibility: describe the iframe content for screen readers

---

Query Parameters

source · string

Analytics label for embed attribution (e.g., your domain name). Recommended — it lets you (and Kash) segment embed traffic and interactions by placement. Note: source does not affect revenue share, which accrues per trade to the organization or partner that created the market.

---

Complete Example

Here’s a fully configured iframe embed:

<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
• Labels embed traffic as example.com for analytics attribution (organizations and partners earn revenue share on trades in markets they create — independent of source)
• 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:

<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:

<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:

<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

Do not use allow-top-navigation - This prevents the iframe from redirecting your parent page.

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 endpoint to discover thread IDs:

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:

<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:

<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:

<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
2. Verify the thread ID is correct and the thread is active

---

Next Steps

Code Examples

View complete implementation examples

API Reference

Explore REST API endpoints