@misnpm/customizable-whatsapp-button v1.0.17
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 componentcomponents/
: Houses the React componentsdesigns/
: Includes specific UI designs for the WhatsApp buttonbutton/
: Contains the WhatsApp button implementationmodal/
: Contains the modal component and its styles
utils/
: Contains utility functions and default propsindex.tsx
: Main entry point for the component
rollup.config.js
: Configuration for bundling the componenttsconfig.json
: TypeScript configuration filepackage.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
- Import the WhatsAppButtonManager component:
import WhatsAppButtonManager from '@misnpm/customizable-whatsapp-button';
- 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
- Default button with custom message:
<WhatsAppButtonManager
selectUI="default"
propsUI={{
phoneNumber: "987654321",
message: "Hi! How can you help me?",
isAdminRoute: true
}}
/>
- Rounded button with custom position:
<WhatsAppButtonManager
selectUI="rounded"
propsUI={{
phoneNumber: "555666777",
position: { x: 30, y: 30 }
}}
/>
- 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:
- Ensure all peer dependencies (React and React DOM) are correctly installed.
- Check that the
phoneNumber
prop is provided and is a valid string. - Verify that the
selectUI
prop is one of the allowed values: "default", "rounded", or "floating".
If the button appears but doesn't function:
- Confirm that the
phoneNumber
is a valid WhatsApp number. - Check your browser's console for any error messages.
- 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:
- The
WhatsAppButtonManager
receives configuration props from the parent component. - Based on the
selectUI
prop, it renders the appropriate button style. - 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)
- 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.
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago