React.js

The tawk.to plugin for React.js simplifies integration and makes it easy to customize widget behavior in your app using React Hooks.


All of our API methods are available for the plugin. View the list in our API reference.

React.js implementation

1. Use one of the commands below to install the dependency using the node or yarn package manager.

2. Import tawk-messenger-react into the App.js file of your src/ folder. Then, assign the values for your widgetId and propertyId.


Log in to your account and go to ⚙️Administration Channels Chat Widget.


When using the API, you will need to use the useRef to access the object functions from the tawk-messenger-react component.

Find your widget and property IDs

To find your widget and property IDs, log in to the tawk.to Dashboard. Then make your way to ⚙️Administration ➞ Channels ➞ Chat Widget.


If your property has multiple widgets, select a widget in the upper drop-down menu.


Under Direct Chat Link, the widgetId is the last segment of the path and follows the propertyId.

In the example below, the property ID is 61563492d326717cb6842813 and the widgetId is 1fgsbqorm

How to use callbacks and expose functions

See the list of APIs in our API reference.


To access the expose functions, you will need to use useRef from React. Create a constant variable that will hold the useRef() and pass it in the TawkMessengerReact component as a prop.

Using Callbacks

To use the API callbacks, pass a function as props on the callback you will use.

Expose functions

To access the expose functions, you will need to use useRef from React. Create a constant variable that will hold the useRef() and pass it in the TawkMessengerReact component as a prop.

Using Callbacks

Using the API callbacks, pass a function as props on the callback you will use.

Other JS frameworks we support

Vue.js Help Center | GitHub

Angular.js GitHub

Ember.js GitHub

Need help integrating tawk.to in React.js? Reach out to our support team or schedule a call

Was this article helpful?

17 out of 22 liked this article

Still need help? Message Us