Skip to main content

​
What is the Houdini Widget?

The Houdini Widget is a pre-built, hosted swap interface that you embed into any website or web application with a single <iframe>. It renders the full Houdini swap experience — no backend and no API key required for a basic embed. You control which features appear and preselect the swap pair through URL parameters on the iframe src.

Try the Widget Playground

Configure the widget visually, preview it live, and copy a ready-to-paste embed snippet.

​
Key Features

Drop-in Integration

Add a full-featured swap interface in minutes with a single iframe

Configurable via URL

Preselect tokens and show or hide tabs with simple query parameters

All Route Types

Supports private, semi-private, and DEX swaps out of the box

Responsive Design

Works on desktop, tablet, and mobile devices

Auto-Updated

Maintained and updated by Houdini - always current

No Backend Required

The widget handles all swap logic - no server or API key needed to embed

​
Quick Start

​
Embed with an iframe

Add the widget to your page in 2 steps:
1

Copy the iframe

2

Paste it into your page

Drop the snippet anywhere in your HTML. Adjust width and height to fit your layout. That’s it — the widget is live.

​
Configuration (URL parameters)

Append query parameters to the iframe src to preselect tokens and control which tabs are visible. You can build and preview these combinations in the Widget Playground.
Tab parameters are opt-out: every tab is shown by default, and you set =true to hide the ones you don’t want. There is no “include” parameter.

​
Examples

Preselect an ETH → SOL swap:
Show only the Swap tab (hide Multiswap and Send):
Everything combined — widget mode, ETH → SOL preselected, Swap tab only:

​
Theming

Deeper visual customization (custom colors, fonts, and styling) is coming with the Widget SDK. It is not yet available via URL parameters.

​
Notes & gotchas

  • Opt-out, not opt-in. The hide* parameters remove tabs; there is no parameter to add tabs. All tabs are visible unless you hide them.
  • Don’t hide all three tabs. Setting hideSwap, hideMultiswap, and hideSend all to true leaves an empty tab header. Always keep at least one tab visible.
  • widgetMode is independent of the hide* flags. It only controls the badge chrome (“Powered By” / “New”); it does not change which tabs appear.
  • The /widget route is always in widget mode, so you only need widgetMode=true when embedding a different route.

​
Widget vs API Integration