⚛️⚡ 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

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

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

License

MIT License © 2024