feat: Add an option to listen to the start conversation click events (#8038)

This PR will add a new event chatwoot:on-start-conversation to the chat widget, which you can listen to and trigger custom interactions on your end.

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/sdk/IFrameHelper.js

@@ -23,11 +23,7 @@ import {
 } from './bubbleHelpers';
 import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
-import {
+import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
-  CHATWOOT_ERROR,
-  CHATWOOT_ON_MESSAGE,
-  CHATWOOT_READY,
-} from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
 import { getUserCookieName, setCookieWithDomain } from './cookieHelpers';
 import {
@@ -191,8 +187,8 @@ export const IFrameHelper = {
         Cookies.remove(getUserCookieName());
       }
     },
-    onMessage({ data }) {
+    onEvent({ eventIdentifier: eventName, data }) {
-      dispatchWindowEvent({ eventName: CHATWOOT_ON_MESSAGE, data });
+      dispatchWindowEvent({ eventName, data });
     },
     setBubbleLabel(message) {
       setBubbleText(window.$chatwoot.launcherTitle || message.label);

app/javascript/widget/components/ChatFooter.vue

@@ -38,6 +38,8 @@ import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { sendEmailTranscript } from 'widget/api/conversation';
 import routerMixin from 'widget/mixins/routerMixin';
+import { IFrameHelper } from '../helpers/utils';
+import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 export default {
   components: {
     ChatInputWrap,
@@ -96,6 +98,10 @@ export default {
       this.clearConversations();
       this.clearConversationAttributes();
       this.replaceRoute('prechat-form');
+      IFrameHelper.sendMessage({
+        event: 'onEvent',
+        eventIdentifier: CHATWOOT_ON_START_CONVERSATION,
+      });
     },
     async sendTranscript() {
       const { email } = this.currentUser;

app/javascript/widget/components/TeamAvailability.vue

@@ -40,6 +40,9 @@ import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { IFrameHelper } from 'widget/helpers/utils';
+import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+
 export default {
   name: 'TeamAvailability',
   components: {
@@ -82,6 +85,12 @@ export default {
   methods: {
     startConversation() {
       this.$emit('start-conversation');
+      if (!this.hasConversation) {
+        IFrameHelper.sendMessage({
+          event: 'onEvent',
+          eventIdentifier: CHATWOOT_ON_START_CONVERSATION,
+        });
+      }
     },
   },
 };

app/javascript/widget/constants/sdkEvents.js

@@ -1,3 +1,4 @@
 export const CHATWOOT_ERROR = 'chatwoot:error';
 export const CHATWOOT_ON_MESSAGE = 'chatwoot:on-message';
+export const CHATWOOT_ON_START_CONVERSATION = 'chatwoot:on-start-conversation';
 export const CHATWOOT_READY = 'chatwoot:ready';

app/javascript/widget/helpers/actionCable.js

@@ -3,6 +3,7 @@ import { playNewMessageNotificationInWidget } from 'widget/helpers/WidgetAudioNo
 import { ON_AGENT_MESSAGE_RECEIVED } from '../constants/widgetBusEvents';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { shouldTriggerMessageUpdateEvent } from './IframeEventHelper';
+import { CHATWOOT_ON_MESSAGE } from '../constants/sdkEvents';
 
 const isMessageInActiveConversation = (getters, message) => {
   const { conversation_id: conversationId } = message;
@@ -58,7 +59,11 @@ class ActionCableConnector extends BaseActionCableConnector {
       .dispatch('conversation/addOrUpdateMessage', data)
       .then(() => window.bus.$emit(ON_AGENT_MESSAGE_RECEIVED));
 
-    IFrameHelper.sendMessage({ event: 'onMessage', data });
+    IFrameHelper.sendMessage({
+      event: 'onEvent',
+      eventIdentifier: CHATWOOT_ON_MESSAGE,
+      data,
+    });
     if (data.sender_type === 'User') {
       playNewMessageNotificationInWidget();
     }
@@ -70,7 +75,11 @@ class ActionCableConnector extends BaseActionCableConnector {
     }
 
     if (shouldTriggerMessageUpdateEvent(data)) {
-      IFrameHelper.sendMessage({ event: 'onMessage', data });
+      IFrameHelper.sendMessage({
+        event: 'onEvent',
+        eventIdentifier: CHATWOOT_ON_MESSAGE,
+        data,
+      });
     }
 
     this.app.$store.dispatch('conversation/addOrUpdateMessage', data);

app/views/widget_tests/index.html.erb

@@ -59,4 +59,9 @@ window.addEventListener('chatwoot:error', function(e) {
 window.addEventListener('chatwoot:on-message', function(e) {
   console.log('chatwoot:on-message', e.detail)
 })
+
+
+window.addEventListener('chatwoot:on-start-conversation', function(e) {
+  console.log('chatwoot:on-start-conversation')
+})
 </script>