# react-whatsapp-widget > WhatsApp chat widget for your website Latest version **2.2.0** (published 2023-03-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-whatsapp-widget pnpm add react-whatsapp-widget yarn add react-whatsapp-widget bun add react-whatsapp-widget ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.2.0 | | Published | 2023-03-06 | | First published | 2020-10-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 4 | | Unpacked size | 44.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 51 | | Author | ann0nip | | Maintainers | ann0nip | | Keywords | whatsapp, widget, react-module | ## Links - npm: https://www.npmjs.com/package/react-whatsapp-widget - Repository: https://github.com/ann0nip/react-whatsapp-widget - Homepage: https://github.com/ann0nip/react-whatsapp-widget#readme - Issues: https://github.com/ann0nip/react-whatsapp-widget/issues - npm.io page: https://npm.io/package/react-whatsapp-widget ## Dependencies (4) - [react-icons](https://npm.io/package/react-icons.md) ^4.4.0 - [postcss-normalize](https://npm.io/package/postcss-normalize.md) ^10.0.1 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^8.0.1 - [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^5.0.2 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 2.2.0 (latest) — 2023-03-06 - 2.1.1 — 2023-03-06 - 2.1.0 — 2022-07-27 - 2.0.0 — 2022-07-06 - 1.3.1 — 2022-03-21 - 1.3.0 — 2021-03-12 - 1.2.1 — 2021-01-10 - 1.1.2 — 2020-10-30 - 1.1.1 — 2020-10-30 - 1.0.1 — 2020-10-29 - 1.0.0 — 2020-10-29 ## README # react-whatsapp-widget > WhatsApp chat widget for your website [![NPM](https://img.shields.io/npm/v/react-whatsapp-widget.svg)](https://www.npmjs.com/package/react-whatsapp-widget) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![Custom settings](https://i.ibb.co/kDSbsXb/Screen-Shot-2020-10-29-at-02-01-31.png) ## 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) --- _Source: https://npm.io/package/react-whatsapp-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._