1.0.17 • Published 6 months ago

@misnpm/customizable-whatsapp-button v1.0.17

Weekly downloads
-
License
ISC
Repository
-
Last release
6 months ago

Customizable WhatsApp Button for React Applications

This project provides a highly customizable WhatsApp button component for React applications. It allows developers to easily integrate a WhatsApp contact button with various UI styles and configurations.

The Customizable WhatsApp Button is designed to enhance user engagement by providing a quick and convenient way for visitors to initiate WhatsApp conversations directly from your web application. It offers multiple UI options, including default, rounded, and floating styles, along with customizable positioning and messaging.

Key features of this component include:

  • Multiple pre-designed UI styles
  • Customizable button positioning
  • Configurable phone number and default message
  • Admin route support with an editable modal
  • TypeScript support for improved development experience
  • Storybook integration for easy component testing and showcase

Repository Structure

.
├── package.json
├── rollup.config.js
├── src
│   ├── components
│   │   ├── desings
│   │   │   ├── button
│   │   │   │   └── WhatsAppButton.tsx
│   │   │   └── modal
│   │   │       ├── WhatsAppModal.css
│   │   │       └── WhatsAppModal.tsx
│   │   ├── WhatsAppButtonManager.stories.tsx
│   │   └── WhatsAppButtonManager.tsx
│   ├── utils
│   │   └── defaultProps.ts
│   └── index.tsx
└── tsconfig.json
  • src/: Contains the main source code for the component
    • components/: Houses the React components
      • designs/: Includes specific UI designs for the WhatsApp button
        • button/: Contains the WhatsApp button implementation
        • modal/: Contains the modal component and its styles
    • utils/: Contains utility functions and default props
    • index.tsx: Main entry point for the component
  • rollup.config.js: Configuration for bundling the component
  • tsconfig.json: TypeScript configuration file
  • package.json: Project metadata and dependencies

Usage Instructions

Installation

To install the Customizable WhatsApp Button in your React project, run:

npm install @misnpm/customizable-whatsapp-button

Ensure you have the following peer dependencies installed:

  • React 18.0+
  • React DOM 18.0+
  • @mui/material
  • @emotion/react
  • @emotion/styled

Getting Started

  1. Import the WhatsAppButtonManager component:
import WhatsAppButtonManager from '@misnpm/customizable-whatsapp-button';
  1. Use the component in your React application:
<WhatsAppButtonManager 
  selectUI="default"
  propsUI={{
    phoneNumber: "1234567890",
    message: "Hello! I'm interested in your services.",
    position: { x: 20, y: 20 },
    isAdminRoute: false
  }}
/>

Configuration Options

The WhatsAppButtonManager component accepts two main props:

  • selectUI: Determines the button style ("default", "rounded", or "floating")
  • propsUI: An object containing the following properties:
    • phoneNumber: The WhatsApp number to contact (required)
    • message: The default message to send (optional)
    • position: Button position as coordinates ({ x: number, y: number })
    • isAdminRoute: Boolean to enable/disable the admin modal (optional)

Examples

  1. Default button with custom message:
<WhatsAppButtonManager 
  selectUI="default"
  propsUI={{
    phoneNumber: "987654321",
    message: "Hi! How can you help me?",
    isAdminRoute: true
  }}
/>
  1. Rounded button with custom position:
<WhatsAppButtonManager 
  selectUI="rounded"
  propsUI={{
    phoneNumber: "555666777",
    position: { x: 30, y: 30 }
  }}
/>
  1. Floating button:
<WhatsAppButtonManager 
  selectUI="floating"
  propsUI={{
    phoneNumber: "111222333",
    message: "Contact me via WhatsApp",
    position: { x: 20, y: 20 }
  }}
/>

Testing & Quality

To run the Storybook development server and view component examples:

npm run storybook

This will launch a local Storybook instance where you can interact with different configurations of the WhatsApp button.

Troubleshooting

If you encounter issues with the component not rendering:

  1. Ensure all peer dependencies (React and React DOM) are correctly installed.
  2. Check that the phoneNumber prop is provided and is a valid string.
  3. Verify that the selectUI prop is one of the allowed values: "default", "rounded", or "floating".

If the button appears but doesn't function:

  1. Confirm that the phoneNumber is a valid WhatsApp number.
  2. Check your browser's console for any error messages.
  3. Ensure that pop-ups are not blocked if the button is not opening WhatsApp in a new tab.

For any other issues, please refer to the project's GitHub repository for the latest updates and known issues.

Data Flow

The WhatsApp Button component follows a simple data flow:

  1. The WhatsAppButtonManager receives configuration props from the parent component.
  2. Based on the selectUI prop, it renders the appropriate button style.
  3. When clicked, the button either: a. Opens a WhatsApp chat with the specified number and message (non-admin route) b. Opens a modal for editing the phone number and message (admin route)
  4. In admin mode, changes made in the modal are logged to the console (integration with backend systems would be implemented here in a real-world scenario)
[Parent Component] -> [WhatsAppButtonManager] -> [WhatsAppButton]
                                              -> [WhatsAppModal] (if admin route)

Note: The actual implementation of saving changes in admin mode is not included in this component and would need to be handled by the consuming application.

1.0.17

6 months ago

1.0.16

6 months ago

1.0.15

7 months ago

1.0.14

7 months ago

1.0.13

8 months ago

1.0.12

8 months ago

1.0.11

8 months ago

1.0.10

8 months ago

1.0.9

8 months ago

1.0.8

8 months ago

1.0.7

8 months ago

1.0.6

8 months ago

1.0.5

8 months ago

1.0.4

8 months ago

1.0.3

8 months ago

1.0.2

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago