# Integrating the Widget

## Custom Integration Steps

1. Install NPM package "react-wallet-chat"

`yarn add react-wallet-chat` if using **yarn** instead of **npm**

2. On any page you wish to have the chat widget active, import:

`import {`WalletChatProvider, `WalletChatWidget} from 'react-wallet-chat'`

And include in your page source:

`<WalletChatWidget />`

3. Add the WalletChat Widget with connectedWallet parameter to include the address, activeConnector and chainId.\
   PS: in this case the *activeConnector* is from the WAGMI package, and could be substituted as needed to get the wallet name/type.

```tsx
<WalletChatProvider>
    <FunctionalComponent {...pageProps} />

    <WalletChatWidget
      connectedWallet={
          address && activeConnector && chainId
            ? {
            walletName: activeConnector.name,
            account: address,
            chainId: chain.id,
          }
        : undefined
      }
    />
<WalletChatProvider>
```