Tawk-860rywc83-new-api-for-connections

docs/api-reference.md

@@ -9,7 +9,6 @@ Use the JavaScript API to manipulate the chat widget displayed on your website.
 <br/>
 
 ## Table of contents
-<<<<<<< HEAD
 - [API Reference](#api-reference)
   - [Table of contents](#table-of-contents)
   - [onLoad](#onload)
@@ -36,6 +35,9 @@ Use the JavaScript API to manipulate the chat widget displayed on your website.
   - [onBeforeLoaded](#onbeforeloaded)
   - [widgetPosition](#widgetposition)
   - [visitor](#visitor)
+  - [autoStart](#autostart)
+  - [start](#start)
+  - [shutdown](#shutdown)
   - [maximize](#maximize)
   - [minimize](#minimize)
   - [toggle](#toggle)
@@ -60,7 +62,6 @@ Use the JavaScript API to manipulate the chat widget displayed on your website.
   - [customstyle](#customstyle)
     - [zIndex](#zindex)
     - [Visibility](#visibility)
->>>>>>> main
 
 <br/>
 
@@ -611,6 +612,80 @@ function App() {
 
 <br/>
 
+## autoStart
+If set to true, it will auto-start the Tawk socket connection for chat services. If set to false,
+you will need to manually call the start API. It will not register and connect to the dashboard
+if this is set to false.
+
+```js
+import TawkMessengerReact from '@tawk.to/tawk-messenger-react';
+
+function App() {
+    return (
+        <div className="App">
+            <TawkMessengerReact
+                propertyId="property_id"
+                widgetId="default"
+                autoStart={false}/>
+        </div>
+    );
+}
+```
+
+<br/>
+
+## start
+Start the tawk socket connection.
+
+```js
+tawkMessengerRef.current.start();
+
+// Example
+
+function App() {
+    const tawkMessengerRef = useRef();
+
+    const startTawk = () => {
+        tawkMessengerRef.current.start();
+    };
+
+    return (
+        <div>
+            <TawkMessengerReact
+                ref={tawkMessengerRef}/>
+        </div>
+    );
+}
+```
+
+<br/>
+
+## shutdown
+End the tawk socket connection.
+
+```js
+tawkMessengerRef.current.shutdown();
+
+// Example
+
+function App() {
+    const tawkMessengerRef = useRef();
+
+    const shutdownTawk = () => {
+        tawkMessengerRef.current.shutdown();
+    };
+
+    return (
+        <div>
+            <TawkMessengerReact
+                ref={tawkMessengerRef}/>
+        </div>
+    );
+}
+```
+
+<br/>
+
 ## maximize
 Maximizes the chat widget.
 

src/index.js

@@ -45,7 +45,8 @@ const TawkMessenger = forwardRef((props, ref) => {
 			propertyId : props.propertyId,
 			widgetId : props.widgetId,
 			embedId : props.embedId,
-			basePath : props.basePath
+			basePath : props.basePath,
+			autoStart : props.autoStart
 		});
 
 		/**
@@ -62,6 +63,14 @@ const TawkMessenger = forwardRef((props, ref) => {
 		/**
 		 * API for calling an action on the widget
 		 */
+		start : () => { 
+			return window.Tawk_API.start();
+		},
+
+		shutdown : () => { 
+			return window.Tawk_API.shutdown();
+		},
+
 		maximize : () => { 
 			return window.Tawk_API.maximize();
 		},

src/utils/widget.js

@@ -4,7 +4,7 @@
 /**
  * @param {Object} - Tawk widget required properties 
  */
-const loadScript = ({propertyId = '', widgetId = '', embedId = '', basePath = 'tawk.to'}) => {
+const loadScript = ({propertyId = '', widgetId = '', embedId = '', basePath = 'tawk.to', autoStart = true}) => {
 	if (embedId.length) {
 		/**
 		 * If the element with embedId as id we will create a new clement
@@ -19,6 +19,10 @@ const loadScript = ({propertyId = '', widgetId = '', embedId = '', basePath = 't
 		window.Tawk_API.embedded = embedId;
 	}
 
+	if (!autoStart) {
+		window.Tawk_API.autoStart = autoStart;
+	}
+
 	const script = document.createElement('script');
 	script.async = true;
 	script.src = `https://embed.${basePath}/${propertyId}/${widgetId}`;