Embeddable swap widget

Our swap widget is the same UI we ship on the main app—quotes, float/fixed, private routing where available, validation, order create—served from /embed so you can frame it or load it with embed.js without forking our frontend.

Widget vs API vs link-out

Widget: Fastest path—users stay on your page, we handle the heavy UI.
Server-side API + SDK: You want your own UX or you refuse to put a partner key in the browser. Call POST /swap/create from your server with x-navoswap-api-key in env.
Link-out: Sending users to https://app.navoswap.com is always valid when you do not need an embedded experience.

iframe

Set src to https://app.navoswap.com/embed. We send frame-ancestors * on /embed so your domain can frame us.

<iframe
            src="https://app.navoswap.com/embed?from=ETH&to=SOL&theme=dark"
            title="NavoSwap"
            width="420"
            height="720"
            loading="lazy"
            referrerpolicy="strict-origin-when-cross-origin"
            style="border:0;border-radius:16px;max-width:100%;display:block"
          ></iframe>

Adjust width and height to match your layout; the widget is responsive and uses a narrow max width internally. Use max-width:100% on the iframe so it scales down on small screens.

URL query parameters

All parameters are optional. Asset symbols are matched case-insensitively after the asset list loads.

Parameter	Description
`from`	“You send” asset symbol (e.g. `BTC`, `ETH`).
`to`	“You receive” asset symbol.
`amount`	Initial amount in float (non-fixed) mode; must be a positive number.
`theme`	`light` or `dark` for widget chrome only (sets `data-theme` inside the frame).
`apiKey`	Optional partner API key; forwarded as `x-navoswap-api-key` on order creation only. See security note below.

Loader script (`embed.js`)

For a one-line integration, you can load the hosted script from https://app.navoswap.com/embed.js. It reads data-* attributes on the <script> tag and injects an iframe immediately after the tag.

<script
  src="https://app.navoswap.com/embed.js"
  async
  data-base-url="https://app.navoswap.com"
  data-from="BTC"
  data-to="ETH"
  data-amount="0.1"
  data-theme="dark"
  data-width="420"
  data-height="720"
></script>

data-base-url — Origin of the swap app (omit to derive from the script src).
data-api-key — Optional; maps to the apiKey query parameter (same exposure risks as putting the key in the iframe src).

Partner attribution & API keys

Orders are attributed to your partner account when POST /swap/create includes a valid x-navoswap-api-key. The embed flow can supply that key via the apiKey query parameter so swaps initiated in the widget count toward your dashboard and, when eligible, affiliate commission.

Privacy & your policy

The iframe is our origin, not yours—disclose third-party content in your own privacy policy if regulations require it. /embed is noindex; it's not meant to rank in Google.

Framing & CSP on your side

If your site uses a restrictive Content-Security-Policy, allow framing the swap app origin in frame-src (or child-src where applicable), for example:

frame-src 'self' https://app.navoswap.com;