Skip to main content

Integrate Push Chat

Streamline Chat Integration for Developers: Say goodbye to the hassles of UI design and API calls. With our web components available in the @pushprotocol/uiweb package, you can effortlessly integrate push chat functionality into your dapp using just a few lines of code.

As an example, take a look at how we seamlessly integrated the Push Chat View component into the push.org/brb website in the image below.

Usage

In order to add the above chatview component the developer just need to write few lines of code

import { ChatView, ChatUIProvider, darkChatTheme } from "@pushprotocol/uiweb";

export function App() {
// you can pass your own signer, if you don't pass a signer
// then it will automatically use the default onboarding kit i.e. blocknative
// !pgpPrivatekey && !account && !isConnected => will give the note
return (
<ChatUIProvider theme={darkChatTheme}>
<ChatView
chatId="b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1"
limit={10}
isConnected={true}
verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
/>
</ChatUIProvider>
);
}
tip

If you're using Next.js to integrate UI Components, we recommend using Next.js 13 with the latest App Router.

Customization Parameters

ChatUIProvider

ParamTypeDefaultRemarks
accountstring-Supports wallet address or chain agnostic wallet address format
pgpPrivatekeystring-Decrypted pgp private key of the user
themeIChatTheme-Theme object, it can be custom theme object, lightChatTheme darkChatTheme
childrenReact.ReactNode-
envEnv-API env - 'prod' or 'staging'
signerSignerType-Ethers or Viem Signer

Note: Parameters in this style are mandatory.

  • Providing only signer in ChatUIProvider automatically fetches account and pgpPrivatekey
  • Providing no signer, automatically uses the default onboarding kit i.e. blocknative
  • Providing account and pgpPrivateKey works as usual
  • Providing no account , signer, pgpPrivateKey or isConnected as false, prompts a warning

ChatView

ParamTypeDefaultRemarks
chatIdstring-Chat id for a particular chat
emojibooleantrueDefault value is true, decides if the input field will have emoji option
gifbooleantrueDefault value is true,decides if the input field will have gif option
filebooleantrueDefault value is true,decides if the input field will have file upload option
isConnectedbooleantrueDefault value is true,shows the connect button if signer, account and pgpPrivateKey is not passed
autoConnectbooleanfalseDefault value is false, decrypts pgpPrivateKey after reload if true, or else disconnects the existing wallet connection
onVerificationFailfunction-Function to perfom any task on gating access verification fail modal
messageInputbooleantrueDefault value is true,decides whether to show the message input field
chatProfilebooleantrueDefault value is true, decides whether to show the chat profile header
chatViewListbooleantrueDefault value is true,decides whether to show the message list
groupInfoModalBackgroundModalBackgroundType-Default value is "OVERLAY", decides the group info modal background, possible values are "OVERLAY" &#124 "BLUR" &#124 "TRANSPARENT"
chatFilterListArray<string>-Array of cid's of messages that needs to be excluded from chatViewList
limitnumber-Number of messages fetched in each paginated api call,default value is 10

Note: Parameters in this style are mandatory.

Live playground

LIVE PREVIEW