react-whatsapp-chat-widget
Version:
WhatsApp chat widget for react app
105 lines (84 loc) ā¢ 9.05 kB
Markdown
## react-whatsapp-chat-widget
[](https://www.npmjs.com/package/react-whatsapp-chat-widget) [](https://github.com/proficientdesigners/react-whatsapp-chat-widget/blob/master/LICENSE)
> This is a Whatsapp Chat Widget for react where you can use as a plugin in your react project with full customization of your own.
### Getting Started
```bash
npm install react-whatsapp-chat-widget
# or
yarn add react-whatsapp-chat-widget
```
> ā ļø If you get "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6, then your app must be SSR enabled like in NextJS. To resolve the issue in nextJS visit [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)
### For demo
Visit our [site](https://www.proficientdesigners.com/ "Proficient Designers") to see react-whatsapp-chat-widget live performance
### Usage
```jsx
import React from "react";
import WhatsAppWidget from "react-whatsapp-chat-widget";
import "react-whatsapp-chat-widget/index.css";
const ReactApp = () => {
return (
<WhatsAppWidget
phoneNo="919884098840"
position="right"
widgetWidth="300px"
widgetWidthMobile="260px"
autoOpen={true}
autoOpenTimer={5000}
messageBox={true}
messageBoxTxt="Hi Team, is there any related service available ?"
iconSize="40"
iconColor="white"
iconBgColor="tomato"
headerIcon="https://www.pdapps.net.in/_next/static/media/android-chrome-192x192.9a39c2c7.png"
headerIconColor="pink"
headerTxtColor="black"
headerBgColor="tomato"
headerTitle="John Doe"
headerCaption="Online"
bodyBgColor="#bbb"
chatPersonName="Support"
chatMessage={<>Hi there š <br /><br /> How can I help you?</>}
footerBgColor="#999"
placeholder="Type a message.."
btnBgColor="yellow"
btnTxt="Start Chat"
btnTxtColor="black"
/>
);
};
export default ReactApp;
```
ā ļø The `phoneNo` is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format.
Example: `919884098840` where 91 is the International code for India.
| Property | Type | Default | Description |
| ----------------- | ---------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| phoneNo | `string` | `''` | WhatsApp [international no.](https://faq.whatsapp.com/general/contacts/how-to-add-an-international-phone-number) which will receive the message. |
| position | `string` | `'right'` | Position the widget to left bottom or right bottom (Enum `'left', 'right'`) |
| widgetWidth | `string` | `'300px'` | Width of the entire widget for devices more than `'360px'` width |
| widgetWidthMobile | `string` | `'260px'` | Width of the entire widget for devices less than `'360px'` width like mobile devices |
| autoOpen | `boolean` | `'false'` | Open the chat box automatically |
| autoOpenTimer | `string, number` | `3000` in milliseconds | Set timer to open the chat box automatically |
| messageBox | `boolean` | `false` | Message box is hidden by default, so you can enable it if needed |
| messageBoxTxt | `string` | `''` | If Message box is enabled, you can put the default text for the user to start up with the conversation |
| iconSize | `string` | `'52'` | Fix the size of the chat icon |
| iconColor | `string` | `'rgb(37, 211, 102)'` | Chat icon color (`HexCode, RGB` format) |
| iconBgColor | `string` | `'#ffffff'` | Chat icon background color (`HexCode, RGB` format) |
| headerIcon | `string` | `reactNode` svg icon | Profile icon in the header as a profile image or use the default svg icon (`image uri` see the example above) |
| headerIconColor | `string` | `'rgb(100, 100, 100)'` | Profile icon color in the header `(this works only when default svg icon is used)` |
| headerTxtColor | `string` | `'rgb(255, 255, 255)'` | Header text color |
| headerBgColor | `string` | `'rgb(7, 94, 84)'` | Header background color |
| headerTitle | `string` | `'Customer Support'` | Header title |
| headerCaption | `string` | `Online` | Header caption |
| bodyBgColor | `string` | `'rgb(227, 220, 213)'` | Chat body background color |
| chatPersonName | `string` | `'Support'` | Person name in the chat bubble |
| chatMessage | `reactNode` | `<>Hi there š <br /><br /> How can I help you?</>` | Message text in the chat bubble |
| footerBgColor | `string` | `'rgb(255, 255, 255)'` | Footer background color |
| placeholder | `string` | `Type a message..` | Placeholder for text input |
| btnBgColor | `string` | `'rgb(79, 206, 93)'` | Start chat button background color |
| btnTxt | `string` | `'rgb(255, 255, 255)'` | Start chat button text |
| btnTxtColor | `string` | `'rgb(255, 255, 255)'` | Start chat button text color |
### License
[MIT](https://github.com/proficientdesigners/react-whatsapp-chat-widget/blob/master/LICENSE)
### Created by
[proficientdesigners.com](https://proficientdesigners.com/)