⚛️⚡ WhatsApp Floating Button Component for React

Description

This React component offers an elegant WhatsApp floating button, serving as a bridge to the official WhatsApp application. It simulates a WhatsApp chat interface, allowing users to initiate conversations directly from your website. Upon clicking "submit," users are redirected to WhatsApp with their message pre-filled, ready to continue the conversation. Ideal for enhancing customer support and engagement, this component simplifies the transition from web inquiries to WhatsApp communication using WhatsApp's API.

Screenshots

The WhatsApp Floating Button Component supports both light and dark modes, ensuring it can integrate seamlessly with your application's theme. Below are the mockups for each mode:

Light Mode	Dark Mode

Toggle between the modes to provide a consistent user experience regardless of your app's theme.

Installation

Install the component using your preferred package manager:

npm

npm install @carlos8a/react-whatsapp-floating-button

pnpm

pnpm install @carlos8a/react-whatsapp-floating-button

Yarn

yarn add @carlos8a/react-whatsapp-floating-button

Usage Example

Below is a basic example demonstrating how to integrate the WhatsApp floating button into your app:

import { FloatingWhatsApp } from '@carlos8a/react-whatsapp-floating-button';

const App = () => {
  return (
    <div>
      <FloatingWhatsApp
        phoneNumber='5215540000000' // Required
        accountName='Carlos Ochoa' // Optional
        avatar='/images/avatar.webp' // Optional
        initialMessageByServer='Hi there! How can I assist you?' // Optional
        initialMessageByClient='Hello! I found your contact on your website. I would like to chat with you about...' // Optional
        statusMessage='Available' // Optional
        startChatText='Start chat with us' // Optional
        tooltipText='Need help? Click to chat!' // Optional
        allowEsc={true} // Optional
        // Explore all available props below
      />
    </div>
  );
};

export default App;

Available Props

Prop	Type	Required	Description	Default
`phoneNumber`	String	Yes	Phone number in international format	`5215540000000`
`accountName`	String	No	Account username	`Account Name`
`onClick`	Function	No	Callback fired on click	`-`
`onSubmit`	Function	No	Callback fired on submit with the event passed	`-`
`onClose`	Function	No	Callback fired on close	`-`
`onLoopDone`	Function	No	Callback called when notification loop is done	`-`
`onNotification`	Function	No	Callback fired when a notification is triggered	`-`
`avatar`	String	No	Path to change user avatar using static assets	`UI Face`
`statusMessage`	String	No	Text displayed below the account username	`Typically replies within 1 hour`
`initialMessageByServer`	String	No	First message visitors receive	`Hello there! How can we help?`
`initialMessageByClient`	String	No	Message that the user will send to your WhatsApp	`Hello!, I got your contact from your website. I would like to chat with you about...`
`startChatText`	String	No	Text displayed inside the "Start Chat" button	`Start chat with us`
`tooltipText`	String \| `null`	No	Text that will appear in the tooltip, adjacent to the WhatsApp button	`null`
`messageDelay`	Number	No	Delay before displaying `initialMessageByServer` (seconds)	`2`
`notification`	Boolean	No	Enables notifications (disabled after user opens the chat box)	`false`
`notificationDelay`	Number	No	Delay between notifications (seconds)	`60`
`notificationLoop`	Number	No	Number of times notifications loop	`0`
`notificationStyle`	CSSProperties	No	Inline style for notification	`{}`
`notificationClassName`	String	No	CSS class for notification indicator	`floating-whatsapp-notification`
`allowClickAway`	Boolean	No	Allows chat box to close when clicking outside	`false`
`allowEsc`	Boolean	No	Allows chat box to close when pressing `Escape` key	`false`
`darkMode`	Boolean	No	Enables dark style	`false`
`className`	String	No	CSS class for the main wrapping `Div`	`floating-whatsapp`
`buttonClassName`	String	No	CSS class for the button	`floating-whatsapp-button`
`style`	CSSProperties	No	Inline style for the main wrapping `Div`	`{}`
`buttonStyle`	CSSProperties	No	Inline style for the button	`{}`
`chatboxHeight`	Number	No	Chat box height	`320`
`chatboxClassName`	String	No	CSS class for the chat box	`floating-whatsapp-chatbox`
`chatboxStyle`	CSSProperties	No	Inline style for the chat box	`{}`

Development and Testing Files

The following files are intended solely for development and testing purposes and do not form part of the component's distribution:

<root>/index.html (used to test the component)
<root>/src/**/* (excluding <root>/src/lib/**/* which is the component)
<root>/public/ (used to test the component)
<root>/preparePublish.js (prepares the component for npm publishing)

Building and Testing the Package

Note: For anyone that just want to get and use the component, the Installation and Usage Example sections have got all you need 👍🏻.

This section is for developers who want to modify the component. Follow the steps outlined below to rebuild and test your changes locally.

Prerequisites

Make sure you have Node.js (version 18 or higher) installed on your system. This project employs pnpm for efficient dependency management. If you don't have pnpm, install it with the following command:

npm install -g pnpm

Setting Up the Development Environment

Clone the Repository: Get a copy of the project onto your local machine by cloning the GitHub repository.

git clone https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git
cd react-whatsapp-floating-button

Install Dependencies: Use pnpm to install all the necessary dependencies. This ensures your environment is equipped with everything needed for building and testing the component.
```
pnpm install
```

Running a Local Development Server

You will be able to modify and see real-time changes due we are using Vite to dev and deploy.

You can run:

pnpm run dev

Now you will be able to start enhancing or customizing this beautiful but always improveable component 😁.

Rebuilding the Library

Execute the following command to build the library:

pnpm run build:lib

This script performs a series of tasks:

Clears the dist directory for a clean build.
Adjusts TypeScript configurations for the build.
Compiles the library using Vite into the dist folder, which will contain the production-ready code.
Resets TypeScript configurations after the build.

That's it. Now you can take a look at the dist directory where you'll find the bundled code.

Acknowledgements

Special thanks to @awran5 for the react-floating-whatsapp component, which served as a base for this enhanced version.
Gratitude to @darwinva97 for the PR contributing improvements in accessibility and SEO through aria-hidden attribute modifications.