# 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.

<figure><img src="https://287186932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOnZoo8LyfjXxQc4UlIK1%2Fuploads%2FsyCT77g9iONkGI173jUh%2Fimage.png?alt=media&#x26;token=0a5ae8a1-c5d1-4cdc-a9e4-185b92595b35" alt=""><figcaption></figcaption></figure>

### Installing the Widgets Library

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

```bash
npm install --save @superswap-ink/widget
```

### Adding the Widget to Your App

Next, embed the React component in your application.

```tsx
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 |

```tsx
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.

```html
<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;
  "
/>
```
