react-whatsapp-widget

WhatsApp chat widget for your website

What is this?

This is a very simple floating WhatsApp button widget. Due to the impact of covid-19 in 2020, most small businesses had to move to an online presence. One of the wey to improve communication with your customers is using a widget like this.

It adds a floating-like button to your site that calls the WhatsApp Chat API.

It will automatically begin a WhatsApp chat to the number you configure and the text the user writes.

All texts are fully customizable and also you can provide an icon/logo.

Install

npm install --save react-whatsapp-widget

Usage

import React from 'react';
// This is the way to import an SVG file and then pass it as a props
import { ReactComponent as CompanyIcon } from './assets/crown.svg';

import { WhatsAppWidget } from 'react-whatsapp-widget';
import 'react-whatsapp-widget/dist/index.css';

const App = () => {
    return (
        <WhatsAppWidget CompanyIcon={CompanyIcon} phoneNumber="XXXXXXXXXX" />
    );
};

⚠️ Where the phoneNumber is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format.

Example: 541112222222 where 54 is the Argentina internacional code.

Customization

option	value	default	description
phoneNumber	`string`	`''`	WhatsApp intenational number which will receive the message.
CompanyIcon	`Component`	`BiSupport`	Your company SVG icon
companyName	`string`	`'Support'`	Your company name
replyTimeText	`string`	`'Typically replies within a day'`
message	`string`	`'Hello! 👋🏼 \n\nWhat can we do for you?'`	With `\n` you can create a break-line.
sendButtonText	`string`	`'Send'`	Text inside the send button
inputPlaceHolder	`string`	`'Type a message'`	Placeholder text of the message input
open	`boolean`	`false`	If true the chatbox will be open as default

Contributing

After cloning the repository, you have to run the following commands in two different terminal tabs to start the development environment.

cd react-whatsapp-widget
npm install
npm start

cd react-whatsapp-widget/example
npm install
npm start

The first command watches the src/ and recompiles it into the dist/ folder when you make changes.

The second command runs the example app that links to your local package.

🚀 Pull requests are welcome!