# Chat With Owner

## Chat With Owner

To implement a "Chat With Owner" type feature as demonstrated at [nft.walletchat.fun](https://nft.walletchat.fun) :

1. Ensure your NPM package is up to date `yarn upgrade react-wallet-chat`
2. Import the ChatWithOwner button:

```tsx
import { ChatWithOwner } from 'react-wallet-chat'
```

3. The owner address is the message recipient, and is set via the *ownerAddress* parameter.  Here is a code snipped to render a Chat WIth Owner button and the underlying functionality:

<pre class="language-tsx"><code class="lang-tsx">{<a data-footnote-ref href="#user-content-fn-1">token?.owner</a> &#x26;&#x26; (
  &#x3C;ChatWithOwner
    ownerAddress=<a data-footnote-ref href="#user-content-fn-1">{token?.owner}</a>
    render={&#x3C;Button css={buttonCss} color="gray3" />}
  />
)}
</code></pre>

4. Add the following to the main App code, in this case the *activeConnector* is from the WAGMI package, and could be substituted as needed to get the wallet name/type.

<pre class="language-tsx"><code class="lang-tsx">&#x3C;WalletChatProvider>
  <a data-footnote-ref href="#user-content-fn-2">&#x3C;FunctionalComponent {...pageProps} /></a>

  &#x3C;WalletChatWidget
    connectedWallet={
      address &#x26;&#x26; activeConnector &#x26;&#x26; chainId
        ? {
            walletName: activeConnector.name,
            account: address,
            chainId: chain.id,
          }
        : undefined
    }
  />
&#x3C;/WalletChatProvider>
</code></pre>

[^1]: *token?.owner* can be replaced with the owner object and address of the integrating site

[^2]: