Embeddable swap widget

The NavoSwap swap widget is a hosted, full-featured exchange UI (quotes, float/fixed mode, private routing toggle, address validation, and order creation) that you can surface inside your own site or application. It is implemented as the /embed route on the public swap app and is designed to be framed by third-party origins without copying our front-end code.

When to use this widget

Widget: You want users to complete a swap inside your layout with minimal integration work—no need to rebuild token pickers, validation, or quote polling.
Server-side API + SDK: You need maximum control, custom UX, or you must keep the partner key off the public page. Call POST /swap/create from your backend with x-navoswap-api-key (same attribution as the widget; better for confidential key handling).
Link-out: Sending users to https://app.navoswap.com is always valid when you do not need an embedded experience.

iframe integration

Point an <iframe> at https://app.navoswap.com/embed. The swap app sends a Content-Security-Policy: frame-ancestors * response header on /embed so modern browsers allow embedding from your domain.

<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, cookies & compliance

The widget runs entirely inside an iframe served from NavoSwap infrastructure. Your site should disclose third-party framing and data practices in line with your privacy policy and applicable regulations. The embed page is marked noindex and is not intended as a landing page for organic search.

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;