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:

| Prop Name | Type | Default Value | Description | |--------------------------|-------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------| | buttonText | string | 'Chat' | The text displayed inside the floating button if no buttonIcon is provided. | | buttonIcon | ReactNode | null | A React node (e.g., an icon) to display inside the button. If provided, it will override the buttonText. | | sendIcon | ReactNode | null | A React node (e.g., an icon) to display next to each contact option in the accordion list. | | buttonPosition | { bottom: number; right: number; } | { bottom: 16, right: 16 } | Position of the button on the screen (distance from the bottom and right edges). | | paperBackgroundColor | string | '#ffffff' | Background color of the chat interface (pop-up window). | | buttonBackgroundColor | string | '#0E5BF0' | Background color of the floating button. | | buttonColor | string | '#0E5BF0' | Text color of the floating button. | | paperBorderRadius | string | '12px' | Border radius of the chat interface (pop-up window). | | buttonSize | number | 56 | Diameter of the floating button (in pixels). | | dataList | DataInterface[] | [] | Array of data objects for the accordion, where each object contains a label and a list of contacts. | | textsChat | string[] | ["How we can help you?", "Give me a question"] | Array of strings to display as typewriter messages in the chat. | | speedTyping | number | 100 | Typing speed for the typewriter effect (in milliseconds per character). | | title | string | 'Chat with us' | Title displayed at the top of the chat interface (pop-up window). |

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.