After integrating an iframe Uniswap widget into a marketplace site, users reported frequent swap errors due to CSP blocking scripts and redirects resetting progress. A custom trading component using Web Component with Shadow DOM resolves these issues by isolating styles without requiring a separate page. We develop embed widgets from scratch: from architecture choice (Web Component, iframe, npm) to integration with 1inch/0x/Paraswap and referral fee configuration. Starting at $800, our solution includes full documentation. Contact us for a consultation—we'll evaluate the load and help choose the architecture.
Which architectural approach to choose for embedding?
Web Component is the best balance of isolation and integration. Shadow DOM isolates styles, but the component lives in the same JavaScript context. It allows the host page to pass config via attributes and react to events.
<swap-widget tokens="ETH,USDC,USDT" default-input="ETH" default-output="USDC" fee-bps="30" theme="dark" ></swap-widget> Learn more about Web Components on MDN.
iframe is the most isolated option. The widget is a separate page embedded via <iframe src="https://swap.yourprotocol.com">. The host page cannot access the widget's DOM, and host XSS cannot reach the widget. Con: communication only via postMessage, style customization limited to CSS variables via URL parameters.
npm package offers maximum flexibility for developer integrators. It exports a React component (or headless logic) for embedding in existing React projects.
| Approach | Isolation | Customization | Integration complexity |
|---|---|---|---|
| iframe | Full | Limited | Low |
| Web Component | Good | Flexible | Medium |
| npm package | Minimal | Maximum | High |
Recommended approach: Web Component as the primary embed form + npm package for React projects. iframe only if security requirements demand full isolation.
Why aggregation via 1inch/0x is better than a custom DEX?
A widget for a single protocol (e.g., only Uniswap v3) is simpler: direct contract calls, familiar routing. But users see only one AMM's prices. Aggregation via 1inch API, Paraswap API, or 0x API yields better prices—on average 5-15% more efficient by splitting the order across multiple pools. The API returns the optimal route + calldata for the transaction.
const quote = await fetch( `https://api.1inch.dev/swap/v6.0/1/swap?` + `src=${inputToken}&dst=${outputToken}&amount=${amount}&from=${userAddress}&slippage=1` ).then(r => r.json()); // quote.tx contains the ready transaction to send await writeContractAsync({ to: quote.tx.to, data: quote.tx.data, value: BigInt(quote.tx.value), }); How to configure referral fees?
Most aggregator APIs support referral fees: you specify your address and bps, and part of the fee accrues to you on each swap. 1inch: fee parameter in the API. 0x: affiliateAddress + buyTokenPercentageFee. This does not affect the widget's smart contract—only the routing calldata.
Key UX components
Token selector – list of tokens with search by name/symbol/address. Token lists: Uniswap default tokenlist, 1inch tokenlist, or custom. Loading balances for each token via Multicall3 – one request instead of N. Token verification (verified/unverified) – protection against scam tokens. Warning for tokens not in a trusted list. Supports over 200 tokens.
Price display and slippage – swap price, price impact (especially important for large amounts), slippage tolerance (typically 0.1-1%, higher for volatile pairs). Show minimum received after slippage – the guarantee from the contract. Auto-update quotes every 15-30 seconds. Indicator “price updated” when change exceeds X%.
Approve flow – before the first ERC-20 token swap, an approve is required. Permit (EIP-2612) allows combining approve + swap into one transaction (via off-chain signature). Check if the token supports Permit via DOMAIN_SEPARATOR() or ERC-165. According to the EIP-2612 specification, Permit combines approve and swap into one transaction (see EIP-2612). Using Permit saves 30-40% gas compared to separate approve + swap, reducing transaction costs.
What's included in the work
- Widget configuration for your brand: colors, logo, borders.
- Integration with the chosen aggregator (1inch, 0x, Paraswap) and referral fee setup.
- Permit support for gas-less approve.
- Web Component implementation + optional npm package.
- Documentation for integrators: parameters, CSP, events.
- Testing and transaction simulation in Tenderly.
Work process
- Requirements analysis and current architecture audit.
- Design: choose approach (Web Component/iframe/npm), aggregator, and commission scheme.
- Widget development: component, API integration, Permit setup.
- Testing on testnet with transaction simulation via Tenderly.
- Production deployment and documentation preparation.
Common integration mistakes
- Ignoring CSP: the host page may block the widget's scripts. We always document required
connect-srcandscript-src. - Not checking Permit support: if the token does not support EIP-2612, the widget must use standard approve.
- Stale prices: outdated quotes lead to rejected transactions. We set a proper update interval.
Timeline estimates
Widget with fixed aggregator API (1inch/0x), Web Component packaging, basic customization: from 3 days (starting at $800). With custom routing, Permit support, iframe + npm variants, full documentation for integrators: up to 5 days (starting at $2,000). Timelines are finalized after specification review.
| Widget version | Timeline | Cost |
|---|---|---|
| Basic (fixed aggregator, Web Component) | from 3 days | from $800 |
| Extended (custom routing, Permit, iframe + npm) | up to 5 days | from $2,000 |
We have completed 15+ projects building swap widgets. Order a custom swap widget for your project—contact us for a consultation and quote. Turnkey swap widget development includes aggregator configuration, fee setup, and adaptation to your tokens.
Looking to embed a swap on your website? Our widget makes it easy. This embed widget crypto solution provides seamless integration with popular aggregators.