Skip to main content
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
​
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
Source identifier for revenue tracking (e.g., your domain name). Recommended for proper attribution.

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