Skip to main content

Embed the quote box (Frame)

Drop the Opshuns quote box into any site with an iframe. Traders get quotes and fill through your page; you can take a referral fee on those fills.

Hosts:

EnvironmentURL
Productionframe.opshuns.com
Testnetframe.testnet.opshuns.com
Stagingframe.staging.opshuns.com
Localhttp://localhost:3005

The trading app landing page includes a live preview and a copy-paste snippet. Point VITE_FRAME_URL at the matching host so that preview is correct.

Quick start​

<iframe
  src="https://frame.opshuns.com/?referralAddress=0xYOURADDRESS"
  width="420"
  height="740"
  style="border:0;border-radius:12px;"
  title="Opshuns"
></iframe>

Replace 0xYOURADDRESS with the wallet that should receive referral fees. Invalid or missing addresses are ignored (no referral).

With the payoff diagram, use a wider frame:

<iframe
  src="https://frame.opshuns.com/?referralAddress=0xYOURADDRESS&showPayoffDiagram=true"
  width="720"
  height="740"
  style="border:0;border-radius:12px;"
  title="Opshuns"
></iframe>

Query parameters​

All flags are case-insensitive. Boolean params accept true / false.

ParamDefaultEffect
referralAddressnone0x + 40 hex chars. Credited on fills that go through this embed.
showPayoffDiagramfalsetrue shows the options payoff diagram beside the quote box.
tooltipstruefalse hides all hover help (useful in a short iframe).

Examples:

https://frame.opshuns.com/?referralAddress=0xYOURADDRESS
https://frame.opshuns.com/?referralAddress=0xYOURADDRESS&showPayoffDiagram=true
https://frame.opshuns.com/?referralAddress=0xYOURADDRESS&showPayoffDiagram=false&tooltips=false

Referral fees​

On fills that include a valid referralAddress:

  • 1.22 bps of notional underlying
  • 19.5 bps of premiums

The address is read from the iframe URL. On fill, the widget calls taker-direct executeIntent(…, takerPermits, referrer) with your address as referrer (address(0) / omitted fee when unset). Use your own wallet, not the 0xYOURADDRESS placeholder.

Sizing​

Suggested iframe size (the widget grows with strategy fields and the calendar):

LayoutWidthHeight
Quote box only420740
Quote box + payoff (showPayoffDiagram=true)720740

Use scrolling="no" if the host clips scrollbars; give the iframe enough height for the open expiry calendar and quote list. tooltips=false avoids hover text that would otherwise overflow a tight frame.

What traders see​

Same quote box as the trading app: amount, underlying, premium token, expiry (American / European), strategy picker, RFQ offers, and wallet connect. Spreads work as in Option spreads.

Wallet popups (injected wallets / WalletConnect) open outside the iframe. Do not sandbox the iframe in a way that blocks those popups (allow-popups if you use sandbox).

Host page notes​

  • The frame allows any parent (frame-ancestors *). Your page does not need a special CSP to contain it; you only need to allow the frame src (usually frame-src https://frame.opshuns.com).
  • The trading app itself is not embeddable (X-Frame-Options: DENY). Always iframe frame.*, not app.*.
  • referrerPolicy="strict-origin-when-cross-origin" is enough; the widget does not need extra cookies.

Local development​

npm run dev:framed

Open http://localhost:3005 or embed:

<iframe
  src="http://localhost:3005/?referralAddress=0xYOURADDRESS&showPayoffDiagram=true"
  width="720"
  height="740"
  style="border:0;border-radius:12px;"
  title="Opshuns"
></iframe>

The framed app talks to the same API / RPC as trading (VITE_API_URL, etc.). Run the API locally if you want live quotes.