# Zoom message generation

**URL:** <https://devforum.zoom.us/t/zoom-message-generation/136837>\
**Category:** Phone Smart Embed\
**Created:** [August 25, 2025, 2:46pm UTC](https://devforum.zoom.us/t/zoom-message-generation/136837 "2025-08-25T14:46:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Soham](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/soham/32/69515_2.png) [@Soham](https://devforum.zoom.us/u/Soham)\
**Post date:** [August 25, 2025, 2:46pm UTC](https://devforum.zoom.us/t/zoom-message-generation/136837/1 "2025-08-25T14:46:30Z")

</div>

# Issue: Missing PostMessage Events When Zoom Dialer Popover is Closed

## Summary

I have implemented a React application that embeds the Zoom dialer widget using an iframe within a Material-UI (MUI) Popover component. The application experiences intermittent issues where PostMessage events from the Zoom widget are not received when the popover is closed, specifically missing the `zp-call-log-completed-event` after call completion.

## Implementation Details

### Current Architecture

- React application with embedded Zoom dialer iframe

- User-triggered button opens the dialer in an MUI Popover

- Popover allows users to access the rest of the page during calls

### Code Implementation

The component structure includes:

- A button with tooltip that triggers the popover

- MUI Popover component containing the iframe container

- Loading spinner overlay for visual feedback

- Iframe rendered within a positioned div container

```auto
<Tooltip
  title={disableZoomFeature ? "Zoom open on other tab or call in progress." : "Zoom Phone"}
  arrow
>
  <span>
    <Button
      ref={callButtonRef}
      variant="contained"
      color="primary"
      sx={{ m: "0.3rem" }}
      disabled={disableZoomFeature}
      onClick={handleCallBtnClick}
    >
      <FontAwesomeIcon
        icon={faPhone as IconProp}
        size="lg"
      />
      &emsp;{number}
    </Button>
  </span>
</Tooltip>

<Popover
  open={Boolean(anchorEl)}
  anchorEl={anchorEl}
  disableScrollLock
  onClose={handleClose}
  anchorOrigin={{
    vertical: "bottom",
    horizontal: "center",
  }}
  transformOrigin={{
    vertical: "top",
    horizontal: "center",
  }}
  disableEnforceFocus
>
  <div style={{ position: "relative", width: "350px", height: "650px" }}>
    <div
      ref={popoverSpotRef}
      style={{
        width: "100%",
        height: "100%",
        opacity: showLoadingSpinner ? 0.5 : 1,
        pointerEvents: showLoadingSpinner ? "none" : "auto",
        transition: "opacity 0.2s",
      }}
    />
    {showLoadingSpinner && (
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          background: "rgba(255,255,255,0.4)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          zIndex: 2,
          pointerEvents: "all",
        }}
      >
        <CircularProgress />
      </div>
    )}
  </div>
</Popover>

```

## Problem Description

### Observed Issue

When the popover is closed, the application intermittently fails to receive PostMessage events from the Zoom widget. Most notably, the `zp-call-log-completed-event` is not triggered when a call ends, which disrupts the application’s call management workflow.

### Troubleshooting Attempts

Initially suspected the issue was caused by popover unmounting behavior affecting the iframe lifecycle. Attempted to resolve by:

- Moving iframe creation outside of the popover component

- Using React refs to embed the iframe into the target div

- However, the issue persists despite these modifications

## Questions

1. **PostMessage Mechanism** : Could you clarify how the Zoom widget sends PostMessage events to the parent browser context?

2. **Iframe Visibility Requirements** : Does the iframe need to remain visible/open for PostMessage events to be successfully transmitted?

3. **DOM Visibility Factors** : Are there specific visibility or DOM attachment requirements that affect the widget’s ability to communicate with the parent application?

## Environment

- **Framework** : React

- **UI Library** : Material-UI (MUI)

- **Integration Method** : Zoom dialer iframe embedding

- **Expected Events** : `zp-call-log-completed-event` and other PostMessage events

Any insights into the PostMessage event mechanism and visibility requirements would be greatly appreciated.

Thank you for your assistance.

---

<div class="post-metadata">

**Author:** ![Soham](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/soham/32/69515_2.png) [@Soham](https://devforum.zoom.us/u/Soham)\
**Post date:** [August 27, 2025, 2:52pm UTC](https://devforum.zoom.us/t/zoom-message-generation/136837/2 "2025-08-27T14:52:21Z")

</div>

Hello, I would appreciate someone taking a look at this.

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [August 27, 2025, 3:57pm UTC](https://devforum.zoom.us/t/zoom-message-generation/136837/3 "2025-08-27T15:57:58Z")

</div>

Hi @Soham  
Thanks for reaching out to us, I will take a look and get back to you

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [September 3, 2025, 4:42pm UTC](https://devforum.zoom.us/t/zoom-message-generation/136837/4 "2025-09-03T16:42:52Z")

</div>

Hi @Soham  
I am trying to run a couple of tests but not able to replicate this.  
Have you tried this without the pop op component? I am thinking that closing the popover is actually closing the widget and that’s why you are not getting the event