Tawk 860rywc83 new api for connections

docs/api-reference.md

@@ -31,6 +31,9 @@ Use the JavaScript API to manipulate the chat widget displayed on your website.
   - [tagsUpdated](#tagsupdated)
   - [unreadCountChanged](#unreadcountchanged)
   - [visitor](#visitor)
+  - [autoStart](#autostart)
+  - [start](#start)
+  - [shutdown](#shutdown)
   - [maximize](#maximize)
   - [minimize](#minimize)
   - [toggle](#toggle)
@@ -297,6 +300,41 @@ this.$tawkMessenger.visitor({
 
 <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 TawkMessengerVue from '@tawk.to/tawk-messenger-vue-2';
+
+Vue.use(TawkMessengerVue, {
+    propertyId : 'property_id',
+    widgetId : 'widget_id',
+    autoStart : false
+});
+```
+
+<br/>
+
+## start
+Start the tawk socket connection.
+
+```js
+this.$tawkMessenger.start();
+```
+
+<br/>
+
+## shutdown
+End the tawk socket connection.
+
+```js
+this.$tawkMessenger.shutdown();
+```
+
+<br/>
+
 ## maximize
 Maximizes the chat widget.
 

src/lib/index.js

@@ -17,6 +17,7 @@ class TawkMessenger {
 		this.propertyId = options.propertyId;
 		this.widgetId = options.widgetId;
 		this.embedId = options.embedId;
+		this.autoStart = options.autoStart;
 		this.customStyle = options.customStyle;
 		this.basePath = options.basePath;
 
@@ -41,7 +42,8 @@ class TawkMessenger {
 			propertyId : this.propertyId,
 			widgetId : this.widgetId,
 			embedId : this.embedId,
-			basePath : this.basePath
+			basePath : this.basePath,
+			autoStart : this.autoStart
 		});
 
 		this.init();
@@ -65,6 +67,8 @@ class TawkMessenger {
 	 * API for calling an action on the widget
 	 */
 	mapActions() {
+		this.root.start = () => window.Tawk_API.start();
+		this.root.shutdown = () => window.Tawk_API.shutdown();
 		this.root.maximize = () => window.Tawk_API.maximize();
 		this.root.minimize = () => window.Tawk_API.minimize();
 		this.root.toggle = () => window.Tawk_API.toggle();

src/utils/widget.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 
-function loadScript({propertyId = '', widgetId = '', embedId = '', basePath = 'tawk.to'}) {
+function 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
@@ -15,6 +15,10 @@ function 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}`;