From 9cf2bd284b3fd4281cd2af95b1adf992cb0025a3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 21 Mar 2025 00:30:24 +0530
Subject: [PATCH] feat: Support card message postback event as widget event
 (#11133)

Fixes https://github.com/chatwoot/chatwoot/issues/5956
Fixes https://github.com/chatwoot/chatwoot/issues/1895
---
 app/javascript/sdk/IFrameHelper.js              |  7 +++++++
 app/javascript/shared/components/CardButton.vue | 12 +++++++++++-
 app/views/widget_tests/index.html.erb           |  4 ++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 8f6716f1c..66e25902b 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -203,6 +203,13 @@ export const IFrameHelper = {
       updateCampaignReadStatus(window.$chatwoot.baseDomain);
     },
 
+    postback(data) {
+      dispatchWindowEvent({
+        eventName: 'chatwoot:postback',
+        data,
+      });
+    },
+
     toggleBubble: state => {
       let bubbleState = {};
       if (state === 'open') {
diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index 901670d05..d05eb5f01 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -1,6 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
+import { IFrameHelper } from 'widget/helpers/utils';
+
 export default {
   components: {},
   props: {
@@ -22,7 +24,15 @@ export default {
   },
   methods: {
     onClick() {
-      // Do postback here
+      if (this.action.type === 'postback') {
+        // Send message to parent iframe
+        if (IFrameHelper.isIFrame()) {
+          IFrameHelper.sendMessage({
+            event: 'postback',
+            data: { payload: this.action.payload },
+          });
+        }
+      }
     },
   },
 };
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 9471c44c2..45769bb45 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -62,6 +62,10 @@ window.addEventListener('chatwoot:on-message', function(e) {
   console.log('chatwoot:on-message', e.detail)
 })
 
+window.addEventListener('chatwoot:postback', function(e) {
+  console.log('chatwoot:postback', e.detail)
+})
+
 
 window.addEventListener('chatwoot:on-start-conversation', function(e) {
   console.log('chatwoot:on-start-conversation', e.detail)