zapx

React Floating Whatsapp

Simple react component for adding a floating WhatsApp button to your project.

Install

npm

npm i react-floating-whatsapp

Yarn

yarn add react-floating-whatsapp

v5.0.0 - 2022-10-07

• BREAKING CHANGES: change default import to name import
• BREAKING CHANGES: rename height prop to chatboxHeight
• BREAKING CHANGES: rename styles prop to style
• BREAKING CHANGES: notificationDelay now in seconds instead of millisecond

Usage

import React from 'react'
import { FloatingWhatsApp } from 'react-floating-whatsapp'

export default function App() {

  return (
      <FloatingWhatsApp {/*  Props  */} />
  )
}

Props

Prop	Type	Options	Description	Default
phoneNumber	String	Required	Phone number in intenational format	1234567890
accountName	String	Required	Account username	Account Name
onClick	Function	Optional	Callback function fires on click	-
onSubmit	Function	Optional	Callback function fires on submit with event and form input value passed	-
onClose	Function	Optional	Callback function fires on close	-
onLoopDone	Function	Optional	Callback function called when notification loop done	-
onNotification	Function	Optional	Callback function fired when notification runs	-
avatar	String	Optional	Change user avatar using static assets	UI Face
statusMessage	String	Optional	Text below the account username	Typically replies within 1 hour
chatMessage	String	Optional	Text inside the chat box.	Hello there! 🤝 \nHow can we help?
placeholder	String	Optional	Input placeholder.	Type a message..
messageDelay	Number	Optional	Time delay after which the chatMessage is displayed (in seconds).	2
darkMode	Boolean	Optional	Dark style.	false
allowClickAway	Boolean	Optional	Closes the chat box when user clicks outside	false
allowEsc	Boolean	Optional	Closes the chat box when Escape key is pressed	false
className	String	Optional	CSS className applied to the main wrapping Div	floating-whatsapp
buttonClassName	String	Optional	CSS className applied to button	floating-whatsapp-button
style	CSSProperties	Optional	Inline style applied to the main wrapping Div	{}
buttonStyle	CSSProperties	Optional	Inline style applied to button	{}
chatboxHeight	Number	Optional	Control chat box height	320
chatboxClassName	String	Optional	CSS className applied to chat box	floating-whatsapp-chatbox
chatboxStyle	CSSProperties	Optional	Inline style applied to chat box	{}
notification	Boolean	Optional	Allow notifications (Disabled after user open the chat box)	false
notificationDelay	Number	Optional	Time delay between notifications in seconds	60
notificationSound	Boolean	Optional	Allow notification sound	false
notificationSoundSrc	String	Optional	Notification sound custom src	-
notificationLoop	Number	Optional	Repeat notifications loop	0
notificationStyle	CSSProperties	Optional	Inline style applied to notification	-
notificationClassName	String	Optional	CSS className applied to notification indicator	floating-whatsapp-notification

License

MIT © awran5