> For the complete documentation index, see [llms.txt](https://dexhunter.gitbook.io/dexhunter-partners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dexhunter.gitbook.io/dexhunter-partners/partners/widget-integration.md).

# Widget Integration

The easiest way to add DexHunter swaps to your app.

{% hint style="info" %}
**NPM:** [@dexhunterio/swaps](https://www.npmjs.com/package/@dexhunterio/swaps)
{% endhint %}

***

## Get Your Credentials

Before integrating, you need a `partnerName` and `partnerCode`:

1. Go to [app.dexhunter.io/partners](https://app.dexhunter.io/partners)
2. Connect your Cardano wallet
3. Enter your company name and fee percentage
4. Click **Create Partner**
5. Go to the **Dashboard** tab to find your credentials

{% hint style="warning" %}
Keep your `partnerCode` secret — it's used to authenticate your integration and track your revenue share.
{% endhint %}

***

## Quick Start

### Installation

```bash
npm i @dexhunterio/swaps
```

### Basic React Example

```jsx
import Swap from '@dexhunterio/swaps';
import '@dexhunterio/swaps/lib/assets/style.css';

function App() {
  return (
    <Swap
      partnerName="DHBLOG"
      partnerCode="dhblog616464723171396c3568303479647973686b30676c64796e756a706c737a7a716c6d6d63327474636676376a717966706d66787664796c797467717173327837666e657779706a6a786b386b386467377777326a38613864747035306477726d7171717370786dda39a3ee5e6b4b0d3255bfef95601890afd80709"
    />
  );
}
```

### Basic Iframe Example

```html
<iframe
  src="https://swap.dexhunter.io?partnerName=DHBLOG&partnerCode=dhblog616464723171396c3568303479647973686b30676c64796e756a706c737a7a716c6d6d63327474636676376a717966706d66787664796c797467717173327837666e657779706a6a786b386b386467377777326a38613864747035306477726d7171717370786dda39a3ee5e6b4b0d3255bfef95601890afd80709"
  width="450"
  height="900"
  frameborder="0"
  style="border: none; border-radius: 12px;"
  allow="clipboard-read; clipboard-write"
  title="DexHunter Swap Widget"
></iframe>
```

***

## Integration Options

| Method              | Best For                          | Documentation                                                                               |
| ------------------- | --------------------------------- | ------------------------------------------------------------------------------------------- |
| **React Component** | React/Next.js apps                | [React Integration](/dexhunter-partners/partners/widget-integration/react-integration.md)   |
| **Iframe**          | Any HTML page, no JS dependencies | [Iframe Integration](/dexhunter-partners/partners/widget-integration/iframe-integration.md) |

***

## Version Compatibility

| React Version | Package Version |
| ------------- | --------------- |
| React 19+     | 198+            |
| React 18-     | 198+            |

{% hint style="info" %}
**Version 0.0.198+** introduces enhanced features:

* **Iframe Integration**: Embed swap widget without JavaScript dependencies
* **Price Chart**: Display real-time price charts via iframe `showChart` parameter
* **Orders Table**: Show token pair order book via iframe `showOrders` parameter
* **Dual Token Selection**: Set both `defaultTokenIn` and `defaultTokenOut` URL parameters for precise token pair initialization
  {% endhint %}

***

## Documentation

* [**React Integration**](/dexhunter-partners/partners/widget-integration/react-integration.md) - React, Next.js, and Vanilla JS setup
* [**Iframe Integration**](/dexhunter-partners/partners/widget-integration/iframe-integration.md) - Embed via iframe with charts and orders
* [**Props Reference**](/dexhunter-partners/partners/widget-integration/props-reference.md) - Complete API documentation
* [**Advanced Features**](/dexhunter-partners/partners/widget-integration/advanced-features.md) - Customization, callbacks, and more

***

## Supported Wallets

`nami` · `eternl` · `lace` · `vespr` · `flint` · `gerowallet` · `typhoncip30` · `nufi` · `begin` · `yoroi`