# Getting Started with the 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 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>
}
```