Skip to main content

Integrate Support Bot

Wallets are your protocol's users as they interact with your protocol. Support bot component enables any wallet to start chatting with you about any issues they are facing with your protocol without the hassle of providing extra information or doxxing their identities.

With our support chat component available in @pushprotocol/uiweb package, wallet address are first-class citizens and your protocol user only needs to connect their wallet to start solving their queries.

Support chat component using Push Chat protocol



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

npm install @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 install styled-components

npm install @pushprotocol/restapi


Make sure you know how to derive the signer as you will need to pass it as a parameter in the component. For example —

// any other web3 ui lib is also acceptable
import { useWeb3React } from "@web3-react/core";
const { account, library, chainId } = useWeb3React();
const signer = library.getSigner(account);


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

import { SupportChat } from "@pushprotocol/uiweb";
import { ITheme } from '@pushprotocol/uiweb';

// Push Chat is interoperable and you can receive it on any of the supported platforms
// We recommend or or Push mobile app
supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address, this belongs to you
env="staging" // can be "prod" or "staging"

Customization parameters

accountstring-user address(sender)
supportAddress*string-support user's address(receiver)
signer*ethers.js signer-signer (used for decrypting chats)
greetingMsgstring'Hi there!'first message in chat screen
themeIThemelightThemetheme for chat modal (only lightTheme available now)
modalTitlestring'Chat with us!'Modal header title
envstring'prod'API env: 'prod', 'staging', 'dev'

Note: Parameters in this style are mandatory.

Advance Usage

You can also customize the chat according to your preference —

import React from 'react';
import { SupportChat, ITheme } from '@pushprotocol/uiweb';

export const ChatSupportTest = () => {
const theme: ITheme = {
bgColorPrimary: 'gray',
bgColorSecondary: 'purple',
textColorPrimary: 'white',
textColorSecondary: 'green',
btnColorPrimary: 'red',
btnColorSecondary: 'purple',
border: '1px solid black',
borderRadius: '40px',
moduleColor: 'pink',
return (
return (

Below is the reference sheet for what theme variables affect what portion of the UI 👇 Support chat component customization cheatsheet


During the procedure, you might encounter an error, as can be seen in the image below.

Support chat component installation might encounter these type of errors

These are caused because of webpack 5 and crypto library issues and requires polyfilling. If you run into such an error, try to include the code below in config-overrides.js in the root folder and switching to react-app-rewired to solve the issue.

const webpack = require("webpack");

module.exports = function override(config, env) {
// do stuff with the webpack config...
config.resolve.fallback = {
assert: require.resolve("assert"),
buffer: require.resolve("buffer"),
child_process: false,
constants: require.resolve("constants-browserify"),
crypto: require.resolve("crypto-browserify"),
fs: false,
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
path: require.resolve("path-browserify"),
url: require.resolve("url"),
util: require.resolve("util/"),
stream: require.resolve("stream-browserify"),
config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"];
config.plugins = [
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
config.module.rules = [
test: /\.m?js/,
resolve: {
fullySpecified: false,

return config;

Live Playground