Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ann0nip/react-whatsapp-widget
WhatsApp chat widget for your website
https://github.com/ann0nip/react-whatsapp-widget
chat hacktoberfest hacktoberfest2022 npm-module npm-package react reactjs whatsapp widget
Last synced: about 1 month ago
JSON representation
WhatsApp chat widget for your website
- Host: GitHub
- URL: https://github.com/ann0nip/react-whatsapp-widget
- Owner: ann0nip
- Created: 2020-10-29T05:17:13.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-28T09:24:01.000Z (about 1 year ago)
- Last Synced: 2024-09-30T07:25:17.876Z (about 2 months ago)
- Topics: chat, hacktoberfest, hacktoberfest2022, npm-module, npm-package, react, reactjs, whatsapp, widget
- Language: JavaScript
- Homepage: https://react-whatsapp-widget-4d84a1.netlify.app
- Size: 2.04 MB
- Stars: 43
- Watchers: 1
- Forks: 35
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-whatsapp-widget
> WhatsApp chat widget for your website
[](https://www.npmjs.com/package/react-whatsapp-widget) [](https://standardjs.com)
## What is this?
This is a very simple floating WhatsApp button widget. Due to the impact of covid-19 in 2020, most small businesses had to move to an online presence. One of the wey to improve communication with your customers is using a widget like this.
It adds a floating-like button to your site that calls the WhatsApp Chat API.
It will automatically begin a WhatsApp chat to the number you configure and the text the user writes.
All texts are fully customizable and also you can provide an icon/logo.
## Install
```bash
npm install --save react-whatsapp-widget
```
## Usage
```jsx
import React from 'react';
// This is the way to import an SVG file and then pass it as a props
import { ReactComponent as CompanyIcon } from './assets/crown.svg';
import { WhatsAppWidget } from 'react-whatsapp-widget';
import 'react-whatsapp-widget/dist/index.css';
const App = () => {
return (
);
};
```
⚠️ Where the `phoneNumber` is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format.
Example: `541112222222` where 54 is the Argentina internacional code.
## Customization
| option | value | default | description |
| ------------- | ----------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| phoneNumber | `string` | `''` | WhatsApp [intenational number](https://faq.whatsapp.com/en/general/21016748) which will receive the message. |
| CompanyIcon | `Component` | `BiSupport` | Your company SVG icon |
| companyName | `string` | `'Support'` | Your company name |
| replyTimeText | `string` | `'Typically replies within a day'` |
| message | `string` | `'Hello! 👋🏼 \n\nWhat can we do for you?'` | With `\n` you can create a break-line. |
| sendButtonText | `string` | `'Send'` | Text inside the send button
| inputPlaceHolder | `string` | `'Type a message'` | Placeholder text of the message input |
| open | `boolean` | `false` | If **true** the chatbox will be open as default |
## Contributing
After cloning the repository, you have to run the following commands in two different terminal tabs to start the development environment.
```
cd react-whatsapp-widget
npm install
npm start
```
```
cd react-whatsapp-widget/example
npm install
npm start
```
The first command watches the src/ and recompiles it into the dist/ folder when you make changes.
The second command runs the example app that links to your local package.
🚀 **Pull requests are welcome!**
## License
MIT © [ann0nip](https://github.com/ann0nip)