React WhatsApp Floating Button TypeScript Component

Overview

The React WhatsApp Floating Button is a customizable React component designed to provide an interactive floating chat button. It features a pop-up chat interface with dynamic messages, customizable appearance, and a list of contacts that can be expanded using an accordion.

Key Features

• Customizable button text, icons, and colors
• Dynamic typewriter effect for chat messages
• Expandable contact list with an accordion
• Configurable button size and position

Installation

To use the React WhatsApp Floating Button, ensure you have the following peer dependencies installed:

yarn add react react-dom

Then, install the component:

yarn add react-whatsapp-button-floating

Usage

Basic Setup

Here’s an example of how to use the React WhatsApp Floating Button in a Vite React project:

import React from "react";
import WhatsappFloatingButton from "react-whatsapp-button-floating";
import SendIcon from "@mui/icons-material/Send";
import WhatsappIcon from "@/assets/icon/whatsapp.svg";

const dataList = [
    {
        label: 'Customer Service',
        contact: [
            { name: 'Aldera Bin Riza', number: '08123456789' },
            { name: 'Ayub Bin Faz', number: '08123456789' }
        ]
    },
    {
        label: 'Product Manager',
        contact: [
            { name: 'Kai bin Faz', number: '08123456789' },
            { name: 'Ayub Bin Faz', number: '08123456789' }
        ]
    },
    {
        label: 'Product Support',
        contact: [
            { name: 'Kai bin Faz', number: '08123456789' },
            { name: 'Ayub Bin Faz', number: '08123456789' }
        ]
    }
];

const text = ['Hi there 👋', 'How can we help you?'];

export const ExampleView = () => {
    return (
        <div>
            <WhatsappFloatingButton
                buttonText="Help"
                textsChat={text}
                speedTyping={100}
                sendIcon={<SendIcon alt="Send" className="w-4 h-4 hover:opacity-80"/>}
                buttonIcon={<WhatsappIcon alt="WhatsApp" className="w-full h-full hover:opacity-80"/>}
                buttonPosition={{ bottom: 24, right: 24 }}
                paperBorderRadius="8px"
                paperBackgroundColor="#f9f9f9"
                buttonBackgroundColor="#0E5BF0"
                buttonColor="#f9f9f9"
                dataList={dataList}
            />
        </div>
    );
}

Props

The WhatsappFloatingButton component accepts the following props:

Example Breakdown

1. buttonText: If no buttonIcon is provided, this text is shown in the button. The default is "Chat".

2. buttonIcon: If you prefer to use an icon, pass it as a ReactNode. This overrides buttonText.

3. sendIcon: You can add an icon next to each contact in the accordion list using this prop.

4. buttonPosition: Define the position of the button relative to the screen’s bottom and right edges. By default, it's positioned 16 pixels from both edges.

5. paperBackgroundColor & paperBorderRadius: Customize the appearance of the chat interface, including its background color and border radius.

6. buttonBackgroundColor, buttonColor, and buttonSize: These props allow you to customize the button's background color, text color, and size.

7. dataList: This is an array of objects, each containing a label and a contact array. The contacts are displayed in an accordion format, allowing users to expand and view contact information.

8. textsChat: An array of strings that are displayed sequentially in the chat window using a typewriter effect. Customize the messages to suit your needs.

9. speedTyping: Adjust the typing speed of the typewriter effect. The default is set to 100ms per character.

10. title: Sets the title of the chat interface.

Additional Customization

Styling

The WhatsappFloatingButton component uses inline styles to provide basic customization options. However, if you need more extensive customization, you can override these styles with custom CSS or extend the component.

Accordion Component

The Accordion component used within WhatsappFloatingButton is designed to display contact lists. It receives the following props:

• bgColor: Background color of the accordion header.
• textColor: Text color of the accordion header.
• dataList: The same dataList prop passed to WhatsappFloatingButton containing labels and contacts.
• sendIcon: The icon displayed next to each contact.

Typewriter Component

The Typewriter component handles the dynamic display of text within the chat interface. It takes in the following props:

• text: The string to display.
• onComplete: A callback function triggered after the typing animation is complete.
• speed: The typing speed (ms per character).

Conclusion

The React WhatsApp Floating Button is a versatile and highly customizable tool for integrating a floating chat button into your React applications. It can be styled and configured to meet various design needs and provides a dynamic user experience with its typewriter effect and expandable contact list. Use it to enhance your website’s interactivity and improve customer engagement.