Integrate Chat Widget V2

Introducing the ChatWidget: a compact yet comprehensive chat experience condensed into widget form , allowing users to initiate conversations with any wallet or group seamlessly.

With its integration into the ChatUIProvider, using the Chat Widget component is as straightforward as any other chat component. Simply wrap it with the ChatUIProvider parent wrapper to leverage its capabilities and provide users with an intuitive and powerful chat experience.

Installation

note

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

npm

npm install @pushprotocol/uiweb

yarn

yarn add @pushprotocol/uiweb

styled-components is a peerDependency. Please install it in your dApp if you don't have it already! Install @pushprotocol/restapi package as well.

npm

npm install styled-components

npm install @pushprotocol/restapi

yarn

yarn add styled-components

yarn add @pushprotocol/restapi

Prerequisites

Make sure your parent component is wrapped within ChatUIProvider. For example —

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

export function App({ Component }) {
  return (
    <ChatUIProvider theme={darkChatTheme}>
      <Component />
    </ChatUIProvider>
  );
}

Usage

Import the SDK package in the component file where you want to render the chat widget component.

react

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

// Push Chat is interoperable and you can receive it on any of the supported platforms
// We recommend https://app.push.org/chat or https://staging.push.org/chat or Push mobile app 
// https://app.push.org/#receive-notifications
 <ChatUIProvider>
   <ChatWidget
  chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d"
/>
  </ChatUIProvider>

Customization parameters

Prop	Type	Default	Remarks
_ chatId_	string	-	recipient's address or chatId
modalTitle	string	'Chat with us!'	Modal header title.
welcomeComponent	React.ReactNode	-	Custom React component that will be displayed if wallet is not connected. This is the welcome screen of the chat widget component.

Note: Parameters in this style are mandatory. Note: Refer ChatUIProvider for details on its paramters.

Advance Usage

You can also customize the chat according to your preference —

react

import React from 'react';
import { ChatWidget, ChatUIProvider  } from '@pushprotocol/uiweb';


  return (
    <ChatUIProvider>
   <ChatWidget
  chatId="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //chatId or recipient's address
   welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black',overflow:'auto',height:'100%',width:'100%'}}>
          <p>Welcome</p>
          </div}
/>
  </ChatUIProvider>
  );

Live Playground

LIVE PREVIEW