No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

React Floating Whatsapp
Simple React component for adding a floating WhatsApp button to your project.
NPM JavaScript Style Guidenpm bundle sizeGitHub
Install with npm
npm i react-floating-whatsapp
Yarn
yarn add react-floating-whatsapp
Usage
import { FloatingWhatsApp } from 'react-floating-whatsapp'

function App() {

  return (
    <FloatingWhatsApp
      {/* props */}
    />
  )
Props
NameDescriptionDefault
onClick
Callback function fires on click
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
-
onSubmit
Callback function fires on submit with event and form input value passed
((event: FormEvent<HTMLFormElement>, formValue: string) => void)
-
onClose
Callback function fires on close
(() => void)
-
onNotification
Callback function fired when notification runs
(() => void)
-
onLoopDone
Callback function called when notification loop done
(() => void)
-
phoneNumber
Phone number in intenational format
string
"1234567890"
accountName
Account Name
string
"Account Name"
chatboxHeight
Set chat box height
number
320
chatboxStyle
Inline style applied to chat box
CSSProperties
-
chatboxClassName
CSS className applied to chat box
string
"floating-whatsapp-chatbox"
avatar
Change user avatar using static assets
string
-
statusMessage
Text below the account username
string
"Typically replies within 1 hour"
chatMessage
Text inside the chat box
string
"Hello there! 🤝 \nHow can we help?"
placeholder
Input placeholder
string
"Type a message.."
messageDelay
Time delay after which the chatMessage is displayed (in seconds)
number
2
notification
Allow notifications (Disabled after user opens the chat box)
boolean
true
notificationDelay
Time delay between notifications in seconds
number
60
notificationLoop
Repeat notifications loop
number
0
notificationSound
Enable notification sound
boolean
false
notificationSoundSrc
Notification sound custom src
string
-
notificationStyle
Inline style applied to notification
CSSProperties
-
notificationClassName
CSS className applied to notification
string
"floating-whatsapp-notification"
allowClickAway
Closes the chat box if click outside the chat box
boolean
false
allowEsc
Closes the chat box if Escape key is clicked
boolean
false
darkMode
Enable / Disable dark mode
boolean
false
style
Inline style  applied to the main wrapping Div
CSSProperties
-
className
CSS className applied to the main wrapping Div
string
"floating-whatsapp"
buttonStyle
Inline style applied to button
CSSProperties
-
buttonClassName
CSS className applied to button
string
"floating-whatsapp-button"

GithubCodesandbox
Changelog
License MIT © awran5
TipEdit the Markdown in stories/Introduction.stories.mdx