> ## Documentation Index
> Fetch the complete documentation index at: https://docs.route.fun/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Route

> Add Route's swap interface to your site.

<Note>**Experimental.** If you have any issues, DM [@rapidssh on Twitter](https://x.com/rapidssh).</Note>

Hosted builder access is not enabled yet. The setup below is for the upcoming release.

In the developer portal, register your payout settings, enable **Trading widget**, and add your exact HTTPS website origin. Copy the snippet with your generated builder ID.

## HTML

```html theme={null}
<div id="route-swap" style="max-width: 440px"></div>
<script src="https://www.route.fun/widget.js"></script>
<script>
  const widget = RouteWidget.mount({
    container: '#route-swap',
    builderCode: 'YOUR_BUILDER_ID',
    theme: 'auto',
    height: 720
  });
  widget.ready.catch(console.error);
  // Call widget.destroy() when removing the integration.
</script>
```

For the local preview, use `http://127.0.0.1:3345/widget.js`.

## React / Next.js

Load `widget.js` once, then mount it in a client component. Cleanup removes the frame and its message listener. Use the loader for builder attribution; a bare iframe does not create a hosted session.

```tsx theme={null}
// Run after widget.js loads:
const widget = window.RouteWidget.mount({
  container: elementRef.current,
  builderCode: 'YOUR_BUILDER_ID',
  theme: 'auto'
});
// In your effect cleanup:
widget.destroy();
```

## Options

| Option        | Default  | Values                           |
| ------------- | -------- | -------------------------------- |
| `container`   | Required | Selector or HTML element         |
| `builderCode` | None     | Your generated public builder ID |
| `theme`       | `auto`   | `light`, `dark`, `auto`          |
| `height`      | `720`    | 480–1600 pixels                  |

Use a container at least 320 pixels wide. Content scrolls inside the frame when needed.

Users connect their wallet inside Route and review each transaction. Route and builder fees are shown separately; gas is extra. Builder fees and the payout address come from registered onchain settings, with a maximum 50 bps builder fee. Never put an API key in the embed.

Attributed requests share your workspace's plan limits. Without a builder ID, the widget uses normal public swap access without builder fees. Default token overrides, limit orders and Earn are not supported.

Allow `https://www.route.fun` in your site's `frame-src` and `script-src`, and `https://build.route.fun` in `connect-src`. Builder swaps currently require an ordinary EOA wallet; delegated and contract wallets are unsupported. **Open Route** opens the normal site without builder attribution.