Skip to main content

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.

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