1.0.5 ā¢ Published 4 years ago
react-whatsapp-widget-pro v1.0.5
react-whatsapp-widget-pro
Describe react-whatsapp-widget-pro here.
This is a Whatsapp Chat Widget where you can use like a professional chat plugin in your react project with full customization of your own.
Getting Started
npm install react-whatsapp-widget-pro
# or
yarn add react-whatsapp-widget-proUsage
import React from "react";
import WhatsAppWidget from "react-whatsapp-widget-pro";
const ReactApp = () => {
return (
<WhatsAppWidget
phoneNo="+123 12345 00000"
position="right"
iconSize="40"
iconColor="white"
iconBgColor="tomato"
headerIcon="https://proficientdesigners.in/wp-content/themes/pd/img/logo-new.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"
btnBgColor="yellow"
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. which will receive the message. |
| position | string | 'right' | Position the widget to left bottom or right bottom (Enum 'left', 'right') |
| 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 |
| btnBgColor | string | 'rgb(79, 206, 93)' | Start chat button background color |
| btnTxtColor | string | 'rgb(255, 255, 255)' | Start chat button text color |
License
MIT