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

# Install Widget

Install the widget via npm or yarn or pnpm

```
npm i @kanalabs/kana-widget-v2
```

or

```
yarn add @kanalabs/kana-widget-v2
```

or

```
pnpm install @kanalabs/kana-widget-v2
```

### Basic example

Here is an example of a basic app using **Kana Widget**. 

```typescript
import { KanaWidget, WidgetConfig } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
    // Required: The unique SDK key provided by the developer. This key is essential for the widget to function properly.
    // If you haven't received a key yet, please contact the development team to obtain one.
    sdkKey: "Your dApp/company SDK key"
  };

export const WidgetPage = () => {
  return (
    <KanaWidget config={widgetConfig} />
  );
};
```

### Troubleshooting

If you are facing any issue like .

```
// BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.
```

Please add custom webpack settings to \*\*config-overrides.js\*\*. For further details regarding custom webpack settings refer \[[here](https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5)] .