From e4de366b8d23054ce4e9feec6e8b843b88b08f2a Mon Sep 17 00:00:00 2001 From: Sojan Jose Date: Tue, 3 Oct 2023 18:01:40 -0700 Subject: [PATCH] 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 --- app/javascript/sdk/IFrameHelper.js | 10 +++------- app/javascript/widget/components/ChatFooter.vue | 6 ++++++ .../widget/components/TeamAvailability.vue | 9 +++++++++ app/javascript/widget/constants/sdkEvents.js | 1 + app/javascript/widget/helpers/actionCable.js | 13 +++++++++++-- app/views/widget_tests/index.html.erb | 5 +++++ 6 files changed, 35 insertions(+), 9 deletions(-) diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js index 9d51599b9..2166b4304 100644 --- a/app/javascript/sdk/IFrameHelper.js +++ b/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 { - CHATWOOT_ERROR, - CHATWOOT_ON_MESSAGE, - CHATWOOT_READY, -} from '../widget/constants/sdkEvents'; +import { CHATWOOT_ERROR, 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 }) { - dispatchWindowEvent({ eventName: CHATWOOT_ON_MESSAGE, data }); + onEvent({ eventIdentifier: eventName, data }) { + dispatchWindowEvent({ eventName, data }); }, setBubbleLabel(message) { setBubbleText(window.$chatwoot.launcherTitle || message.label); diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue index afe48e0f6..53da736b7 100755 --- a/app/javascript/widget/components/ChatFooter.vue +++ b/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; diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue index 41628791e..58e18b3e1 100644 --- a/app/javascript/widget/components/TeamAvailability.vue +++ b/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, + }); + } }, }, }; diff --git a/app/javascript/widget/constants/sdkEvents.js b/app/javascript/widget/constants/sdkEvents.js index 801665711..766fa1742 100644 --- a/app/javascript/widget/constants/sdkEvents.js +++ b/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'; diff --git a/app/javascript/widget/helpers/actionCable.js b/app/javascript/widget/helpers/actionCable.js index aa6a79da5..1fe94f25d 100644 --- a/app/javascript/widget/helpers/actionCable.js +++ b/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); diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb index fe58cc3e9..560cbd499 100644 --- a/app/views/widget_tests/index.html.erb +++ b/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') +})