Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
44 lines (26 sloc) 2.19 KB

Iframe Integration

Uniswap can be used within other sites as an iframe. An iframe shows an exact version of the uniswap.exchange site and can have custom prefilled settings.

Why You May Want This

Integrating the Uniswap site directly into your web application can be useful for a variety of reasons.

uniswap.exchange allows users to buy, sell, send, or provide liquidity for ERC20 tokens. An iframe integration may be useful if your application provides services around these ERC20 tokens. (For example, users can buy DAI through a Uniswap iframe on your site, then allow users to lend that DAI on your site).

It can also be useful if your application requires users to acquire some token in order to use some service (For example, allow users to buy "REP" token so they can engage in prediction markets on the Augur Dapp).

iframe vs. custom UI

One benefit of an iframe integration is that the your site will automatically keep up with any improvements/additions to the uniswap.exchange site. After the initital integration is setup no further work is needed to pull in updates as the exchange site is updated over time.

Live Example

An example of an Iframe integration can be found on the FOAM site https://map.foam.space/

To see the Iframe click the dropdown in the top right and click "get foam".

Foam Iframe Example

Add To Your Site

To include a Uniswap iframe within your site just add an iframe element within your website code and link to the Uniswap exchange.

Linking to a ETH <-> DAI swap page would look something like this. To link to a token of your choice replace the address after "outputCurrency" with the token address of the token you want to link to.

<iframe
  url="https://uniswap.exchange/swap?outputCurrency=0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359"
  height="600px"
  width="600px"
  id="myId"
  display="initial"
  position="relative"
/>

You can customize the selected page, selected custom tokens and more using URL query parameters. See https://docs.uniswap.io/frontend-integration/linking for more.

You can’t perform that action at this time.