Widget

This guide walks you through the steps to embed the swap widget in your website in 2 minutes — whether your site is already a decentralized application (dApp) or not.

With the swap widget, your users can swap your token or any ink ERC-20 tokens on the Superswap without leaving your site!

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>
}