React wrapper for tawk.to live chat
npm install tawk-reactA React component library for integrating Tawk.to live chat into your React applications. This library provides a simple and flexible way to add Tawk.to chat functionality using React components and hooks.
- Supports React 19.
- Built with TypeScript.
- Comprehensive API for controlling the chat widget.
- Event subscription system for handling Tawk.to events.
You can install the package via npm:
``bash`
npm install tawk-react
To use the TawkLiveChat component, you need to provide your Tawk.to propertyId and widgetId:propertyId
- : Go to Tawk.to Dashboard -> Administration -> Overview -> Value in Property ID field.widgetId
- : Go to Tawk.to Dashboard -> Administration -> Channels -> Chat Widget -> Value in Widget ID field.
`tsx
import { TawkLiveChat } from 'tawk-react'
const App = () => {
return (
export default App
`
The library also provides hooks for interacting with the Tawk.to API as well as for listening Tawk.to events.
#### useTawkAction
This hook provides methods to control the chat widget programmatically. You can use it from any component in your codebase.
`tsx
import { useTawkAction } from 'tawk-react'
const ChatControls = () => {
const { maximize, minimize, endChat } = useTawkAction()
return (
export default ChatControls
`
You can subscribe to Tawk.to events using the useTawkEvent hook.
`tsx
import { useTawkEvent, TawkEvent } from 'tawk-react'
const ChatEventListener = () => {
useTawkEvent(TawkEvent.onLoad, () => {
console.log('Chat loaded')
})
return null
}
export default ChatEventListener
`
- propertyId (string): Your Tawk.to Property ID.
- widgetId (string): Your Tawk.to Widget ID.
- visitor (optional): Object containing visitor information (name, email).customStyle
- (optional): Object to customize widget styling. Only zIndex is supported.autoStart
- (optional): Boolean to disable the auto-start connection of the chat widget.
#### useTawkAction
Provides methods like start, shutdown, maximize, minimize, toggle, etc., to control the chat widget.
#### useTawkEvent
Allows subscribing to various Tawk.to events such as onLoad, onChatStarted, onChatEnded`, etc.
Contributions are welcome! Please feel free to submit a pull request or open an issue.
This project is licensed under the MIT License. See the LICENSE file for details.
- Tawk.to for providing the live chat service.