├── images
    └── tawk-react-logo.png
├── src
    ├── utils
    │   ├── helper.js
    │   └── widget.js
    ├── __tests__
    │   ├── Install.spec.js
    │   └── TawkMessenger.spec.js
    └── index.js
├── LICENSE
├── CHANGELOG.md
├── vite.config.js
├── .eslintrc.js
├── docs
    ├── how-to-use.md
    └── api-reference.md
├── package.json
├── README.md
├── .gitignore
└── dist
    ├── tawk-messenger-react.umd.js
    └── tawk-messenger-react.es.js


/images/tawk-react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tawk/tawk-messenger-react/HEAD/images/tawk-react-logo.png


--------------------------------------------------------------------------------
/src/utils/helper.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {String} value - A data that needs to be validated
 3 |  * @returns - Boolean
 4 |  */
 5 | const isValidString = (value) => {
 6 | 	if (!value || value.length === 0) {
 7 | 		return false;
 8 | 	}
 9 | 
10 | 	return value !== null && value !== undefined && typeof value === 'string';
11 | };
12 | 
13 | 
14 | export {
15 | 	isValidString
16 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2022 tawk.to inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 | http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | **Keep track of every change of the tawk-messenger-react.**
 3 | This changelog list all additions and updates to the plugin, in chronological order.
 4 | All notable changes in this project will be documented in this file.
 5 | 
 6 | 
 7 | ## [2.1.0] - 2025-06-12
 8 | ### Breaking Changes
 9 | - **library:** Rename all API names to have `tawk` prefix to avoid name collissions ([#40](https://github.com/tawk/tawk-messenger-react/pull/40)).
10 | 
11 | ### Major Changes
12 | - **library:** Add `autoStart`, `tawkStart`, `tawkShutdown` new APIs to manually start and end the socket connection ([#29](https://github.com/tawk/tawk-messenger-react/pull/29)).


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import { defineConfig } from 'vite'
 3 | import react from '@vitejs/plugin-react'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |     plugins: [react()],
 8 |     
 9 |     build : {
10 |         lib : {
11 |             entry : path.resolve(__dirname, 'src/index.js'),
12 |             name : 'tawk-messenger-react',
13 |             fileName : (format) => `tawk-messenger-react.${format}.js`
14 |         },
15 |         rollupOptions : {
16 |             external : ['react'],
17 | 
18 |             output : {
19 |                 globals : {
20 |                     react : 'React'
21 |                 }
22 |             }
23 |         }
24 |     }
25 | })
26 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root : true,
 3 | 	env : {
 4 | 		node : true,
 5 | 		jest : true,
 6 | 		es2020 : true
 7 | 	},
 8 | 	extends : [
 9 | 		'plugin:react/recommended',
10 | 		'plugin:react/jsx-runtime',
11 | 		'eslint:recommended'
12 | 	],
13 | 	ignorePatterns : ['/dist/**'],
14 | 	rules : {
15 | 		'no-console' : ['error', { allow : ['warn', 'error'] }],
16 | 		'no-debugger' : 'error',
17 | 		'no-var' : 'off',
18 | 		semi : ['error', 'always'],
19 | 		indent : [1, 'tab'],
20 | 		'space-before-function-paren' : [
21 | 			'warn',
22 | 			{
23 | 				anonymous : 'always',
24 | 				named : 'never'
25 | 			}
26 | 		],
27 | 		'key-spacing' : [
28 | 			'warn',
29 | 			{
30 | 				beforeColon : true
31 | 			}
32 | 		],
33 | 		'operator-linebreak' : ['error', 'after'],
34 | 		'no-nested-ternary' : 'error',
35 | 		quotes : ['error', 'single'],
36 | 		'arrow-parens' : ['error', 'always'],
37 | 		'react/jsx-uses-react' : 'off',
38 | 		'react/react-in-jsx-scope' : 'off',
39 | 		'no-redeclare' : 'off'
40 | 	},
41 | 	settings : {
42 | 		react : {
43 | 			version : 'detect'
44 | 		}
45 | 	},
46 | 	parser : 'babel-eslint'
47 | };


--------------------------------------------------------------------------------
/src/utils/widget.js:
--------------------------------------------------------------------------------
 1 | /* global document, window */
 2 | /* eslint-disable no-use-before-define */
 3 | 
 4 | /**
 5 |  * @param {Object} - Tawk widget required properties 
 6 |  */
 7 | const loadScript = ({propertyId = '', widgetId = '', embedId = '', basePath = 'tawk.to', autoStart = true}) => {
 8 | 	if (embedId.length) {
 9 | 		/**
10 | 		 * If the element with embedId as id we will create a new clement
11 | 		 */
12 | 		if (!document.getElementById(embedId)) {
13 | 			const element = document.createElement('div');
14 | 			element.id = embedId;
15 | 	
16 | 			document.body.appendChild(element);
17 | 		}
18 | 
19 | 		window.Tawk_API.embedded = embedId;
20 | 	}
21 | 
22 | 	if (!autoStart) {
23 | 		window.Tawk_API.autoStart = autoStart;
24 | 	}
25 | 
26 | 	const script = document.createElement('script');
27 | 	script.async = true;
28 | 	script.src = `https://embed.${basePath}/${propertyId}/${widgetId}`;
29 | 	script.charset = 'UTF-8';
30 | 	script.setAttribute('crossorigin', '*');
31 | 
32 | 	const firstScript = document.getElementsByTagName('script')[0];
33 | 	firstScript.parentNode.insertBefore(script, firstScript);
34 | };
35 | 
36 | 
37 | export {
38 | 	loadScript
39 | };


--------------------------------------------------------------------------------
/docs/how-to-use.md:
--------------------------------------------------------------------------------
 1 | # How to Use
 2 | Here are the basic of how to use callbacks and expose functions from the plugin. You can see the
 3 | list of APIs in this [API reference](api-reference.md).
 4 | 
 5 | ## Expose functions
 6 | To access the expose functions, you will need to use **useRef** from react. Create a constant
 7 | variable that will hold the **useRef()** and pass it in **TawkMessengerReact** component as a prop.
 8 | 
 9 | ```js
10 | import { useRef } from 'react';
11 | import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
12 | 
13 | function App() {
14 |     const tawkMessengerRef = useRef();
15 | 
16 |     const handleTawkMinimize () => {
17 |         tawkMessengerRef.current.tawkMinimize();
18 |     };
19 | 
20 |     return (
21 |         <div className="App">
22 |             <button onClick={handleTawkMinimize}> Minimize the Chat </button>
23 | 
24 |             <TawkMessengerReact
25 |                 propertyId="property_id"
26 |                 widgetId="default"
27 |                 ref={tawkMessengerRef}/>
28 |         </div>
29 |     );
30 | }
31 | ```
32 | 
33 | ## Using Callbacks
34 | Using the API callbacks, pass a function as props on the callback you will used.
35 | 
36 | ```js
37 | function App() {
38 |     const tawkOnLoad = () => {
39 |         // Do something here
40 |     };
41 | 
42 |     return (
43 |         <div className="App">
44 |             <TawkMessengerReact
45 |                 propertyId="property_id"
46 |                 widgetId="default"
47 |                 tawkOnLoad={tawkOnLoad}/>
48 |         </div>
49 |     );
50 | }
51 | ```
52 | 
53 | 


--------------------------------------------------------------------------------
/src/__tests__/Install.spec.js:
--------------------------------------------------------------------------------
 1 | /* global document */
 2 | 
 3 | // Dependecy
 4 | import { unmountComponentAtNode } from 'react-dom';
 5 | import { render, act } from '@testing-library/react';
 6 | 
 7 | // Plugin
 8 | import TawkMessengerReact from '../index';
 9 | 
10 | 
11 | let container = null;
12 | jest.spyOn(console, 'error').mockReturnValue(true);
13 | 
14 | 
15 | describe('Install tawk-messenger-react', () => {
16 | 	beforeEach(() => {
17 | 		container = document.createElement('script');
18 | 		document.body.appendChild(container);
19 | 	});
20 | 
21 | 	afterEach(() => {
22 | 		unmountComponentAtNode(container);
23 | 		container.remove();
24 | 		container = null;
25 | 	});
26 | 
27 | 	describe('Should throw an error in missing required properties', () => {
28 | 		it('when propertyId and widgetId are not defined', () => {
29 | 			act(() => {
30 | 				render(<TawkMessengerReact/>, container);
31 | 			});
32 | 
33 | 			/**
34 | 			 * 1st error - PropType 'propertyId' is required
35 | 			 * 2nd error - PropType 'widgetId' is required
36 | 			 * 3rd error - Custom log from load()
37 | 			 * 4th error - Custom log from tawk messenger
38 | 			 */
39 | 			expect(console.error).toHaveBeenCalledTimes(4);
40 | 		});
41 | 
42 | 		it('when widgetId only is not defined', () => {
43 | 			act(() => {
44 | 				render(
45 | 					<TawkMessengerReact
46 | 						propertyId="property_Id"/>,
47 | 					container
48 | 				);
49 | 			});
50 | 
51 | 			/**
52 | 			 * 1st error - PropType 'widgetId' is required
53 | 			 */
54 | 			expect(console.error).toHaveBeenCalledTimes(1);
55 | 		});
56 | 
57 | 		it('when propertId only is not defined', () => {
58 | 			act(() => {
59 | 				render(
60 | 					<TawkMessengerReact
61 | 						widgetId="widget_id"/>,
62 | 					container
63 | 				);
64 | 			});
65 | 
66 | 			/**
67 | 			 * 1st error - PropType 'widgetId' is required
68 | 			 */
69 | 			expect(console.error).toHaveBeenCalledTimes(1);
70 | 		});
71 | 	});
72 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@tawk.to/tawk-messenger-react",
 3 |   "version": "2.1.0",
 4 |   "description": "Official React plugin for Tawk messenger",
 5 |   "keywords": [
 6 |     "react",
 7 |     "reactjs",
 8 |     "next",
 9 |     "react-plugin",
10 |     "tawk",
11 |     "next-plugin",
12 |     "tawkto",
13 |     "react-tawk",
14 |     "next-tawk"
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/tawk/tawk-messenger-react.git",
19 |     "repository": "tawk/tawk-messenger-react"
20 |   },
21 |   "homepage": "https://github.com/tawk/tawk-messenger-react#readme",
22 |   "bugs": {
23 |     "url": "https://github.com/tawk/tawk-messenger-react/issues",
24 |     "email": "support@tawk.to"
25 |   },
26 |   "license": "Apache-2.0",
27 |   "author": "Jerald Austero <jerald.austero@tawk.to> (https://www.tawk.to)",
28 |   "files": [
29 |     "dist"
30 |   ],
31 |   "main": "./dist/tawk-messenger-react.umd.js",
32 |   "module": "./dist/tawk-messenger-react.es.js",
33 |   "exports": {
34 |     ".": {
35 |       "import": "./dist/tawk-messenger-react.es.js",
36 |       "require": "./dist/tawk-messenger-react.umd.js"
37 |     }
38 |   },
39 |   "scripts": {
40 |     "build": "vite build",
41 |     "test": "react-scripts test",
42 |     "lint": "eslint src/**/*.js"
43 |   },
44 |   "peerDependencies": {
45 |     "react": "^18.1.0",
46 |     "react-dom": "^18.1.0"
47 |   },
48 |   "devDependencies": {
49 |     "@testing-library/jest-dom": "^5.16.4",
50 |     "@testing-library/react": "^13.2.0",
51 |     "@testing-library/user-event": "^14.1.1",
52 |     "@vitejs/plugin-react": "^1.3.2",
53 |     "babel-eslint": "^10.1.0",
54 |     "eslint-plugin-jest": "^26.1.5",
55 |     "eslint-plugin-react": "^7.29.4",
56 |     "react": "^18.1.0",
57 |     "react-dom": "^18.1.0",
58 |     "react-scripts": "^5.0.1",
59 |     "vite": "^2.9.9"
60 |   },
61 |   "eslintConfig": {
62 |     "extends": [
63 |       "react-app",
64 |       "react-app/jest"
65 |     ]
66 |   },
67 |   "browserslist": {
68 |     "production": [
69 |       ">0.2%",
70 |       "not dead",
71 |       "not op_mini all"
72 |     ],
73 |     "development": [
74 |       "last 1 chrome version",
75 |       "last 1 firefox version",
76 |       "last 1 safari version"
77 |     ]
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |     <img width="250"
 3 |         src="./images/tawk-react-logo.png"
 4 |         alt="Tawk React logo">
 5 | </p>
 6 | 
 7 | <br/>
 8 | 
 9 | ## Features
10 | * Using React Hooks
11 | * Documented and self-explaining methods
12 | * Small size without any external libraries
13 | * All Javascript API methods are available
14 | * Maintained by the [tawk.to](https://www.tawk.to/) team.
15 | 
16 | <br/>
17 | 
18 | ## Installation
19 | The plugins are available from the node and yarn package managers.
20 | ```bash
21 | # Node
22 | npm install @tawk.to/tawk-messenger-react
23 | 
24 | # Yarn
25 | yarn add @tawk.to/tawk-messenger-react
26 | ```
27 | 
28 | <br/>
29 | 
30 | ## Quickstart
31 | Import **tawk-messenger-react** into the App.js file of your **src/** folder. The **propertyId** and **widgetId** will
32 | be found on your tawk Dashboard.
33 | 
34 | Log in to your account and go to **Administration > Channels > Chat Widget**.
35 | 
36 | When using the API, you will need to use the **useRef** to access the object functions from the **tawk-messenger-react** component.
37 | 
38 | ```js
39 | import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
40 | 
41 | function App() {
42 |     return (
43 |         <div className="App">
44 |             <TawkMessengerReact
45 |                 propertyId="property_id"
46 |                 widgetId="default"/>
47 |         </div>
48 |     );
49 | }
50 | ```
51 | 
52 | <br/>
53 | 
54 | ## Documentation
55 | This project includes a `docs` folder with more details on the following:
56 | 1.  [How to Use](docs/how-to-use.md)
57 | 1.  [API Reference](docs/api-reference.md)
58 | 
59 | <br/>
60 | 
61 | ## Other JS frameworks we support
62 | - [Vue Js](https://github.com/tawk/tawk-messenger-vue)
63 | - [Angular Js](https://github.com/tawk/tawk-messenger-angular)
64 | - [Ember Js](https://github.com/tawk/tawk-messenger-ember)
65 | 
66 | <br/>
67 | 
68 | ## Frequently Asked Questions
69 | 
70 | **Do you have a knowledge base or article to support implementation?**
71 | 
72 | Here is our guide for the [React.js integration](https://help.tawk.to/article/react-js )
73 | 
74 | **Where can I find more information and support?**
75 | 
76 | Visit our [help center](https://help.tawk.to) or reach out in the chat on our [website](https://tawk.to). Our agents are available to assist you 24/7.
77 | 
78 | **Where can I submit a suggestion or report a bug?**
79 | 
80 | Check to see if the issue already exists. If not, open a new issue in the [Issues tab](https://github.com/tawk/tawk-messenger-vue/issues)


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | 
 84 | # Gatsby files
 85 | .cache/
 86 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 87 | # https://nextjs.org/blog/next-9-1#public-directory-support
 88 | # public
 89 | 
 90 | # vuepress build output
 91 | .vuepress/dist
 92 | 
 93 | # Serverless directories
 94 | .serverless/
 95 | 
 96 | # FuseBox cache
 97 | .fusebox/
 98 | 
 99 | # DynamoDB Local files
100 | .dynamodb/
101 | 
102 | # TernJS port file
103 | .tern-port
104 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
105 | 
106 | # dependencies
107 | /node_modules
108 | /.pnp
109 | .pnp.js
110 | 
111 | # testing
112 | /coverage
113 | 
114 | # production
115 | /build
116 | 
117 | # misc
118 | .DS_Store
119 | .env.local
120 | .env.development.local
121 | .env.test.local
122 | .env.production.local
123 | 
124 | npm-debug.log*
125 | yarn-debug.log*
126 | yarn-error.log*
127 | 


--------------------------------------------------------------------------------
/dist/tawk-messenger-react.umd.js:
--------------------------------------------------------------------------------
1 | (function(w,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("react")):typeof define=="function"&&define.amd?define(["react"],o):(w=typeof globalThis!="undefined"?globalThis:w||self,w["tawk-messenger-react"]=o(w.React))})(this,function(w){"use strict";var o={exports:{}},m="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",O=m,C=O;function c(){}function h(){}h.resetWarningCache=c;var l=function(){function t(u,r,e,n,s,y){if(y!==C){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}}t.isRequired=t;function i(){return t}var d={array:t,bigint:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:i,element:t,elementType:t,instanceOf:i,node:t,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:h,resetWarningCache:c};return d.PropTypes=d,d};o.exports=l();var a=o.exports;const g=t=>!t||t.length===0?!1:t!=null&&typeof t=="string",T=({propertyId:t="",widgetId:i="",embedId:d="",basePath:u="tawk.to",autoStart:r=!0})=>{if(d.length){if(!document.getElementById(d)){const s=document.createElement("div");s.id=d,document.body.appendChild(s)}window.Tawk_API.embedded=d}r||(window.Tawk_API.autoStart=r);const e=document.createElement("script");e.async=!0,e.src=`https://embed.${u}/${t}/${i}`,e.charset="UTF-8",e.setAttribute("crossorigin","*");const n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},k=w.forwardRef((t,i)=>{w.useEffect(()=>{d()},[]);const d=()=>{if(!g(t.propertyId)){console.error("[Tawk-messenger-react warn]: You didn't specified 'propertyId' property in the plugin.");return}if(!g(t.widgetId)){console.error("[Tawk-messenger-react warn]: You didn't specified 'widgetId' property in the plugin.");return}!window||!document||u()},u=()=>{window.Tawk_API=window.Tawk_API||{},window.Tawk_LoadStart=new Date,T({propertyId:t.propertyId,widgetId:t.widgetId,embedId:t.embedId,basePath:t.basePath,autoStart:t.autoStart}),t.customStyle&&typeof t.customStyle=="object"&&(window.Tawk_API.customStyle=t.customStyle),r()};w.useImperativeHandle(i,()=>({tawkStart:()=>window.Tawk_API.start(),tawkShutdown:()=>window.Tawk_API.shutdown(),tawkMaximize:()=>window.Tawk_API.maximize(),tawkMinimize:()=>window.Tawk_API.minimize(),tawkToggle:()=>window.Tawk_API.toggle(),tawkPopup:()=>window.Tawk_API.popup(),tawkShowWidget:()=>window.Tawk_API.showWidget(),tawkHideWidget:()=>window.Tawk_API.hideWidget(),tawkToggleVisibility:()=>window.Tawk_API.toggleVisibility(),tawkEndChat:()=>window.Tawk_API.endChat(),tawkGetWindowType:()=>window.Tawk_API.getWindowType(),tawkGetStatus:()=>window.Tawk_API.getStatus(),tawkIsChatMaximized:()=>window.Tawk_API.isChatMaximized(),tawkIsChatMinimized:()=>window.Tawk_API.isChatMinimized(),tawkIsChatHidden:()=>window.Tawk_API.isChatHidden(),tawkIsChatOngoing:()=>window.Tawk_API.isChatOngoing(),tawkIsVisitorEngaged:()=>window.Tawk_API.isVisitorEngaged(),tawkOnLoaded:()=>window.Tawk_API.onLoaded,tawkOnBeforeLoaded:()=>window.Tawk_API.onBeforeLoaded,tawkWidgetPosition:()=>window.Tawk_API.widgetPosition(),tawkVisitor:e=>{window.Tawk_API.visitor=e},tawkSetAttributes:(e,n)=>{window.Tawk_API.setAttributes(e,n)},tawkAddEvent:(e,n,s)=>{window.Tawk_API.addEvent(e,n,s)},tawkAddTags:(e,n)=>{window.Tawk_API.addTags(e,n)},tawkRemoveTags:(e,n)=>{window.Tawk_API.removeTags(e,n)},tawkSwitchWidget:(e,n)=>{window.Tawk_API.switchWidget(data,n)}}));const r=()=>{window.addEventListener("tawkLoad",()=>{t.tawkOnLoad()}),window.addEventListener("tawkStatusChange",e=>{t.tawkOnStatusChange(e.detail)}),window.addEventListener("tawkBeforeLoad",()=>{t.tawkOnBeforeLoad()}),window.addEventListener("tawkChatMaximized",()=>{t.tawkOnChatMaximized()}),window.addEventListener("tawkChatMinimized",()=>{t.tawkOnChatMinimized()}),window.addEventListener("tawkChatHidden",()=>{t.tawkOnChatHidden()}),window.addEventListener("tawkChatStarted",()=>{t.tawkOnChatStarted()}),window.addEventListener("tawkChatEnded",()=>{t.tawkOnChatEnded()}),window.addEventListener("tawkPrechatSubmit",e=>{t.tawkOnPrechatSubmit(e.detail)}),window.addEventListener("tawkOfflineSubmit",e=>{t.tawkOnOfflineSubmit(e.detail)}),window.addEventListener("tawkChatMessageVisitor",e=>{t.tawkOnChatMessageVisitor(e.detail)}),window.addEventListener("tawkChatMessageAgent",e=>{t.tawkOnChatMessageAgent(e.detail)}),window.addEventListener("tawkChatMessageSystem",e=>{t.tawkOnChatMessageSystem(e.detail)}),window.addEventListener("tawkAgentJoinChat",e=>{t.tawkOnAgentJoinChat(e.detail)}),window.addEventListener("tawkAgentLeaveChat",e=>{t.tawkOnAgentLeaveChat(e.detail)}),window.addEventListener("tawkChatSatisfaction",e=>{t.tawkOnChatSatisfaction(e.detail)}),window.addEventListener("tawkVisitorNameChanged",e=>{t.tawkOnVisitorNameChanged(e.detail)}),window.addEventListener("tawkFileUpload",e=>{t.tawkOnFileUpload(e.detail)}),window.addEventListener("tawkTagsUpdated",e=>{t.tawkOnTagsUpdated(e.detail)}),window.addEventListener("tawkUnreadCountChanged",e=>{t.tawkOnUnreadCountChanged(e.detail)})};return null});return k.displayName="TawkMessenger",k.defaultProps={customStyle:null,embedId:"",basePath:"tawk.to",tawkOnLoad:()=>{},tawkOnStatusChange:()=>{},tawkOnBeforeLoad:()=>{},tawkOnChatMaximized:()=>{},tawkOnChatMinimized:()=>{},tawkOnChatHidden:()=>{},tawkOnChatStarted:()=>{},tawkOnChatEnded:()=>{},tawkOnPrechatSubmit:()=>{},tawkOnOfflineSubmit:()=>{},tawkOnChatMessageVisitor:()=>{},tawkOnChatMessageAgent:()=>{},tawkOnChatMessageSystem:()=>{},tawkOnAgentJoinChat:()=>{},tawkOnAgentLeaveChat:()=>{},tawkOnChatSatisfaction:()=>{},tawkOnVisitorNameChanged:()=>{},tawkOnFileUpload:()=>{},tawkOnTagsUpdated:()=>{},tawkOnUnreadCountChanged:()=>{}},k.propTypes={propertyId:a.string.isRequired,widgetId:a.string.isRequired,customStyle:a.object,embedId:a.string,basePath:a.string,tawkOnLoad:a.func,tawkOnStatusChange:a.func,tawkOnBeforeLoad:a.func,tawkOnChatMaximized:a.func,tawkOnChatMinimized:a.func,tawkOnChatHidden:a.func,tawkOnChatStarted:a.func,tawkOnChatEnded:a.func,tawkOnPrechatSubmit:a.func,tawkOnOfflineSubmit:a.func,tawkOnChatMessageVisitor:a.func,tawkOnChatMessageAgent:a.func,tawkOnChatMessageSystem:a.func,tawkOnAgentJoinChat:a.func,tawkOnAgentLeaveChat:a.func,tawkOnChatSatisfaction:a.func,tawkOnVisitorNameChanged:a.func,tawkOnFileUpload:a.func,tawkOnTagsUpdated:a.func,tawkOnUnreadCountChanged:a.func},k});
2 | 


--------------------------------------------------------------------------------
/src/__tests__/TawkMessenger.spec.js:
--------------------------------------------------------------------------------
  1 | /* global document, window */
  2 | 
  3 | // Dependecy
  4 | import { unmountComponentAtNode } from 'react-dom';
  5 | import { render, act } from '@testing-library/react';
  6 | 
  7 | // Plugin
  8 | import TawkMessengerReact from '../index';
  9 | 
 10 | 
 11 | let container = null;
 12 | jest.spyOn(window, 'addEventListener');
 13 | 
 14 | 
 15 | describe('Tawk-messenger plugin', () => {
 16 | 	beforeEach(() => {
 17 | 		container = document.createElement('script');
 18 | 		document.body.appendChild(container);
 19 | 	});
 20 | 
 21 | 	afterEach(() => {
 22 | 		unmountComponentAtNode(container);
 23 | 		container.remove();
 24 | 		container = null;
 25 | 	});
 26 | 
 27 | 	describe('Initialize plugin', () => {
 28 | 		it('should have global variable \'Tawk_API\'', () => {
 29 | 			act(() => {
 30 | 				render(
 31 | 					<TawkMessengerReact
 32 | 						propertyId="property_id"
 33 | 						widgetId="widget_id"/>,
 34 | 					container
 35 | 				);
 36 | 			});
 37 | 			
 38 | 			expect(typeof window.Tawk_API === 'object').toBe(true);
 39 | 		});
 40 | 
 41 | 		it('should set \'customStyle\' property in \'Tawk_API\'', () => {
 42 | 			act(() => {
 43 | 				render(
 44 | 					<TawkMessengerReact
 45 | 						propertyId="property_id"
 46 | 						widgetId="widget_id"
 47 | 						customStyle={{}}/>,
 48 | 					container
 49 | 				);
 50 | 			});
 51 | 			
 52 | 			expect(typeof window.Tawk_API.customStyle === 'object').toBe(true);
 53 | 		});
 54 | 	});
 55 | 
 56 | 	describe('API', () => {
 57 | 		it('should set the action functions', () => {
 58 | 			const tawkMessengerRef = {
 59 | 				current : {}
 60 | 			};
 61 | 	
 62 | 			act(() => {
 63 | 				render(
 64 | 					<TawkMessengerReact
 65 | 						propertyId="property_id"
 66 | 						widgetId="widget_id"
 67 | 						ref={tawkMessengerRef}/>,
 68 | 					container
 69 | 				);
 70 | 			});
 71 | 			
 72 | 			expect(typeof tawkMessengerRef.current.tawkMaximize === 'function').toBe(true);
 73 | 			expect(typeof tawkMessengerRef.current.tawkMinimize === 'function').toBe(true);
 74 | 			expect(typeof tawkMessengerRef.current.tawkToggle === 'function').toBe(true);
 75 | 			expect(typeof tawkMessengerRef.current.tawkPopup === 'function').toBe(true);
 76 | 			expect(typeof tawkMessengerRef.current.tawkShowWidget === 'function').toBe(true);
 77 | 			expect(typeof tawkMessengerRef.current.tawkHideWidget === 'function').toBe(true);
 78 | 			expect(typeof tawkMessengerRef.current.tawkToggleVisibility === 'function').toBe(true);
 79 | 			expect(typeof tawkMessengerRef.current.tawkEndChat === 'function').toBe(true);
 80 | 		});
 81 | 
 82 | 		it('should set the getters functions', () => {
 83 | 			const tawkMessengerRef = {
 84 | 				current : {}
 85 | 			};
 86 | 	
 87 | 			act(() => {
 88 | 				render(
 89 | 					<TawkMessengerReact
 90 | 						propertyId="property_id"
 91 | 						widgetId="widget_id"
 92 | 						ref={tawkMessengerRef}/>,
 93 | 					container
 94 | 				);
 95 | 			});
 96 | 			
 97 | 			expect(typeof tawkMessengerRef.current.tawkGetWindowType === 'function').toBe(true);
 98 | 			expect(typeof tawkMessengerRef.current.tawkGetStatus === 'function').toBe(true);
 99 | 			expect(typeof tawkMessengerRef.current.tawkIsChatMaximized === 'function').toBe(true);
100 | 			expect(typeof tawkMessengerRef.current.tawkIsChatMinimized === 'function').toBe(true);
101 | 			expect(typeof tawkMessengerRef.current.tawkIsChatHidden === 'function').toBe(true);
102 | 			expect(typeof tawkMessengerRef.current.tawkIsChatOngoing === 'function').toBe(true);
103 | 			expect(typeof tawkMessengerRef.current.tawkIsVisitorEngaged === 'function').toBe(true);
104 | 			expect(typeof tawkMessengerRef.current.tawkOnLoaded === 'function').toBe(true);
105 | 			expect(typeof tawkMessengerRef.current.tawkOnBeforeLoaded === 'function').toBe(true);
106 | 			expect(typeof tawkMessengerRef.current.tawkWidgetPosition === 'function').toBe(true);
107 | 		});
108 | 
109 | 		it('should set the event functions', () => {
110 | 			act(() => {
111 | 				render(
112 | 					<TawkMessengerReact
113 | 						propertyId="property_id"
114 | 						widgetId="widget_id"/>,
115 | 					container
116 | 				);
117 | 			});
118 | 			
119 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkLoad', expect.any(Function));
120 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkStatusChange', expect.any(Function));
121 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkBeforeLoad', expect.any(Function));
122 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatMaximized', expect.any(Function));
123 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatMinimized', expect.any(Function));
124 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatHidden', expect.any(Function));
125 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatStarted', expect.any(Function));
126 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatEnded', expect.any(Function));
127 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkPrechatSubmit', expect.any(Function));
128 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkOfflineSubmit', expect.any(Function));
129 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatMessageVisitor', expect.any(Function));
130 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatMessageAgent', expect.any(Function));
131 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatMessageSystem', expect.any(Function));
132 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkAgentJoinChat', expect.any(Function));
133 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkAgentLeaveChat', expect.any(Function));
134 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkChatSatisfaction', expect.any(Function));
135 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkVisitorNameChanged', expect.any(Function));
136 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkFileUpload', expect.any(Function));
137 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkTagsUpdated', expect.any(Function));
138 | 			expect(window.addEventListener).toHaveBeenCalledWith('tawkUnreadCountChanged', expect.any(Function));
139 | 		});
140 | 
141 | 		it('should set the setter functions', () => {
142 | 			const tawkMessengerRef = {
143 | 				current : {}
144 | 			};
145 | 	
146 | 			act(() => {
147 | 				render(
148 | 					<TawkMessengerReact
149 | 						propertyId="property_id"
150 | 						widgetId="widget_id"
151 | 						ref={tawkMessengerRef}/>,
152 | 					container
153 | 				);
154 | 			});
155 | 
156 | 			expect(typeof tawkMessengerRef.current.tawkVisitor === 'function').toBe(true);
157 | 			expect(typeof tawkMessengerRef.current.tawkSetAttributes === 'function').toBe(true);
158 | 			expect(typeof tawkMessengerRef.current.tawkAddEvent === 'function').toBe(true);
159 | 			expect(typeof tawkMessengerRef.current.tawkAddTags === 'function').toBe(true);
160 | 			expect(typeof tawkMessengerRef.current.tawkRemoveTags === 'function').toBe(true);
161 | 		});
162 | 	});
163 | });


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | /* global window, document */
  2 | 
  3 | // Dependencies
  4 | import { forwardRef, useEffect, useImperativeHandle } from 'react';
  5 | import PropTypes from 'prop-types';
  6 | 
  7 | // Helper
  8 | import { isValidString } from './utils/helper';
  9 | import { loadScript } from './utils/widget';
 10 | 
 11 | const TawkMessenger = forwardRef((props, ref) => {
 12 | 	useEffect(() => {
 13 | 		load();
 14 | 	}, []);
 15 | 
 16 | 	const load = () => {
 17 | 		if (!isValidString(props.propertyId)) {
 18 | 			console.error('[Tawk-messenger-react warn]: You didn\'t specified \'propertyId\' property in the plugin.');
 19 | 			return;
 20 | 		}
 21 | 	
 22 | 		if (!isValidString(props.widgetId)) {
 23 | 			console.error('[Tawk-messenger-react warn]: You didn\'t specified \'widgetId\' property in the plugin.');
 24 | 			return;
 25 | 		}
 26 | 
 27 | 		if (!window || !document) {
 28 | 			return;
 29 | 		}
 30 | 
 31 | 		init();
 32 | 	};
 33 | 
 34 | 	const init = () => {
 35 | 		/**
 36 | 		 * Set placeholder
 37 | 		 */
 38 | 		window.Tawk_API = window.Tawk_API || {};
 39 | 		window.Tawk_LoadStart = new Date();
 40 | 
 41 | 		/**
 42 | 		 * Inject the Tawk script
 43 | 		 */
 44 | 		loadScript({
 45 | 			propertyId : props.propertyId,
 46 | 			widgetId : props.widgetId,
 47 | 			embedId : props.embedId,
 48 | 			basePath : props.basePath,
 49 | 			autoStart : props.autoStart
 50 | 		});
 51 | 
 52 | 		/**
 53 | 		 * Set custom style
 54 | 		 */
 55 | 		if (props.customStyle && typeof props.customStyle === 'object') {
 56 | 			window.Tawk_API.customStyle = props.customStyle;
 57 | 		}
 58 | 
 59 | 		mapCallbacks();
 60 | 	};
 61 | 	
 62 | 	useImperativeHandle(ref, () => ({
 63 | 		/**
 64 | 		 * API for calling an action on the widget
 65 | 		 */
 66 | 		tawkStart : () => { 
 67 | 			return window.Tawk_API.start();
 68 | 		},
 69 | 
 70 | 		tawkShutdown : () => { 
 71 | 			return window.Tawk_API.shutdown();
 72 | 		},
 73 | 
 74 | 		tawkMaximize : () => { 
 75 | 			return window.Tawk_API.maximize();
 76 | 		},
 77 | 
 78 | 		tawkMinimize : () => {
 79 | 			return window.Tawk_API.minimize();
 80 | 		},
 81 | 
 82 | 		tawkToggle : () => {
 83 | 			return window.Tawk_API.toggle();
 84 | 		},
 85 | 
 86 | 		tawkPopup : () => {
 87 | 			return window.Tawk_API.popup();
 88 | 		},
 89 | 
 90 | 		tawkShowWidget : () => {
 91 | 			return window.Tawk_API.showWidget();
 92 | 		},
 93 | 
 94 | 		tawkHideWidget : () => {
 95 | 			return window.Tawk_API.hideWidget();
 96 | 		},
 97 | 
 98 | 		tawkToggleVisibility : () => {
 99 | 			return window.Tawk_API.toggleVisibility();
100 | 		},
101 | 
102 | 		tawkEndChat : () => {
103 | 			return window.Tawk_API.endChat();
104 | 		},
105 | 
106 | 		
107 | 		/**
108 | 		 * API for returning a data
109 | 		 */
110 | 		tawkGetWindowType : () => {
111 | 			return window.Tawk_API.getWindowType();
112 | 		},
113 | 
114 | 		tawkGetStatus : () => {
115 | 			return window.Tawk_API.getStatus();
116 | 		},
117 | 
118 | 		tawkIsChatMaximized : () => {
119 | 			return window.Tawk_API.isChatMaximized();
120 | 		},
121 | 
122 | 		tawkIsChatMinimized : () => {
123 | 			return window.Tawk_API.isChatMinimized();
124 | 		},
125 | 
126 | 		tawkIsChatHidden : () => {
127 | 			return window.Tawk_API.isChatHidden();
128 | 		},
129 | 
130 | 		tawkIsChatOngoing : () => {
131 | 			return window.Tawk_API.isChatOngoing();
132 | 		},
133 | 
134 | 		tawkIsVisitorEngaged : () => {
135 | 			return window.Tawk_API.isVisitorEngaged();
136 | 		},
137 | 
138 | 		tawkOnLoaded : () => {
139 | 			return window.Tawk_API.onLoaded;
140 | 		},
141 | 
142 | 		tawkOnBeforeLoaded : () => {
143 | 			return window.Tawk_API.onBeforeLoaded;
144 | 		},
145 | 
146 | 		tawkWidgetPosition : () => {
147 | 			return window.Tawk_API.widgetPosition();
148 | 		},
149 | 
150 | 
151 | 		/**
152 | 		 * API for setting a data on the widget
153 | 		 */
154 | 		tawkVisitor : (data) => {
155 | 			window.Tawk_API.visitor = data;
156 | 		},
157 | 
158 | 		tawkSetAttributes : (attribute, callback) => {
159 | 			window.Tawk_API.setAttributes(attribute, callback);
160 | 		},
161 | 
162 | 		tawkAddEvent : (event, metadata, callback) => {
163 | 			window.Tawk_API.addEvent(event, metadata, callback);
164 | 		},
165 | 
166 | 		tawkAddTags : (tags, callback) => {
167 | 			window.Tawk_API.addTags(tags, callback);
168 | 		},
169 | 
170 | 		tawkRemoveTags : (tags, callback) => {
171 | 			window.Tawk_API.removeTags(tags, callback);
172 | 		},
173 | 
174 | 		tawkSwitchWidget : (options, callback) => {
175 | 			window.Tawk_API.switchWidget(data, callback);
176 | 		}
177 | 	}));
178 | 
179 | 	/**
180 | 	 * API for listening an event emitting
181 | 	 * inside of the widget
182 | 	 */
183 | 	const mapCallbacks = () => {
184 | 		window.addEventListener('tawkLoad', () => {
185 | 			props.tawkOnLoad();
186 | 		});
187 | 
188 | 		window.addEventListener('tawkStatusChange', (status) => {
189 | 			props.tawkOnStatusChange(status.detail);
190 | 		});
191 | 
192 | 		window.addEventListener('tawkBeforeLoad', () => {
193 | 			props.tawkOnBeforeLoad();
194 | 		});
195 | 
196 | 		window.addEventListener('tawkChatMaximized', () => {
197 | 			props.tawkOnChatMaximized();
198 | 		});
199 | 
200 | 		window.addEventListener('tawkChatMinimized', () => {
201 | 			props.tawkOnChatMinimized();
202 | 		});
203 | 
204 | 		window.addEventListener('tawkChatHidden', () => {
205 | 			props.tawkOnChatHidden();
206 | 		});
207 | 
208 | 		window.addEventListener('tawkChatStarted', () => {
209 | 			props.tawkOnChatStarted();
210 | 		});
211 | 
212 | 		window.addEventListener('tawkChatEnded', () => {
213 | 			props.tawkOnChatEnded();
214 | 		});
215 | 
216 | 		window.addEventListener('tawkPrechatSubmit', (data) => {
217 | 			props.tawkOnPrechatSubmit(data.detail);
218 | 		});
219 | 
220 | 		window.addEventListener('tawkOfflineSubmit', (data) => {
221 | 			props.tawkOnOfflineSubmit(data.detail);
222 | 		});
223 | 		
224 | 		window.addEventListener('tawkChatMessageVisitor', (message) => {
225 | 			props.tawkOnChatMessageVisitor(message.detail);
226 | 		});
227 | 
228 | 		window.addEventListener('tawkChatMessageAgent', (message) => {
229 | 			props.tawkOnChatMessageAgent(message.detail);
230 | 		});
231 | 
232 | 		window.addEventListener('tawkChatMessageSystem', (message) => {
233 | 			props.tawkOnChatMessageSystem(message.detail);
234 | 		});
235 | 
236 | 		window.addEventListener('tawkAgentJoinChat', (data) => {
237 | 			props.tawkOnAgentJoinChat(data.detail);
238 | 		});
239 | 		
240 | 		window.addEventListener('tawkAgentLeaveChat', (data) => {
241 | 			props.tawkOnAgentLeaveChat(data.detail);
242 | 		});
243 | 
244 | 		window.addEventListener('tawkChatSatisfaction', (satisfaction) => {
245 | 			props.tawkOnChatSatisfaction(satisfaction.detail);
246 | 		});
247 | 		
248 | 		window.addEventListener('tawkVisitorNameChanged', (visitorName) => {
249 | 			props.tawkOnVisitorNameChanged(visitorName.detail);
250 | 		});
251 | 
252 | 		window.addEventListener('tawkFileUpload', (link) => {
253 | 			props.tawkOnFileUpload(link.detail);
254 | 		});
255 | 
256 | 		window.addEventListener('tawkTagsUpdated', (data) => {
257 | 			props.tawkOnTagsUpdated(data.detail);
258 | 		});
259 | 
260 | 		window.addEventListener('tawkUnreadCountChanged', (data) => {
261 | 			props.tawkOnUnreadCountChanged(data.detail);
262 | 		});
263 | 	};
264 | 
265 | 	return null;
266 | });
267 | 
268 | TawkMessenger.displayName = 'TawkMessenger';
269 | 
270 | TawkMessenger.defaultProps = {
271 | 	customStyle : null,
272 | 	embedId : '',
273 | 	basePath : 'tawk.to',
274 | 	tawkOnLoad : () => {},
275 | 	tawkOnStatusChange : () => {},
276 | 	tawkOnBeforeLoad : () => {},
277 | 	tawkOnChatMaximized : () => {},
278 | 	tawkOnChatMinimized : () => {},
279 | 	tawkOnChatHidden : () => {},
280 | 	tawkOnChatStarted : () => {},
281 | 	tawkOnChatEnded : () => {},
282 | 	tawkOnPrechatSubmit : () => {},
283 | 	tawkOnOfflineSubmit : () => {},
284 | 	tawkOnChatMessageVisitor : () => {},
285 | 	tawkOnChatMessageAgent : () => {},
286 | 	tawkOnChatMessageSystem : () => {},
287 | 	tawkOnAgentJoinChat : () => {},
288 | 	tawkOnAgentLeaveChat : () => {},
289 | 	tawkOnChatSatisfaction : () => {},
290 | 	tawkOnVisitorNameChanged : () => {},
291 | 	tawkOnFileUpload : () => {},
292 | 	tawkOnTagsUpdated : () => {},
293 | 	tawkOnUnreadCountChanged : () => {}
294 | };
295 | 
296 | 
297 | TawkMessenger.propTypes = {
298 | 	/**
299 | 	 * Default properties
300 | 	 */
301 | 	propertyId : PropTypes.string.isRequired,
302 | 	widgetId : PropTypes.string.isRequired,
303 | 
304 | 	/**
305 | 	 * Optional properties
306 | 	 */
307 | 	customStyle : PropTypes.object,
308 | 	embedId : PropTypes.string,
309 | 	basePath : PropTypes.string,
310 | 
311 | 	/**
312 | 	 * Callbacks
313 | 	 */
314 | 	tawkOnLoad : PropTypes.func,
315 | 	tawkOnStatusChange : PropTypes.func,
316 | 	tawkOnBeforeLoad : PropTypes.func,
317 | 	tawkOnChatMaximized : PropTypes.func,
318 | 	tawkOnChatMinimized : PropTypes.func,
319 | 	tawkOnChatHidden : PropTypes.func,
320 | 	tawkOnChatStarted : PropTypes.func,
321 | 	tawkOnChatEnded : PropTypes.func,
322 | 	tawkOnPrechatSubmit : PropTypes.func,
323 | 	tawkOnOfflineSubmit : PropTypes.func,
324 | 	tawkOnChatMessageVisitor : PropTypes.func,
325 | 	tawkOnChatMessageAgent : PropTypes.func,
326 | 	tawkOnChatMessageSystem : PropTypes.func,
327 | 	tawkOnAgentJoinChat : PropTypes.func,
328 | 	tawkOnAgentLeaveChat : PropTypes.func,
329 | 	tawkOnChatSatisfaction : PropTypes.func,
330 | 	tawkOnVisitorNameChanged : PropTypes.func,
331 | 	tawkOnFileUpload : PropTypes.func,
332 | 	tawkOnTagsUpdated : PropTypes.func,
333 | 	tawkOnUnreadCountChanged : PropTypes.func
334 | };
335 | 
336 | 
337 | export default TawkMessenger;


--------------------------------------------------------------------------------
/dist/tawk-messenger-react.es.js:
--------------------------------------------------------------------------------
  1 | import { forwardRef, useEffect, useImperativeHandle } from "react";
  2 | var propTypes = { exports: {} };
  3 | var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
  4 | var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
  5 | var ReactPropTypesSecret = ReactPropTypesSecret_1;
  6 | function emptyFunction() {
  7 | }
  8 | function emptyFunctionWithReset() {
  9 | }
 10 | emptyFunctionWithReset.resetWarningCache = emptyFunction;
 11 | var factoryWithThrowingShims = function() {
 12 |   function shim(props, propName, componentName, location, propFullName, secret) {
 13 |     if (secret === ReactPropTypesSecret) {
 14 |       return;
 15 |     }
 16 |     var err = new Error(
 17 |       "Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
 18 |     );
 19 |     err.name = "Invariant Violation";
 20 |     throw err;
 21 |   }
 22 |   shim.isRequired = shim;
 23 |   function getShim() {
 24 |     return shim;
 25 |   }
 26 |   var ReactPropTypes = {
 27 |     array: shim,
 28 |     bigint: shim,
 29 |     bool: shim,
 30 |     func: shim,
 31 |     number: shim,
 32 |     object: shim,
 33 |     string: shim,
 34 |     symbol: shim,
 35 |     any: shim,
 36 |     arrayOf: getShim,
 37 |     element: shim,
 38 |     elementType: shim,
 39 |     instanceOf: getShim,
 40 |     node: shim,
 41 |     objectOf: getShim,
 42 |     oneOf: getShim,
 43 |     oneOfType: getShim,
 44 |     shape: getShim,
 45 |     exact: getShim,
 46 |     checkPropTypes: emptyFunctionWithReset,
 47 |     resetWarningCache: emptyFunction
 48 |   };
 49 |   ReactPropTypes.PropTypes = ReactPropTypes;
 50 |   return ReactPropTypes;
 51 | };
 52 | {
 53 |   propTypes.exports = factoryWithThrowingShims();
 54 | }
 55 | var PropTypes = propTypes.exports;
 56 | const isValidString = (value) => {
 57 |   if (!value || value.length === 0) {
 58 |     return false;
 59 |   }
 60 |   return value !== null && value !== void 0 && typeof value === "string";
 61 | };
 62 | const loadScript = ({ propertyId = "", widgetId = "", embedId = "", basePath = "tawk.to", autoStart = true }) => {
 63 |   if (embedId.length) {
 64 |     if (!document.getElementById(embedId)) {
 65 |       const element = document.createElement("div");
 66 |       element.id = embedId;
 67 |       document.body.appendChild(element);
 68 |     }
 69 |     window.Tawk_API.embedded = embedId;
 70 |   }
 71 |   if (!autoStart) {
 72 |     window.Tawk_API.autoStart = autoStart;
 73 |   }
 74 |   const script = document.createElement("script");
 75 |   script.async = true;
 76 |   script.src = `https://embed.${basePath}/${propertyId}/${widgetId}`;
 77 |   script.charset = "UTF-8";
 78 |   script.setAttribute("crossorigin", "*");
 79 |   const firstScript = document.getElementsByTagName("script")[0];
 80 |   firstScript.parentNode.insertBefore(script, firstScript);
 81 | };
 82 | const TawkMessenger = forwardRef((props, ref) => {
 83 |   useEffect(() => {
 84 |     load();
 85 |   }, []);
 86 |   const load = () => {
 87 |     if (!isValidString(props.propertyId)) {
 88 |       console.error("[Tawk-messenger-react warn]: You didn't specified 'propertyId' property in the plugin.");
 89 |       return;
 90 |     }
 91 |     if (!isValidString(props.widgetId)) {
 92 |       console.error("[Tawk-messenger-react warn]: You didn't specified 'widgetId' property in the plugin.");
 93 |       return;
 94 |     }
 95 |     if (!window || !document) {
 96 |       return;
 97 |     }
 98 |     init();
 99 |   };
100 |   const init = () => {
101 |     window.Tawk_API = window.Tawk_API || {};
102 |     window.Tawk_LoadStart = new Date();
103 |     loadScript({
104 |       propertyId: props.propertyId,
105 |       widgetId: props.widgetId,
106 |       embedId: props.embedId,
107 |       basePath: props.basePath,
108 |       autoStart: props.autoStart
109 |     });
110 |     if (props.customStyle && typeof props.customStyle === "object") {
111 |       window.Tawk_API.customStyle = props.customStyle;
112 |     }
113 |     mapCallbacks();
114 |   };
115 |   useImperativeHandle(ref, () => ({
116 |     tawkStart: () => {
117 |       return window.Tawk_API.start();
118 |     },
119 |     tawkShutdown: () => {
120 |       return window.Tawk_API.shutdown();
121 |     },
122 |     tawkMaximize: () => {
123 |       return window.Tawk_API.maximize();
124 |     },
125 |     tawkMinimize: () => {
126 |       return window.Tawk_API.minimize();
127 |     },
128 |     tawkToggle: () => {
129 |       return window.Tawk_API.toggle();
130 |     },
131 |     tawkPopup: () => {
132 |       return window.Tawk_API.popup();
133 |     },
134 |     tawkShowWidget: () => {
135 |       return window.Tawk_API.showWidget();
136 |     },
137 |     tawkHideWidget: () => {
138 |       return window.Tawk_API.hideWidget();
139 |     },
140 |     tawkToggleVisibility: () => {
141 |       return window.Tawk_API.toggleVisibility();
142 |     },
143 |     tawkEndChat: () => {
144 |       return window.Tawk_API.endChat();
145 |     },
146 |     tawkGetWindowType: () => {
147 |       return window.Tawk_API.getWindowType();
148 |     },
149 |     tawkGetStatus: () => {
150 |       return window.Tawk_API.getStatus();
151 |     },
152 |     tawkIsChatMaximized: () => {
153 |       return window.Tawk_API.isChatMaximized();
154 |     },
155 |     tawkIsChatMinimized: () => {
156 |       return window.Tawk_API.isChatMinimized();
157 |     },
158 |     tawkIsChatHidden: () => {
159 |       return window.Tawk_API.isChatHidden();
160 |     },
161 |     tawkIsChatOngoing: () => {
162 |       return window.Tawk_API.isChatOngoing();
163 |     },
164 |     tawkIsVisitorEngaged: () => {
165 |       return window.Tawk_API.isVisitorEngaged();
166 |     },
167 |     tawkOnLoaded: () => {
168 |       return window.Tawk_API.onLoaded;
169 |     },
170 |     tawkOnBeforeLoaded: () => {
171 |       return window.Tawk_API.onBeforeLoaded;
172 |     },
173 |     tawkWidgetPosition: () => {
174 |       return window.Tawk_API.widgetPosition();
175 |     },
176 |     tawkVisitor: (data2) => {
177 |       window.Tawk_API.visitor = data2;
178 |     },
179 |     tawkSetAttributes: (attribute, callback) => {
180 |       window.Tawk_API.setAttributes(attribute, callback);
181 |     },
182 |     tawkAddEvent: (event, metadata, callback) => {
183 |       window.Tawk_API.addEvent(event, metadata, callback);
184 |     },
185 |     tawkAddTags: (tags, callback) => {
186 |       window.Tawk_API.addTags(tags, callback);
187 |     },
188 |     tawkRemoveTags: (tags, callback) => {
189 |       window.Tawk_API.removeTags(tags, callback);
190 |     },
191 |     tawkSwitchWidget: (options, callback) => {
192 |       window.Tawk_API.switchWidget(data, callback);
193 |     }
194 |   }));
195 |   const mapCallbacks = () => {
196 |     window.addEventListener("tawkLoad", () => {
197 |       props.tawkOnLoad();
198 |     });
199 |     window.addEventListener("tawkStatusChange", (status) => {
200 |       props.tawkOnStatusChange(status.detail);
201 |     });
202 |     window.addEventListener("tawkBeforeLoad", () => {
203 |       props.tawkOnBeforeLoad();
204 |     });
205 |     window.addEventListener("tawkChatMaximized", () => {
206 |       props.tawkOnChatMaximized();
207 |     });
208 |     window.addEventListener("tawkChatMinimized", () => {
209 |       props.tawkOnChatMinimized();
210 |     });
211 |     window.addEventListener("tawkChatHidden", () => {
212 |       props.tawkOnChatHidden();
213 |     });
214 |     window.addEventListener("tawkChatStarted", () => {
215 |       props.tawkOnChatStarted();
216 |     });
217 |     window.addEventListener("tawkChatEnded", () => {
218 |       props.tawkOnChatEnded();
219 |     });
220 |     window.addEventListener("tawkPrechatSubmit", (data2) => {
221 |       props.tawkOnPrechatSubmit(data2.detail);
222 |     });
223 |     window.addEventListener("tawkOfflineSubmit", (data2) => {
224 |       props.tawkOnOfflineSubmit(data2.detail);
225 |     });
226 |     window.addEventListener("tawkChatMessageVisitor", (message) => {
227 |       props.tawkOnChatMessageVisitor(message.detail);
228 |     });
229 |     window.addEventListener("tawkChatMessageAgent", (message) => {
230 |       props.tawkOnChatMessageAgent(message.detail);
231 |     });
232 |     window.addEventListener("tawkChatMessageSystem", (message) => {
233 |       props.tawkOnChatMessageSystem(message.detail);
234 |     });
235 |     window.addEventListener("tawkAgentJoinChat", (data2) => {
236 |       props.tawkOnAgentJoinChat(data2.detail);
237 |     });
238 |     window.addEventListener("tawkAgentLeaveChat", (data2) => {
239 |       props.tawkOnAgentLeaveChat(data2.detail);
240 |     });
241 |     window.addEventListener("tawkChatSatisfaction", (satisfaction) => {
242 |       props.tawkOnChatSatisfaction(satisfaction.detail);
243 |     });
244 |     window.addEventListener("tawkVisitorNameChanged", (visitorName) => {
245 |       props.tawkOnVisitorNameChanged(visitorName.detail);
246 |     });
247 |     window.addEventListener("tawkFileUpload", (link) => {
248 |       props.tawkOnFileUpload(link.detail);
249 |     });
250 |     window.addEventListener("tawkTagsUpdated", (data2) => {
251 |       props.tawkOnTagsUpdated(data2.detail);
252 |     });
253 |     window.addEventListener("tawkUnreadCountChanged", (data2) => {
254 |       props.tawkOnUnreadCountChanged(data2.detail);
255 |     });
256 |   };
257 |   return null;
258 | });
259 | TawkMessenger.displayName = "TawkMessenger";
260 | TawkMessenger.defaultProps = {
261 |   customStyle: null,
262 |   embedId: "",
263 |   basePath: "tawk.to",
264 |   tawkOnLoad: () => {
265 |   },
266 |   tawkOnStatusChange: () => {
267 |   },
268 |   tawkOnBeforeLoad: () => {
269 |   },
270 |   tawkOnChatMaximized: () => {
271 |   },
272 |   tawkOnChatMinimized: () => {
273 |   },
274 |   tawkOnChatHidden: () => {
275 |   },
276 |   tawkOnChatStarted: () => {
277 |   },
278 |   tawkOnChatEnded: () => {
279 |   },
280 |   tawkOnPrechatSubmit: () => {
281 |   },
282 |   tawkOnOfflineSubmit: () => {
283 |   },
284 |   tawkOnChatMessageVisitor: () => {
285 |   },
286 |   tawkOnChatMessageAgent: () => {
287 |   },
288 |   tawkOnChatMessageSystem: () => {
289 |   },
290 |   tawkOnAgentJoinChat: () => {
291 |   },
292 |   tawkOnAgentLeaveChat: () => {
293 |   },
294 |   tawkOnChatSatisfaction: () => {
295 |   },
296 |   tawkOnVisitorNameChanged: () => {
297 |   },
298 |   tawkOnFileUpload: () => {
299 |   },
300 |   tawkOnTagsUpdated: () => {
301 |   },
302 |   tawkOnUnreadCountChanged: () => {
303 |   }
304 | };
305 | TawkMessenger.propTypes = {
306 |   propertyId: PropTypes.string.isRequired,
307 |   widgetId: PropTypes.string.isRequired,
308 |   customStyle: PropTypes.object,
309 |   embedId: PropTypes.string,
310 |   basePath: PropTypes.string,
311 |   tawkOnLoad: PropTypes.func,
312 |   tawkOnStatusChange: PropTypes.func,
313 |   tawkOnBeforeLoad: PropTypes.func,
314 |   tawkOnChatMaximized: PropTypes.func,
315 |   tawkOnChatMinimized: PropTypes.func,
316 |   tawkOnChatHidden: PropTypes.func,
317 |   tawkOnChatStarted: PropTypes.func,
318 |   tawkOnChatEnded: PropTypes.func,
319 |   tawkOnPrechatSubmit: PropTypes.func,
320 |   tawkOnOfflineSubmit: PropTypes.func,
321 |   tawkOnChatMessageVisitor: PropTypes.func,
322 |   tawkOnChatMessageAgent: PropTypes.func,
323 |   tawkOnChatMessageSystem: PropTypes.func,
324 |   tawkOnAgentJoinChat: PropTypes.func,
325 |   tawkOnAgentLeaveChat: PropTypes.func,
326 |   tawkOnChatSatisfaction: PropTypes.func,
327 |   tawkOnVisitorNameChanged: PropTypes.func,
328 |   tawkOnFileUpload: PropTypes.func,
329 |   tawkOnTagsUpdated: PropTypes.func,
330 |   tawkOnUnreadCountChanged: PropTypes.func
331 | };
332 | export { TawkMessenger as default };
333 | 


--------------------------------------------------------------------------------
/docs/api-reference.md:
--------------------------------------------------------------------------------
   1 | # API Reference
   2 | Welcome to the [tawk.to](https://www.tawk.to) JavaScript API documentation.
   3 | 
   4 | The API provides a flexible set of methods that can be used in your web projects. To invoke one of
   5 | the methods below, please be sure to call a method after the embed code on your page.
   6 | 
   7 | Use the JavaScript API to manipulate the chat widget displayed on your website.
   8 | 
   9 | <br/>
  10 | 
  11 | ## Table of contents
  12 | - [API Reference](#api-reference)
  13 |   - [Table of contents](#table-of-contents)
  14 |   - [tawkOnLoad](#tawkonload)
  15 |   - [tawkOnStatusChange](#tawkonstatuschange)
  16 |   - [tawkOnBeforeLoad](#tawkonbeforeload)
  17 |   - [tawkOnChatMaximized](#tawkonchatmaximized)
  18 |   - [tawkOnChatMinimized](#tawkonchatminimized)
  19 |   - [tawkOnChatHidden](#tawkonchathidden)
  20 |   - [tawkOnChatStarted](#tawkonchatstarted)
  21 |   - [tawkOnChatEnded](#tawkonchatended)
  22 |   - [tawkOnPrechatSubmit](#tawkonprechatsubmit)
  23 |   - [tawkOnOfflineSubmit](#tawkonofflinesubmit)
  24 |   - [tawkOnChatMessageVisitor](#tawkonchatmessagevisitor)
  25 |   - [tawkOnChatMessageAgent](#tawkonchatmessageagent)
  26 |   - [tawkOnChatMessageSystem](#tawkonchatmessagesystem)
  27 |   - [tawkOnAgentJoinChat](#tawkonagentjoinchat)
  28 |   - [tawkOnAgentLeaveChat](#tawkonagentleavechat)
  29 |   - [tawkOnChatSatisfaction](#tawkonchatsatisfaction)
  30 |   - [tawkOnVisitorNameChanged](#tawkonvisitornamechanged)
  31 |   - [tawkOnFileUpload](#tawkonfileupload)
  32 |   - [tawkOnTagsUpdated](#tawkontagsupdated)
  33 |   - [tawkOnUnreadCountChanged](#tawkonunreadcountchanged)
  34 |   - [tawkOnLoaded](#tawkonloaded)
  35 |   - [tawkOnBeforeLoaded](#tawkonbeforeloaded)
  36 |   - [tawkWidgetPosition](#tawkwidgetposition)
  37 |   - [tawkVisitor](#tawkvisitor)
  38 |   - [autoStart](#autostart)
  39 |   - [tawkStart](#tawkstart)
  40 |   - [tawkShutdown](#tawkshutdown)
  41 |   - [tawkMaximize](#tawkmaximize)
  42 |   - [tawkMinimize](#tawkminimize)
  43 |   - [tawkToggle](#tawktoggle)
  44 |   - [tawkPopup](#tawkpopup)
  45 |   - [tawkGetWindowType](#tawkgetwindowtype)
  46 |   - [tawkShowWidget](#tawkshowwidget)
  47 |   - [tawkHideWidget](#tawkhidewidget)
  48 |   - [tawkToggleVisibility](#tawktogglevisibility)
  49 |   - [tawkGetStatus](#tawkgetstatus)
  50 |   - [tawkIsChatMaximized](#tawkischatmaximized)
  51 |   - [tawkIsChatMinimized](#tawkischatminimized)
  52 |   - [tawkIsChatHidden](#tawkischathidden)
  53 |   - [tawkIsChatOngoing](#tawkischatongoing)
  54 |   - [tawkIsVisitorEngaged](#tawkisvisitorengaged)
  55 |   - [tawkEndChat](#tawkendchat)
  56 |   - [tawkSetAttributes](#tawksetattributes)
  57 |   - [tawkAddEvent](#tawkaddevent)
  58 |   - [tawkAddTags](#tawkaddtags)
  59 |   - [tawkRemoveTags](#tawkremovetags)
  60 |   - [secureMode](#securemode)
  61 |   - [switchWidget](#switchwidget)
  62 |   - [customstyle](#customstyle)
  63 |     - [zIndex](#zindex)
  64 |     - [Visibility](#visibility)
  65 | 
  66 | <br/>
  67 | 
  68 | ## tawkOnLoad
  69 | Callback function invoked right after the widget is rendered. This callback is not supported in
  70 | pop out chat window.
  71 | 
  72 | ```js
  73 | function App() {
  74 |     const tawkOnLoad = () => {
  75 |         // place your code here
  76 |     }
  77 | 
  78 |     return (
  79 |         <div>
  80 |             <TawkMessengerReact
  81 |                 tawkOnLoad={tawkOnLoad}/>
  82 |         </div>
  83 |     );
  84 | }
  85 | ```
  86 | 
  87 | <br/>
  88 | 
  89 | ## tawkOnStatusChange
  90 | Callback function invoked when the page status changes. The function will receive the changed
  91 | status which will be either online, away or offline. This callback is not supported in pop out
  92 | chat window.
  93 | 
  94 | ```js
  95 | function App() {
  96 |     const tawkOnStatusChange = (status) => {
  97 |         // place your code here
  98 |     }
  99 | 
 100 |     return (
 101 |         <div>
 102 |             <TawkMessengerReact
 103 |                 tawkOnStatusChange={tawkOnStatusChange}/>
 104 |         </div>
 105 |     );
 106 | }
 107 | ```
 108 | 
 109 | <br/>
 110 | 
 111 | ## tawkOnBeforeLoad
 112 | Callback function invoked right when Tawk_API is ready to be used and before the widget is rendered.
 113 | This callback is not supported in pop out chat window.
 114 | 
 115 | ```js
 116 | function App() {
 117 |     const tawkOnBeforeLoad = () => {
 118 |         // place your code here
 119 |     }
 120 | 
 121 |     return (
 122 |         <div>
 123 |             <TawkMessengerReact
 124 |                 tawkOnBeforeLoad={tawkOnBeforeLoad}/>
 125 |         </div>
 126 |     );
 127 | }
 128 | ```
 129 | 
 130 | <br/>
 131 | 
 132 | ## tawkOnChatMaximized
 133 | Callback function invoked when the widget is maximized. This callback is not supported in pop out
 134 | chat window.
 135 | 
 136 | ```js
 137 | function App() {
 138 |     const tawkOnChatMaximized = () => {
 139 |         // place your code here
 140 |     }
 141 | 
 142 |     return (
 143 |         <div>
 144 |             <TawkMessengerReact
 145 |                 tawkOnChatMaximized={tawkOnChatMaximized}/>
 146 |         </div>
 147 |     );
 148 | }
 149 | ```
 150 | 
 151 | <br/>
 152 | 
 153 | ## tawkOnChatMinimized
 154 | Callback function invoked when the widget is minimized. This callback is not supported in pop out
 155 | chat window.
 156 | 
 157 | ```js
 158 | function App() {
 159 |     const tawkOnChatMinimized = () => {
 160 |         // place your code here
 161 |     }
 162 | 
 163 |     return (
 164 |         <div>
 165 |             <TawkMessengerReact
 166 |                 tawkOnChatMinimized={tawkOnChatMinimized}/>
 167 |         </div>
 168 |     );
 169 | }
 170 | ```
 171 | 
 172 | <br/>
 173 | 
 174 | ## tawkOnChatHidden
 175 | Callback function invoked when the widget is hidden. This callback is not supported in pop out chat
 176 | window.
 177 | 
 178 | ```js
 179 | function App() {
 180 |     const tawkOnChatHidden = () => {
 181 |         // place your code here
 182 |     }
 183 | 
 184 |     return (
 185 |         <div>
 186 |             <TawkMessengerReact
 187 |                 tawkOnChatHidden={tawkOnChatHidden}/>
 188 |         </div>
 189 |     );
 190 | }
 191 | ```
 192 | 
 193 | <br/>
 194 | 
 195 | ## tawkOnChatStarted
 196 | Callback function invoked when the widget is started.
 197 | 
 198 | ```js
 199 | function App() {
 200 |     const tawkOnChatStarted = () => {
 201 |         // place your code here
 202 |     }
 203 | 
 204 |     return (
 205 |         <div>
 206 |             <TawkMessengerReact
 207 |                 tawkOnChatStarted={tawkOnChatStarted}/>
 208 |         </div>
 209 |     );
 210 | }
 211 | ```
 212 | 
 213 | <br/>
 214 | 
 215 | ## tawkOnChatEnded
 216 | Callback function invoked when the widget is ended. This callback is not supported in pop out chat
 217 | window.
 218 | 
 219 | ```js
 220 | function App() {
 221 |     const tawkOnChatEnded = () => {
 222 |         // place your code here
 223 |     }
 224 | 
 225 |     return (
 226 |         <div>
 227 |             <TawkMessengerReact
 228 |                 tawkOnChatEnded={tawkOnChatEnded}/>
 229 |         </div>
 230 |     );
 231 | }
 232 | ```
 233 | 
 234 | <br/>
 235 | 
 236 | ## tawkOnPrechatSubmit
 237 | Callback function invoked when the Pre-Chat Form is submitted. The submitted form data is passed to
 238 | the function. This callback is not supported in pop out chat window.
 239 | 
 240 | ```js
 241 | function App() {
 242 |     const tawkOnPrechatSubmit = (data) => {
 243 |         // place your code here
 244 |     }
 245 | 
 246 |     return (
 247 |         <div>
 248 |             <TawkMessengerReact
 249 |                 tawkOnPrechatSubmit={tawkOnPrechatSubmit}/>
 250 |         </div>
 251 |     );
 252 | }
 253 | ```
 254 | 
 255 | <br/>
 256 | 
 257 | ## tawkOnOfflineSubmit
 258 | Callback function invoked when the Offline form is submitted. The submitted form data is passed to
 259 | the function. Form data will contain {name : ”, email : ”, message : ”, questions : []}. This
 260 | callback is not supported in pop out chat window.
 261 | 
 262 | ```js
 263 | function App() {
 264 |     const tawkOnOfflineSubmit = (data) => {
 265 |         // place your code here
 266 |     }
 267 | 
 268 |     return (
 269 |         <div>
 270 |             <TawkMessengerReact
 271 |                 tawkOnOfflineSubmit={tawkOnOfflineSubmit}/>
 272 |         </div>
 273 |     );
 274 | }
 275 | ```
 276 | 
 277 | <br/>
 278 | 
 279 | ## tawkOnChatMessageVisitor
 280 | Callback function invoked when message is sent by the visitor. The message is passed to the
 281 | function. This callback is not supported in pop out chat window.
 282 | 
 283 | ```js
 284 | function App() {
 285 |     const tawkOnChatMessageVisitor = (message) => {
 286 |         // place your code here
 287 |     }
 288 | 
 289 |     return (
 290 |         <div>
 291 |             <TawkMessengerReact
 292 |                 tawkOnChatMessageVisitor={tawkOnChatMessageVisitor}/>
 293 |         </div>
 294 |     );
 295 | }
 296 | ```
 297 | 
 298 | <br/>
 299 | 
 300 | ## tawkOnChatMessageAgent
 301 | Callback function invoked when message is sent by the agent. The message is passed to the function.
 302 | This callback is not supported in pop out chat window.
 303 | 
 304 | ```js
 305 | function App() {
 306 |     const tawkOnChatMessageAgent = (message) => {
 307 |         // place your code here
 308 |     }
 309 | 
 310 |     return (
 311 |         <div>
 312 |             <TawkMessengerReact
 313 |                 tawkOnChatMessageAgent={tawkOnChatMessageAgent}/>
 314 |         </div>
 315 |     );
 316 | }
 317 | ```
 318 | 
 319 | <br/>
 320 | 
 321 | ## tawkOnChatMessageSystem
 322 | Callback function invoked when message is sent by the system. The message is passed to the function.
 323 | This callback is not supported in pop out chat window.
 324 | 
 325 | ```js
 326 | function App() {
 327 |     const tawkOnChatMessageSystem = (message) => {
 328 |         // place your code here
 329 |     }
 330 | 
 331 |     return (
 332 |         <div>
 333 |             <TawkMessengerReact
 334 |                 tawkOnChatMessageSystem={tawkOnChatMessageSystem}/>
 335 |         </div>
 336 |     );
 337 | }
 338 | ```
 339 | 
 340 | <br/>
 341 | 
 342 | ## tawkOnAgentJoinChat
 343 | Callback function invoked when an agent joins the chat. The data is passed to the function. Will
 344 | contain {name : ”, position : ”, image : ”, id : ”}. This callback is not supported in pop out chat
 345 | window.
 346 | 
 347 | ```js
 348 | function App() {
 349 |     const tawkOnAgentJoinChat = (data) => {
 350 |         // place your code here
 351 |     }
 352 | 
 353 |     return (
 354 |         <div>
 355 |             <TawkMessengerReact
 356 |                 tawkOnAgentJoinChat={tawkOnAgentJoinChat}/>
 357 |         </div>
 358 |     );
 359 | }
 360 | ```
 361 | 
 362 | <br/>
 363 | 
 364 | ## tawkOnAgentLeaveChat
 365 | Callback function invoked when an agent leaves the chat. The data is passed to the function. Will
 366 | contain {name : ”, id : ”}. This callback is not supported in pop out chat window.
 367 | 
 368 | ```js
 369 | function App() {
 370 |     const tawkOnAgentLeaveChat = (data) => {
 371 |         // place your code here
 372 |     }
 373 | 
 374 |     return (
 375 |         <div>
 376 |             <TawkMessengerReact
 377 |                 tawkOnAgentLeaveChat={tawkOnAgentLeaveChat}/>
 378 |         </div>
 379 |     );
 380 | }
 381 | ```
 382 | 
 383 | <br/>
 384 | 
 385 | ## tawkOnChatSatisfaction
 386 | Callback function invoked when an agent leaves the chat. The satisfaction is passed to the function.
 387 | -1 = dislike | 0 = neutral | 1 = like. This callback is not supported in pop out chat window.
 388 | 
 389 | ```js
 390 | function App() {
 391 |     const tawkOnChatSatisfaction = (satisfaction) => {
 392 |         // place your code here
 393 |     }
 394 | 
 395 |     return (
 396 |         <div>
 397 |             <TawkMessengerReact
 398 |                 tawkOnChatSatisfaction={tawkOnChatSatisfaction}/>
 399 |         </div>
 400 |     );
 401 | }
 402 | ```
 403 | 
 404 | <br/>
 405 | 
 406 | ## tawkOnVisitorNameChanged
 407 | Callback function invoked when the visitor manually changes his name. The visitorName is passed to
 408 | the function. This callback is not supported in pop out chat window.
 409 | 
 410 | ```js
 411 | function App() {
 412 |     const tawkOnVisitorNameChanged = (visitorName) => {
 413 |         // place your code here
 414 |     }
 415 | 
 416 |     return (
 417 |         <div>
 418 |             <TawkMessengerReact
 419 |                 tawkOnVisitorNameChanged={tawkOnVisitorNameChanged}/>
 420 |         </div>
 421 |     );
 422 | }
 423 | ```
 424 | 
 425 | <br/>
 426 | 
 427 | ## tawkOnFileUpload
 428 | Callback function invoked when a file is uploaded. The link to the uploaded file is passed to the
 429 | function. This callback is not supported in pop out chat window.
 430 | 
 431 | ```js
 432 | function App() {
 433 |     const tawkOnFileUpload = (link) => {
 434 |         // place your code here
 435 |     }
 436 | 
 437 |     return (
 438 |         <div>
 439 |             <TawkMessengerReact
 440 |                 tawkOnFileUpload={tawkOnFileUpload}/>
 441 |         </div>
 442 |     );
 443 | }
 444 | ```
 445 | 
 446 | <br/>
 447 | 
 448 | ## tawkOnTagsUpdated
 449 | Callback function invoked when a tag is updated.
 450 | 
 451 | ```js
 452 | function App() {
 453 |     const tawkOnTagsUpdated = (data) => {
 454 |         // place your code here
 455 |     }
 456 | 
 457 |     return (
 458 |         <div>
 459 |             <TawkMessengerReact
 460 |                 tawkOnTagsUpdated={tawkOnTagsUpdated}/>
 461 |         </div>
 462 |     );
 463 | }
 464 | ```
 465 | 
 466 | <br/>
 467 | 
 468 | ## tawkOnUnreadCountChanged
 469 | Callback function invoked when active conversation unread count changed.
 470 | 
 471 | ```js
 472 | function App() {
 473 |     const tawkOnUnreadCountChanged = (count) => {
 474 |         // place your code here
 475 |     }
 476 | 
 477 |     return (
 478 |         <div>
 479 |             <TawkMessengerReact
 480 |                 tawkOnUnreadCountChanged={tawkOnUnreadCountChanged}/>
 481 |         </div>
 482 |     );
 483 | }
 484 | ```
 485 | 
 486 | <br/>
 487 | 
 488 | ## tawkOnLoaded
 489 | Returns a value (true or undefined) indicating when the plugin is ready.
 490 | 
 491 | ```js
 492 | tawkMessengerRef.current.tawkOnLoaded();
 493 | 
 494 | // Example
 495 | 
 496 | function App() {
 497 |     const tawkMessengerRef = useRef();
 498 | 
 499 |     const tawkOnLoad = () => {
 500 |         if (tawkMessengerRef.current.tawkOnLoaded()) {
 501 |             // do something before loaded
 502 |         }
 503 |     };
 504 | 
 505 |     return (
 506 |         <div>
 507 |             <TawkMessengerReact
 508 |                 tawkOnLoad={tawkOnLoad}
 509 |                 ref={tawkMessengerRef}/>
 510 |         </div>
 511 |     );
 512 | }
 513 | ```
 514 | 
 515 | <br/>
 516 | 
 517 | ## tawkOnBeforeLoaded
 518 | Returns a value (true of undefined) indicating when plugin is initialized.
 519 | 
 520 | ```js
 521 | tawkMessengerRef.current.tawkOnBeforeLoaded();
 522 | 
 523 | // Example
 524 | 
 525 | function App() {
 526 |     const tawkMessengerRef = useRef();
 527 | 
 528 |     const tawkOnLoad = () => {
 529 |         if (tawkMessengerRef.current.tawkOnBeforeLoaded()) {
 530 |             // do something before loaded
 531 |         }
 532 |     };
 533 | 
 534 |     return (
 535 |         <div>
 536 |             <TawkMessengerReact
 537 |                 tawkOnLoad={tawkOnLoad}
 538 |                 ref={tawkMessengerRef}/>
 539 |         </div>
 540 |     );
 541 | }
 542 | ```
 543 | 
 544 | <br/>
 545 | 
 546 | ## tawkWidgetPosition
 547 | Returns a string for current position of the widget.
 548 | 
 549 | ```js
 550 | tawkMessengerRef.current.tawkWidgetPosition();
 551 | 
 552 | // Example
 553 | 
 554 | function App() {
 555 |     const tawkMessengerRef = useRef();
 556 | 
 557 |     const tawkOnLoad = () => {
 558 |         if (tawkMessengerRef.current.tawkWidgetPosition() === 'br') {
 559 |             // do something if the widget is at bottom right
 560 |         }
 561 |     };
 562 | 
 563 |     return (
 564 |         <div>
 565 |             <TawkMessengerReact
 566 |                 tawkOnLoad={tawkOnLoad}
 567 |                 ref={tawkMessengerRef}/>
 568 |         </div>
 569 |     );
 570 | }
 571 | ```
 572 | 
 573 | <br/>
 574 | 
 575 | ## tawkVisitor
 576 | Object used to set the visitor name and email. Do not place this object in a function, as the
 577 | values need to be available before the widget script is downloaded.
 578 | 
 579 | Setting or changing the values after the widget script has been downloaded will not send the
 580 | values to the dashboard.
 581 | 
 582 | If the name and email will not be available on load time (eg single page app, ajax login), then
 583 | use the [setAttributes](#setAttributes) function instead.
 584 | 
 585 | ```js
 586 | tawkMessengerRef.current.tawkVisitor({
 587 |     name : 'name',
 588 |     email : 'email@email.com'
 589 | });
 590 | 
 591 | // Example
 592 | 
 593 | function App() {
 594 |     const tawkMessengerRef = useRef();
 595 | 
 596 |     const tawkOnLoad = () => {
 597 |         tawkMessengerRef.current.tawkVisitor({
 598 |             name : 'name',
 599 |             email : 'email@email.com'
 600 |         });
 601 |     };
 602 | 
 603 |     return (
 604 |         <div>
 605 |             <TawkMessengerReact
 606 |                 tawkOnLoad={tawkOnLoad}
 607 |                 ref={tawkMessengerRef}/>
 608 |         </div>
 609 |     );
 610 | }
 611 | ```
 612 | 
 613 | <br/>
 614 | 
 615 | ## autoStart
 616 | If set to true, it will auto-start the Tawk socket connection for chat services. If set to false,
 617 | you will need to manually call the start API. It will not register and connect to the dashboard
 618 | if this is set to false.
 619 | 
 620 | ```js
 621 | import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
 622 | 
 623 | function App() {
 624 |     return (
 625 |         <div className="App">
 626 |             <TawkMessengerReact
 627 |                 propertyId="property_id"
 628 |                 widgetId="default"
 629 |                 autoStart={false}/>
 630 |         </div>
 631 |     );
 632 | }
 633 | ```
 634 | 
 635 | <br/>
 636 | 
 637 | ## tawkStart
 638 | Start the tawk socket connection.
 639 | 
 640 | ```js
 641 | tawkMessengerRef.current.start();
 642 | 
 643 | // Example
 644 | 
 645 | function App() {
 646 |     const tawkMessengerRef = useRef();
 647 | 
 648 |     const startTawk = () => {
 649 |         tawkMessengerRef.current.start();
 650 |     };
 651 | 
 652 |     return (
 653 |         <div>
 654 |             <TawkMessengerReact
 655 |                 ref={tawkMessengerRef}/>
 656 |         </div>
 657 |     );
 658 | }
 659 | ```
 660 | 
 661 | <br/>
 662 | 
 663 | ## tawkShutdown
 664 | End the tawk socket connection.
 665 | 
 666 | ```js
 667 | tawkMessengerRef.current.shutdown();
 668 | 
 669 | // Example
 670 | 
 671 | function App() {
 672 |     const tawkMessengerRef = useRef();
 673 | 
 674 |     const shutdownTawk = () => {
 675 |         tawkMessengerRef.current.shutdown();
 676 |     };
 677 | 
 678 |     return (
 679 |         <div>
 680 |             <TawkMessengerReact
 681 |                 ref={tawkMessengerRef}/>
 682 |         </div>
 683 |     );
 684 | }
 685 | ```
 686 | 
 687 | <br/>
 688 | 
 689 | ## tawkMaximize
 690 | Maximizes the chat widget.
 691 | 
 692 | ```js
 693 | tawkMessengerRef.current.tawkMaximize();
 694 | 
 695 | // Example
 696 | 
 697 | function App() {
 698 |     const tawkMessengerRef = useRef();
 699 | 
 700 |     const tawkOnLoad = () => {
 701 |         tawkMessengerRef.current.tawkMaximize();
 702 |     };
 703 | 
 704 |     return (
 705 |         <div>
 706 |             <TawkMessengerReact
 707 |                 tawkOnLoad={tawkOnLoad}
 708 |                 ref={tawkMessengerRef}/>
 709 |         </div>
 710 |     );
 711 | }
 712 | ```
 713 | 
 714 | <br/>
 715 | 
 716 | ## tawkMinimize
 717 | Minimizes the chat widget.
 718 | 
 719 | ```js
 720 | tawkMessengerRef.current.tawkMinimize();
 721 | 
 722 | // Example
 723 | 
 724 | function App() {
 725 |     const tawkMessengerRef = useRef();
 726 | 
 727 |     const tawkOnLoad = () => {
 728 |         tawkMessengerRef.current.tawkMinimize();
 729 |     };
 730 | 
 731 |     return (
 732 |         <div>
 733 |             <TawkMessengerReact
 734 |                 tawkOnLoad={tawkOnLoad}
 735 |                 ref={tawkMessengerRef}/>
 736 |         </div>
 737 |     );
 738 | }
 739 | ```
 740 | 
 741 | <br/>
 742 | 
 743 | ## tawkToggle
 744 | Minimizes or Maximizes the chat widget based on the current state.
 745 | 
 746 | ```js
 747 | tawkMessengerRef.current.tawkToggle();
 748 | 
 749 | // Example
 750 | 
 751 | function App() {
 752 |     const tawkMessengerRef = useRef();
 753 | 
 754 |     const tawkOnLoad = () => {
 755 |         tawkMessengerRef.current.tawkToggle();
 756 |     };
 757 | 
 758 |     return (
 759 |         <div>
 760 |             <TawkMessengerReact
 761 |                 tawkOnLoad={tawkOnLoad}
 762 |                 ref={tawkMessengerRef}/>
 763 |         </div>
 764 |     );
 765 | }
 766 | ```
 767 | 
 768 | <br/>
 769 | 
 770 | ## tawkPopup
 771 | Opens the chat widget as a pop out.
 772 | 
 773 | ```js
 774 | tawkMessengerRef.current.tawkPopup();
 775 | 
 776 | // Example
 777 | 
 778 | function App() {
 779 |     const tawkMessengerRef = useRef();
 780 | 
 781 |     const tawkOnLoad = () => {
 782 |         tawkMessengerRef.current.tawkPopup();
 783 |     };
 784 | 
 785 |     return (
 786 |         <div>
 787 |             <TawkMessengerReact
 788 |                 tawkOnLoad={tawkOnLoad}
 789 |                 ref={tawkMessengerRef}/>
 790 |         </div>
 791 |     );
 792 | }
 793 | ```
 794 | 
 795 | <br/>
 796 | 
 797 | ## tawkGetWindowType
 798 | Returns the current widget type whether it’s inline or embed.
 799 | 
 800 | ```js
 801 | tawkMessengerRef.current.tawkGetWindowType();
 802 | 
 803 | // Example
 804 | 
 805 | function App() {
 806 |     const tawkMessengerRef = useRef();
 807 | 
 808 |     const tawkOnLoad = () => {
 809 |         if (tawkMessengerRef.current.tawkGetWindowType() === 'inline') {
 810 |             // do something if it's inline
 811 |         } else {
 812 |             // do something if it's embed
 813 |         }
 814 |     };
 815 | 
 816 |     return (
 817 |         <div>
 818 |             <TawkMessengerReact
 819 |                 tawkOnLoad={tawkOnLoad}
 820 |                 ref={tawkMessengerRef}/>
 821 |         </div>
 822 |     );
 823 | }
 824 | ```
 825 | 
 826 | <br/>
 827 | 
 828 | ## tawkShowWidget
 829 | Shows the chat widget.
 830 | 
 831 | ```js
 832 | tawkMessengerRef.current.tawkShowWidget();
 833 | 
 834 | // Example
 835 | 
 836 | function App() {
 837 |     const tawkMessengerRef = useRef();
 838 | 
 839 |     const tawkOnLoad = () => {
 840 |         tawkMessengerRef.current.tawkShowWidget();
 841 |     };
 842 | 
 843 |     return (
 844 |         <div>
 845 |             <TawkMessengerReact
 846 |                 tawkOnLoad={tawkOnLoad}
 847 |                 ref={tawkMessengerRef}/>
 848 |         </div>
 849 |     );
 850 | }
 851 | ```
 852 | 
 853 | <br/>
 854 | 
 855 | ## tawkHideWidget
 856 | Hide the chat widget.
 857 | 
 858 | ```js
 859 | tawkMessengerRef.current.tawkHideWidget();
 860 | 
 861 | // Example
 862 | 
 863 | function App() {
 864 |     const tawkMessengerRef = useRef();
 865 | 
 866 |     const tawkOnLoad = () => {
 867 |         tawkMessengerRef.current.tawkHideWidget();
 868 |     };
 869 | 
 870 |     return (
 871 |         <div>
 872 |             <TawkMessengerReact
 873 |                 tawkOnLoad={tawkOnLoad}
 874 |                 ref={tawkMessengerRef}/>
 875 |         </div>
 876 |     );
 877 | }
 878 | ```
 879 | 
 880 | <br/>
 881 | 
 882 | ## tawkToggleVisibility
 883 | Hides or Shows the chat widget based on the current visibility state.
 884 | 
 885 | ```js
 886 | tawkMessengerRef.current.tawkToggleVisibility();
 887 | 
 888 | // Example
 889 | 
 890 | function App() {
 891 |     const tawkMessengerRef = useRef();
 892 | 
 893 |     const tawkOnLoad = () => {
 894 |         tawkMessengerRef.current.tawkToggleVisibility();
 895 |     };
 896 | 
 897 |     return (
 898 |         <div>
 899 |             <TawkMessengerReact
 900 |                 tawkOnLoad={tawkOnLoad}
 901 |                 ref={tawkMessengerRef}/>
 902 |         </div>
 903 |     );
 904 | }
 905 | ```
 906 | 
 907 | <br/>
 908 | 
 909 | ## tawkGetStatus
 910 | Returns the current page status (online, away or offline).
 911 | 
 912 | ```js
 913 | tawkMessengerRef.current.tawkGetStatus();
 914 | 
 915 | // Example
 916 | 
 917 | function App() {
 918 |     const tawkMessengerRef = useRef();
 919 | 
 920 |     const tawkOnLoad = () => {
 921 |         const pageStatus = tawkMessengerRef.current.tawkGetStatus();
 922 | 
 923 |         if (pageStatus === 'online') {
 924 |             // do something for online
 925 |         } else if (pageStatus === 'away') {
 926 |             // do something for away
 927 |         } else {
 928 |             // do something for offline
 929 |         }
 930 |     };
 931 | 
 932 |     return (
 933 |         <div>
 934 |             <TawkMessengerReact
 935 |                 tawkOnLoad={tawkOnLoad}
 936 |                 ref={tawkMessengerRef}/>
 937 |         </div>
 938 |     );
 939 | }
 940 | ```
 941 | 
 942 | <br/>
 943 | 
 944 | ## tawkIsChatMaximized
 945 | Returns a boolean value (true or false) indicating whether the chat widget is maximized.
 946 | 
 947 | ```js
 948 | tawkMessengerRef.current.tawkIsChatMaximized();
 949 | 
 950 | // Example
 951 | 
 952 | function App() {
 953 |     const tawkMessengerRef = useRef();
 954 | 
 955 |     const tawkOnLoad = () => {
 956 |         if (tawkMessengerRef.current.tawkIsChatMaximized()) {
 957 |             // do something if it's maximized
 958 |         }
 959 |     };
 960 | 
 961 |     return (
 962 |         <div>
 963 |             <TawkMessengerReact
 964 |                 tawkOnLoad={tawkOnLoad}
 965 |                 ref={tawkMessengerRef}/>
 966 |         </div>
 967 |     );
 968 | }
 969 | ```
 970 | 
 971 | <br/>
 972 | 
 973 | ## tawkIsChatMinimized
 974 | Returns a boolean value (true or false) indicating whether the chat widget is minimized.
 975 | 
 976 | ```js
 977 | tawkMessengerRef.current.tawkIsChatMinimized();
 978 | 
 979 | // Example
 980 | 
 981 | function App() {
 982 |     const tawkMessengerRef = useRef();
 983 | 
 984 |     const tawkOnLoad = () => {
 985 |         if (tawkMessengerRef.current.tawkIsChatMinimized()) {
 986 |             // do something if it's minimized
 987 |         }
 988 |     };
 989 | 
 990 |     return (
 991 |         <div>
 992 |             <TawkMessengerReact
 993 |                 tawkOnLoad={tawkOnLoad}
 994 |                 ref={tawkMessengerRef}/>
 995 |         </div>
 996 |     );
 997 | }
 998 | ```
 999 | 
1000 | <br/>
1001 | 
1002 | ## tawkIsChatHidden
1003 | Returns a boolean value (true or false) indicating whether the chat widget is hidden.
1004 | 
1005 | ```js
1006 | tawkMessengerRef.current.tawkIsChatHidden();
1007 | 
1008 | // Example
1009 | 
1010 | function App() {
1011 |     const tawkMessengerRef = useRef();
1012 | 
1013 |     const tawkOnLoad = () => {
1014 |         if (tawkMessengerRef.current.tawkIsChatHidden()) {
1015 |             // do something if chat widget is hidden
1016 |         }
1017 |     };
1018 | 
1019 |     return (
1020 |         <div>
1021 |             <TawkMessengerReact
1022 |                 tawkOnLoad={tawkOnLoad}
1023 |                 ref={tawkMessengerRef}/>
1024 |         </div>
1025 |     );
1026 | }
1027 | ```
1028 | 
1029 | <br/>
1030 | 
1031 | ## tawkIsChatOngoing
1032 | Returns a boolean value (true or false) indicating whether currently there is an ongoing chat.
1033 | 
1034 | ```js
1035 | tawkMessengerRef.current.tawkIsChatOngoing();
1036 | 
1037 | // Example
1038 | 
1039 | function App() {
1040 |     const tawkMessengerRef = useRef();
1041 | 
1042 |     const tawkOnLoad = () => {
1043 |         if (tawkMessengerRef.current.tawkIsChatOngoing()) {
1044 |             // do something if there's ongoing chat
1045 |         }
1046 |     };
1047 | 
1048 |     return (
1049 |         <div>
1050 |             <TawkMessengerReact
1051 |                 tawkOnLoad={tawkOnLoad}
1052 |                 ref={tawkMessengerRef}/>
1053 |         </div>
1054 |     );
1055 | }
1056 | ```
1057 | 
1058 | <br/>
1059 | 
1060 | ## tawkIsVisitorEngaged
1061 | Returns a boolean value (true or false) indicating whether the visitor is currently chatting or has
1062 | requested a chat.
1063 | 
1064 | ```js
1065 | tawkMessengerRef.current.tawkIsVisitorEngaged();
1066 | 
1067 | // Example
1068 | 
1069 | function App() {
1070 |     const tawkMessengerRef = useRef();
1071 | 
1072 |     const tawkOnLoad = () => {
1073 |         if (tawkMessengerRef.current.tawkIsVisitorEngaged()) {
1074 |             // do something if visitor engaged in chat
1075 |         }
1076 |     };
1077 | 
1078 |     return (
1079 |         <div>
1080 |             <TawkMessengerReact
1081 |                 tawkOnLoad={tawkOnLoad}
1082 |                 ref={tawkMessengerRef}/>
1083 |         </div>
1084 |     );
1085 | }
1086 | ```
1087 | 
1088 | <br/>
1089 | 
1090 | ## tawkEndChat
1091 | Ends the current ongoing chat.
1092 | 
1093 | ```js
1094 | tawkMessengerRef.current.tawkEndChat();
1095 | 
1096 | // Example
1097 | 
1098 | function App() {
1099 |     const tawkMessengerRef = useRef();
1100 | 
1101 |     const tawkOnLoad = () => {
1102 |         tawkMessengerRef.current.tawkEndChat();
1103 |     };
1104 | 
1105 |     return (
1106 |         <div>
1107 |             <TawkMessengerReact
1108 |                 tawkOnLoad={tawkOnLoad}
1109 |                 ref={tawkMessengerRef}/>
1110 |         </div>
1111 |     );
1112 | }
1113 | ```
1114 | 
1115 | <br/>
1116 | 
1117 | ## tawkSetAttributes
1118 | Set custom metadata regarding this chat/visitor.
1119 | 
1120 | This function takes in two values: attribute and callback.
1121 | 
1122 | The attribute value is of the object data type, which is a key value pair.
1123 | 
1124 | The key is of the string data type and can contain only alphanumeric characters and ‘-‘ (dash).
1125 | 
1126 | You can also use this function to set the visitor name and email. However, you will need to enable
1127 | the secure mode first and also supply the calculated hash value in this function.
1128 | 
1129 | Refer to the secure mode section below on how to do this.
1130 | 
1131 | The reason it needs to be in [secure mode](#securemode) is to ensure data integrity — to ensure the
1132 | value sent from the widget to the dashboard is true and has not been tampered with.
1133 | 
1134 | The callback, which is a function, will be invoked to notify whether the save failed.
1135 | 
1136 | Error messages returned:
1137 | 
1138 | 1. INVALID_ATTRIBUTES: No attributes were sent
1139 | 1. SESSION_EXPIRED: The visitor’s current session has expired
1140 | 1. SERVER_ERROR: Internal server error
1141 | 1. ACCESS_ERROR: Error in accessing the page
1142 | 1. ATTRIBUTE_LIMIT_EXCEEDED: Total custom attributes (excluding name, email and hash) is 50
1143 | 1. CONTAINS_INVALID_KEY: Custom key is not alphanumeric or dash (keys will be lower case)
1144 | 1. CONTAINS_INVALID_VALUE: Custom value is empty or the total length is more than 255 characters
1145 | 
1146 | ```js
1147 | tawkMessengerRef.current.tawkSetAttributes(attributes, callback);
1148 | 
1149 | // Example
1150 | 
1151 | function App() {
1152 |     const tawkMessengerRef = useRef();
1153 | 
1154 |     const tawkOnLoad = () => {
1155 |         tawkMessengerRef.current.tawkSetAttributes({
1156 |             id : 'A1234',
1157 |             store : 'Midvalley'
1158 |         }, function(error) {
1159 |             // do something if error
1160 |         });
1161 | 
1162 |         // Example for setting name and email
1163 | 
1164 |         tawkMessengerRef.current.setAttributes({
1165 |             name : 'name',
1166 |             store : 'name@email.com',
1167 |             hash : 'has value'
1168 |         }, function(error) {
1169 |             // do something if error
1170 |         });
1171 |     };
1172 | 
1173 |     return (
1174 |         <div>
1175 |             <TawkMessengerReact
1176 |                 tawkOnLoad={tawkOnLoad}
1177 |                 ref={tawkMessengerRef}/>
1178 |         </div>
1179 |     );
1180 | }
1181 | ```
1182 | 
1183 | <br/>
1184 | 
1185 | ## tawkAddEvent
1186 | Set a custom event to chat.
1187 | This function takes in 3 values: event name, optional metadata and callback.
1188 | 
1189 | The event name is of the string data type and can contain only alphanumeric characters and ‘-‘ (dash)
1190 | 
1191 | The callback which is a function will be invoked to notify whether the save failed.
1192 | 
1193 | INVALID_EVENT_NAME, INVALID_ATTRIBUTES, ATTRIBUTE_LIMIT_EXCEEDED, CONTAINS_INVALID_KEY,
1194 | CONTAINS_INVALID_VALUE, SESSION_EXPIRED, SERVER_ERROR
1195 | 
1196 | ```js
1197 | tawkMessengerRef.current.tawkAddEvent(eventName, metaData, callback);
1198 | 
1199 | // Example
1200 | 
1201 | function App() {
1202 |     const tawkMessengerRef = useRef();
1203 | 
1204 |     const tawkOnLoad = () => {
1205 |         tawkMessengerRef.current.tawkAddEvent(
1206 |             'requested-quotation',
1207 |             function(error) {
1208 |                 // do something if error
1209 |             }
1210 |         );
1211 | 
1212 |         // Example with metadata
1213 | 
1214 |         tawkMessengerRef.current.tawkAddEvent(
1215 |             'requested-quotation',
1216 |             {
1217 |                 sku : 'A0012',
1218 |                 name : 'Jeans',
1219 |                 price : '50'
1220 |             }
1221 |             function(error) {
1222 |                 // do something if error
1223 |             }
1224 |         );
1225 |     };
1226 | 
1227 |     return (
1228 |         <div>
1229 |             <TawkMessengerReact
1230 |                 tawkOnLoad={tawkOnLoad}
1231 |                 ref={tawkMessengerRef}/>
1232 |         </div>
1233 |     );
1234 | }
1235 | ```
1236 | 
1237 | <br/>
1238 | 
1239 | ## tawkAddTags
1240 | Add tags to the chat.
1241 | This function takes in two values; tags and callback.
1242 | This is of the array data type.
1243 | The content of the tags should be of the string data type.
1244 | 
1245 | The total number of tags is 10.
1246 | The callback, which is a function, will be invoked to notify whether the save failed.
1247 | 
1248 | INVALID_TAGS, TAG_LIMIT_EXCEEDED, VERSION_CONFLICT, SESSION_EXPIRED, SERVER_ERROR
1249 | 
1250 | ```js
1251 | tawkMessengerRef.current.tawkAddTags(tags, callback);
1252 | 
1253 | // Example
1254 | 
1255 | function App() {
1256 |     const tawkMessengerRef = useRef();
1257 | 
1258 |     const tawkOnLoad = () => {
1259 |         tawkMessengerRef.current.tawkAddTags(
1260 |             [
1261 |                 'hello',
1262 |                 'world'
1263 |             ],
1264 |             function(error) {
1265 |                 // do something if error
1266 |             }
1267 |         );
1268 |     };
1269 | 
1270 |     return (
1271 |         <div>
1272 |             <TawkMessengerReact
1273 |                 tawkOnLoad={tawkOnLoad}
1274 |                 ref={tawkMessengerRef}/>
1275 |         </div>
1276 |     );
1277 | }
1278 | ```
1279 | 
1280 | <br/>
1281 | 
1282 | ## tawkRemoveTags
1283 | Remove tags from the chat.
1284 | This function takes in two values: tags and callback.
1285 | This is of the array data type.
1286 | The content of the tags should be of the string data type.
1287 | 
1288 | The callback, which is a function, will be invoked to notify whether the save failed.
1289 | 
1290 | INVALID_TAGS, TAG_LIMIT_EXCEEDED, SESSION_EXPIRED, SERVER_ERROR
1291 | 
1292 | ```js
1293 | tawkMessengerRef.current.tawkRemoveTags(tags, callback);
1294 | 
1295 | // Example
1296 | 
1297 | function App() {
1298 |     const tawkMessengerRef = useRef();
1299 | 
1300 |     const tawkOnLoad = () => {
1301 |         tawkMessengerRef.current.tawkRemoveTags(
1302 |             [
1303 |                 'hello',
1304 |                 'world'
1305 |             ],
1306 |             function(error) {
1307 |                 // do something if error
1308 |             }
1309 |         );
1310 |     };
1311 | 
1312 |     return (
1313 |         <div>
1314 |             <TawkMessengerReact
1315 |                 tawkOnLoad={tawkOnLoad}
1316 |                 ref={tawkMessengerRef}/>
1317 |         </div>
1318 |     );
1319 | }
1320 | ```
1321 | 
1322 | <br/>
1323 | 
1324 | ## secureMode
1325 | Secure method is to ensure the data you are sending is actually from you.
1326 | 
1327 | To enable secure mode, embed following code on your page.
1328 | 
1329 | The hash is server side generated HMAC using SHA256, the user’s email and your site’s API key.
1330 | 
1331 | You can get your API key from **Admin>Property Settings**.
1332 | 
1333 | ```js
1334 | tawkMessengerRef.current.visitor({
1335 |     name : 'name',
1336 |     email : 'email@email.com'
1337 |     hash : '<calculate-hash>'
1338 | });
1339 | ```
1340 | 
1341 | ## switchWidget
1342 | Disconnect the current widget connection, logout if it has existing user login and switch to
1343 | another widget.
1344 | 
1345 | ```js
1346 | tawkMessengerRef.current.switchWidget(options);
1347 | 
1348 | // Example
1349 | 
1350 | function App() {
1351 |     const tawkMessengerRef = useRef();
1352 | 
1353 |     const onLoad = () => {
1354 |         tawkMessengerRef.current.switchWidget({
1355 |             propertyId ; 'property_id',
1356 |             widgetId : 'widget_id'
1357 |         }, function() {
1358 |             // do something
1359 |         });
1360 |     };
1361 | 
1362 |     return (
1363 |         <div>
1364 |             <TawkMessengerReact
1365 |                 onLoad={onLoad}
1366 |                 ref={tawkMessengerRef}/>
1367 |         </div>
1368 |     );
1369 | }
1370 | ```
1371 | 
1372 | ## customstyle
1373 | Object used to update the widget styling. Currently only supports zIndex style. Do not place this
1374 | object in a function, as the values need to be available before the widget script is downloaded.
1375 | Setting or changing the values after the widget script has been downloaded will not update the
1376 | widget’s style.
1377 | 
1378 | ### zIndex
1379 | ```js
1380 | <TawkMessengerReact
1381 |     customStyle={{ zIndex : Integer | String }}/>
1382 | 
1383 | // Example
1384 | 
1385 | function App() {
1386 |     return (
1387 |         <div>
1388 |             <TawkMessengerReact
1389 |                 customStyle={{ zIndex : 1000 }}/>
1390 |         </div>
1391 |     );
1392 | }
1393 | 
1394 | function App() {
1395 |     return (
1396 |         <div>
1397 |             <TawkMessengerReact
1398 |                 customStyle={{ zIndex : '1000' }}/>
1399 |         </div>
1400 |     );
1401 | }
1402 | 
1403 | function App() {
1404 |     return (
1405 |         <div>
1406 |             <TawkMessengerReact
1407 |                 customStyle={{ zIndex : '1000 !important' }}/>
1408 |         </div>
1409 |     );
1410 | }
1411 | ```
1412 | 
1413 | <br/>
1414 | 
1415 | ### Visibility
1416 | ```js
1417 | const customStyle = {
1418 |     visibility : {
1419 |         desktop : {
1420 |             xOffset : String | Integer, // '20' || 20
1421 |             yOffset : String | Integer,
1422 |             position : '' // 'br', 'bl', 'cr', 'cl', 'tr', 'tl'
1423 |         },
1424 | 
1425 |         mobile : {
1426 |             xOffset : String | Integer, // '20' || 20
1427 |             yOffset : String | Integer,
1428 |             position : '' // 'br', 'bl', 'cr', 'cl', 'tr', 'tl'
1429 |         }
1430 |     }
1431 | };
1432 | 
1433 | return (
1434 |     <TawkMessengerReact
1435 |         customStyle={ customStyle }/>
1436 | );
1437 | 
1438 | // Example
1439 | 
1440 | const customStyle = {
1441 |     visibility : {
1442 |         desktop : {
1443 |             xOffset : '15',
1444 |             yOffset : '15',
1445 |             position : 'cr'
1446 |         },
1447 | 
1448 |         mobile : {
1449 |             xOffset : 15,
1450 |             yOffset : 15,
1451 |             position : 'bl'
1452 |         }
1453 |     }
1454 | };
1455 | 
1456 | return (
1457 |     <TawkMessengerReact
1458 |         customStyle={ customStyle }/>
1459 | );
1460 | ```


--------------------------------------------------------------------------------