Zoom message generation

Phone Phone Smart Embed
1

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

<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.

2

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

3

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

4

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