Push Support Chat
A React component for integrating Support Chat in DApps.
npm
yarn
npm install @pushprotocol/uiweb
yarn add @pushprotocol/uiweb
Note:styled-componentsis apeerDependency. Please install it in your dApp if you don't have it already!
We'll need the
@pushprotocol/restapi package as well.npm
yarn
npm install styled-components
npm install @pushprotocol/restapi
yarn add styled-components
yarn add @pushprotocol/restapi
When using Frontend
// 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 { Chat } from "@pushprotocol/uiweb";
import { ITheme } from '@pushprotocol/uiweb';
Render the Chat Component as follows
<Chat
account="0x6430C47973FA053fc8F055e7935EC6C2271D5174" //user address
supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address
signer={signer}
env="staging"
/>
Prop | Type | Default | Remarks |
|---|---|---|---|
account* | string | - | user address(sender) |
supportAddress* | string | - | support user's address(receiver) |
signer* | ethers.js signer | - | signer ( used for decrypting chats ) |
greetingMsg | string | 'Hi there!' | first message in chat screen |
theme | ITheme | lightTheme | theme for chat modal (only lightTheme available now) |
modalTitle | string | 'Chat with us!' | Modal header title |
apiKey | string | '' | api key |
env | string | 'prod' | API env: 'prod', 'staging', 'dev' |
Example code for using custom theme
import React from 'react';
import { Chat, 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 (
<Chat
account='0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7'
supportAddress="0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7"
env='staging'
signer={signer}
theme={theme}
/>
);
};
For customizing the Chat theme, here below are the list of variables:
.png?alt=media&token=8643f0ba-8f0c-4c61-a460-0a08d29978c1)
List of all themes variable
How Chat Component will look in your dapp
How Chat Component will look in your dapp
How Chat Component will look in your dapp
During the procedure, you might encounter an error, as can be seen in the image below.
If you run into such an error, try to include the code below in config-overrides.js in the root folder.
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 = [
...config.plugins,
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
]
config.module.rules = [...config.module.rules,
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
return config
}
Last modified 3mo ago