Embedding Market Cards

Every binary option and prediction market on Sentico can be embedded on third-party sites as a live, read-only market card — the same pattern you know from Polymarket and Kalshi odds widgets. The card shows the market question, the current YES probability, its 24h change, a live probability chart, and a "Trade on Sentico" deep link. It uses public market data only: no wallet, no API key, no authentication.

Quick start

The easiest way to get a snippet: open the market on app.sentico-labs.xyz and press the </> embed icon next to the chart legend. It opens the embed builder — pick the market, toggle chart / buy buttons / volume / border / theme / fit container against a live preview, then press View Code. Two variants are offered:

Default — web component (recommended)

<script src="https://app.sentico-labs.xyz/embed.js" async></script>
<sentico-market-embed
  market="btc-100k-1-1-27"
  theme="auto"
  chart="true"
  buttons="true"
  volume="true"
  border="false"
  width="400"
>
  <a href="https://app.sentico-labs.xyz/trade/btc-100k-1-1-27">
    Will Bitcoin reach $100,000 before January 1, 2027? — Sentico
  </a>
</sentico-market-embed>

What the component gives you over a plain iframe:

• Auto-height. Omit the height attribute and the card reports its content height to the host page (postMessage) — no clipping, no letterboxing, no guessing pixel heights.
• theme="auto". The card follows the host page's prefers-color-scheme and flips live when the visitor switches — no reload.
• No-script fallback. The children of the tag (the link above) stay visible if the script is blocked or fails to load, so you never render a blank hole.
• fit-container="true". The card spans the width of its container for responsive layouts (replaces width).
• Self-hosted. embed.js ships from app.sentico-labs.xyz itself — no third-party CDN in your supply chain, versioned with the app.

Minimal — plain iframe

<iframe
  src="https://app.sentico-labs.xyz/embed/btc-100k-1-1-27?theme=dark"
  width="400"
  height="400"
  style="border:0;border-radius:12px"
  title="Will Bitcoin reach $100,000 before January 1, 2027? — Sentico"
  loading="lazy"
></iframe>

Use this in editors and CMSes that strip <script> tags (Substack, many newsletter tools). Fixed height; theme=auto also works here (resolved inside the card, live).

URL format

https://app.sentico-labs.xyz/embed/<market-slug>?theme=dark&chart=0&buttons=0&volume=0&border=1

Part	Meaning
<market-slug>	The market's URL slug — identical to the one in the trade screen URL (/trade/<market-slug>). Slugs with a trailing -<marketId> also resolve by ID, so a card keeps working even if the display symbol changes.
theme	Optional. dark (default, charcoal surface), white (bright surface), or auto (follows the visitor's prefers-color-scheme, live).
chart	Optional. 0 hides the probability chart. Default: shown.
buttons	Optional. 0 hides the Yes/No buy buttons (they deep-link into the trade screen). Default: shown.
volume	Optional. 0 hides the 24h volume row. Default: shown.
border	Optional. 1 draws a rounded border inside the card. Default: off.
resize	Optional. 1 switches the card to auto-height mode: it reports its content height to the parent window as { type: "sentico:embed:resize", height }. Set automatically by the web component — only needed when you build your own resize handling.

Behavior

• Live updates. The card subscribes to the same public delta feed the app uses (WebSocket with SSE fallback); price, chart, and volume tick in real time without polling by the host page.
• Read-only by design. There is no order entry inside the iframe. The "Trade on Sentico" button opens the full trade screen in a new tab. This keeps wallet interaction out of third-party frames entirely.
• Spot markets render a compact last-price card without the probability chart; the embed surface is aimed at prediction/binary markets.
• Search engines are excluded (noindex on the embed route); embeds do not compete with the canonical market page.

Framing policy

The embed route is served with Content-Security-Policy: frame-ancestors *, so it can be iframed from any origin. All other app routes refuse cross-origin framing (frame-ancestors 'self' + X-Frame-Options: SAMEORIGIN) — only the purpose-built card is embeddable, never the trading surface itself.

Sizing guidance

The card is responsive and fills whatever box you give it. Recommended minimums: 320 × 280 px; the reference size is 420 × 360 px. For responsive layouts, size the iframe with CSS (width: 100%; aspect-ratio: 7/6) instead of fixed attributes.