Embeddable swap widget

Embed the Ophis swap app so users can trade from your site.

Embedded swapsLoad swap.ophis.fi in an iframe on your page.

Wallet connectionPass an EIP-1193 provider to connect a wallet inside the widget.

Fee configurationThe widget applies the Ophis fee policy for the selected chain.

Install for React

1. Install the package. Add the widget and its React dependencies.

   npm install @ophis/widget-react react react-dom

2. Render the widget. Add OphisWidget to your page.

   import { OphisWidget } from '@ophis/widget-react';
   
   export function Swap() {
     return (
       <OphisWidget
         params={{ tradeType: 'swap', width: '450px', height: '640px' }}
         onReady={() => console.log('Ophis widget ready')}
       />
     );
   }

3. Connect a wallet. Pass an EIP-1193 injected wallet as provider.

The wrapper supplies baseUrl and appCode automatically.

Install for JavaScript

1. Install the library. Use the underlying CoW Protocol widget library.

   npm install @cowprotocol/widget-lib

2. Create the widget. Add a container with the ID ophis-widget, then point the widget at Ophis.

   import { createCowSwapWidget } from '@cowprotocol/widget-lib';
   
   const container = document.getElementById('ophis-widget')!;
   createCowSwapWidget(container, {
     params: {
       baseUrl: 'https://swap.ophis.fi', // the Ophis host
       appCode: 'ophis',
       tradeType: 'swap',
       width: '450px',
       height: '640px',
     },
   });

Use the default fee policy

Leave partnerFee unset to use Ophis's base and price-improvement fees. An explicit partnerFee uses that volume-fee bps value in place of the default policy.

Widget configuration

Field	Default via @ophis/widget-react	Purpose
baseUrl	https://swap.ophis.fi	Iframe host; override for a self-hosted or staging Ophis.
appCode	ophis	Tags orders in appData. Set it to your registered code to see your volume in the earnings report.
partnerFee	Unset	The iframe applies the complete Ophis fee policy.
partnerFee.recipient	Ophis Safe when overridden	Pinned by the React wrapper.
chainId, sell, buy, theme, tokenLists	Upstream defaults	CoW widget parameters pass through.

Choose a theme

Set theme to 'light', 'dark' or a full palette object. The default uses Ophis app styling.

Run the demo

1. Open the examples. Use examples/widget-embed/ for React, Next.js, vanilla JS and raw iframe snippets.
2. Start the demo. Run npx serve . in that folder and open index.html.

Hosting and settlement

Chains	Orderbook
Optimism, Unichain, Robinhood Chain, Arc	Ophis self-hosted orderbooks
Ethereum, Base, Arbitrum, Polygon, BNB, Gnosis, Avalanche, Linea, Plasma, Ink	api.cow.fi

The widget selects the orderbook for the chosen chain. Use the standalone app for direct Circle bridging.

A self-hosted iframe host must allow third-party framing: set CSP frame-ancestors * and omit X-Frame-Options: SAMEORIGIN. The hosted app already allows framing. Users sign fund-moving actions in a wallet popup outside the iframe.

License	Value
Widget	GPL-3.0

Next

FeesRead the fee policy for each settlement path.Networks and routesCheck network and bridge support.Agent integrationBuild a programmatic integration with MCP or the SDK.