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/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,
+        });
+      }
     },
   },
 };