Widget

Integrate the SuperSwap widget seamlessly into your website—whether it’s a decentralized application (dApp) or a traditional website.

With two simple integration methods (React or iFrame), you can enable users to swap any Ink ERC-20 token directly on your site without redirecting them elsewhere.

Installing the Widgets Library

To get started, install the widgets library using npm or Yarn.

npm install --save @superswap-ink/widget

Adding the Widget to Your App

Next, embed the React component in your application.

import { SwapWidget } from '@superswap-ink/widget'
import '@superswap-ink/widget/dist/style.css'

function App() {
  <div>
    <SwapWidget />
  </div>
}

Customizing the Widget

You can set optional parameters to tailor the appearance and functionality of the widget to fit your dApp.

Param	Type	Default
width	number	480
inputToken	string	NATIVE
outputToken	string	undefiend
amount	string	undefiend
darkMode	bool	undefined
slippage	number	0.5
hideBridge	bool	undefined

import { SwapWidget } from '@superswap-ink/widget'
import '@superswap-ink/widget/dist/style.css'

function App() {
  <div>
    <SwapWidget
      width={500}
      inputToken={"NATIVE"}
      outputToken={"0xD642B49d10cc6e1BC1c6945725667c35e0875f22"}
      amount={"100"}
      slippage={10}
      darkMode={true}
    />
  </div>
}

Iframe Integration

Websites that don’t support React can easily integrate the SuperSwap widget using iFrame.

<iframe
  src="https://widget.superswap.ink?inputToken=NATIVE&outputToken=0xD642B49d10cc6e1BC1c6945725667c35e0875f22&amount=100&slippage=10&darkMode=true&hideBridge=true"
  width={480}
  height={600}
  style="
    border: 0;
    margin: 0 auto;
    margin-bottom: .5rem;
    display: block;
    border-radius: 10px;
  "
/>