react-whatsapp-chat-widget

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

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

For demo

Visit our site to see react-whatsapp-chat-widget live performance

Usage

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. 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

Created by

proficientdesigners.com