Simple WhatsApp Widget is a lightweight and easy-to-use React component that allows you to add a WhatsApp chat widget to your web application.
Live Preview
You can install the package using npm:
npm install simple-whatsapp-widget
or using yarn:
yarn add simple-whatsapp-widget
import React from "react";
import WhatsAppWidget from 'simple-whatsapp-widget';
import 'simple-whatsapp-widget/dist/styles.css'
export default function Home() {
return <main>
<WhatsAppWidget/>
</main>;
}
Simply import the WhatsAppWidget component and place it in your React component where you want the WhatsApp chat widget to appear.
The WhatsAppWidget component accepts several optional props to customize its appearance and behavior. Here are the available props:
phoneNumber: Specify the phone number to which the WhatsApp messages should be sent.
autoOpen: Set it to true to automatically open the WhatsApp chat widget when the component is mounted.
message: Provide a pre-defined message that will be included in the initial WhatsApp message.
className: Add custom CSS classes to the WhatsApp chat widget container.
Example usage with props:
<WhatsAppWidget
phoneNumber="your_whatsapp_number"
autoOpen={true}
message="Hello, I have a question about your product."
className="my-custom-widget"
/>
Feel free to modify and style the widget according to your application's needs.
This package is licensed under the MIT License. See the LICENSE file for details.
Contributions are welcome! If you have any bug reports, feature requests, or suggestions, please open an issue on the GitHub repository.
If you would like to contribute code, please follow the guidelines in the CONTRIBUTING file.
Nihara Mayurawasal
GitHub: nihara96.