Retool App postMessage Communication Issues with Embedded Chatwoot Dashboard App

I'm embedding a Retool application within a Chatwoot Dashboard App, following their guide here: How to use Dashboard Apps? | User Guide | Chatwoot.

I'm encountering issues with postMessage communication in both directions:

  1. Retool App to Chatwoot (Parent Window):
  • I'm using parent.postMessage('chatwoot-dashboard-app:fetch-info', '*') in a Retool JS Query.
  • While my browser console shows the postMessage call executing from Retool, Chatwoot does not appear to receive or process these messages.
  1. Chatwoot (Parent Window) to Retool App:
  • I have a window.addEventListener("message", ...) listener set up in my Retool App's Preloaded JavaScript to receive context data (e.g., appContext events) from Chatwoot.
  • Despite triggering actions in Chatwoot that should send messages (like switching conversations, or manual postMessage attempts from Chatwoot's console), the Retool App's console shows no logs from my listener, indicating no messages are being received.

Could there be any specific Retool configurations, iframe restrictions, or common pitfalls when embedding in Chatwoot that could explain these communication failures?

Hi @Hsiao_Min_Shyh, that's an interesting question. I haven't seen anyone else integrating Chatwoot with Retool so we don't have any pre-existing info on common pitfalls. We do have this page on embedding apps, which includes info on the process, whether you're embedding within Retool or a Retool app is being embedded.

One thing to note is that the js docs on postMessage warn about using '*' as a target origin due to potential security vulnerabilities, so you might want to use either your apps url or your retool url for that value.

Also, you'll want to use Retool's functionality to receive these messages. Retool does not support using event listeners. As shown in a previous link, you can try to use a ParentWindow Resource to read those values.

Hi @Hsiao_Min_Shyh, were you able to get this working?