WhatsApp chat widget for your website

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.

npm install --save react-whatsapp-widget

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.

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!

MIT © ann0nip