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

@@ -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') {

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

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)