Zp-make-call is not working

Phone
1

API Endpoint(s) and/or Zoom API Event(s)

Description
I would like to click on a number, and instantly call the number that the user clicked.
I used this tutorial to integrate the zoom phone with my app:

But when I call this event ‘zp-make-call’, the event is not being triggered, and even the number sended in the data, is not being dialed.
What’s strange to me is that when starting the component and calling the 'zp-init-config 'event, the event is triggered by zoom, and the zoom embed is initiating the iframe.

Error?
the call is not being initiated.

2

Hi @sue1 , can you please provide a short recording of this and link to your repo? You can send to the private message I start with you.

4

Hello,
Where I can send you this private message?
I didn’t find your private message.

5

@gianni.zoom Anyway, my code is simple

  private injectIframe(): void {
    const container = this.iframeContainer.nativeElement;
    const iframe = this.document.createElement('iframe') as HTMLIFrameElement;
    iframe.setAttribute('allow', 'clipboard-read; clipboard-write https://applications.zoom.us');
    iframe.setAttribute('src', 'https://applications.zoom.us/integration/phone/embeddablephone/home');
    iframe.setAttribute('height', '700');
    iframe.setAttribute('width', '350');
    iframe.addEventListener('load', () => this.callIframe(iframe, '77028245777'));
    container.appendChild(iframe);
  }

  callIframe(iframe: HTMLIFrameElement, number: string): void {
    iframe.contentWindow.postMessage(
      {
        type: 'zp-init-config',
        data: {
          enableSavingaLog: false,
          enableAutoLog: false,
          enableContactSearching: false,
          enableContactMatching: false
        }
      },
      this.window.location.origin
    );

    iframe.contentWindow.postMessage(
      {
        type: 'zp-make-call',
        data: {
          number: number
        }
      },
      this.window.location.origin
    );
  }

The iframe is being injected when I call injectIframe method, and when I dial a number and press call button, the call starts normally. but this event to make a call via code, is not working, for every number that I insert.

I tried to select the iframe element in dev tools and call this event like that:

$0.contentWindow.postMessage(
      {
        type: 'zp-make-call',
        data: {
          number: 7702585555
        }
      },
      this.window.location.origin
    );

However, the console returns ‘undefined’, and the call is not being performed."

6

Hi @sue1 ,

I just responded again in the private message thread so you can send your email address. I will open a support inquiry for you on your behalf. When you click on your icon pic you should see a message icon to access your private messages.

Screenshot 2024-03-18 at 10.49.54 AM

7

thank you! I will respond you

1 Like
8

@sue1 were you able to reproduce with the the sample code provided as opposed to your refactored code?

document.querySelector('iframe#zoom-embeddable-phone-iframe').contentWindow.postMessage({
    type: 'zp-init-config',
    data: {
      enableSavingLog: false,
      enableAutoLog: false,
      enableContactSearching: false,
      enableContactMatching: false,
      notePageConfiguration: <configurationJSON>
       // Optional. Build your note page with the fields listed in "Add notes" section
    }
}, 'https://applications.zoom.us');

document.querySelector('iframe#zoom-embeddable-phone-iframe').contentWindow.postMessage({
    type: 'zp-make-call',
    data: {
      number: <phone number>,
      callerId: <outgoing caller ID (optional)>,
      autoDial: <whether to initiate the call immediately or copy the number (optional and the default is true)> 
    }
}, 'https://applications.zoom.us');
9

@gianni.zoom Yes, in addition to this application, I created a JS application, using the same code exactly as it is in the documentation, and in this video on YouTube which is also on the official ZOOM channel.
https://www.youtube.com/watch?v=Jiy6sX7VIRo.

However, the problem persists. The ZP-INIT-CONFIG event works and the Iframe is initialized correctly, and I can make calls successfully. However, ZP-MAKE-CALL does not work at all.
As I said before, I even tried selecting the IFRAME in the dev-tools and simply hitting the event, but it still doesn’t work.

10

Hi @sue1 ,

We are investigating and will follow up (ZSEE-123248). Thank you!

11

@gianni.zoom How can I track this ticket?
Do you have any idea when we will get an answer?

thanks!

12

Hi @sue1 ,

This is an internal reference number, but I just checked in with the team looking into this for an update. I’ll follow up as it becomes available.

13

I was told to expect updates shortly. Appreciate your patience.

1 Like
14

@sue1

https://applications.zoom.us instead of this.window.location.origin in callIframe function.

image
image680×550 38 KB

Please also try adding 1 or 2 seconds delay between zp-init-config and zp-make-call event otherwise you can get no available caller id error.

Here is working javascript callIframe function code from the smart embed team:

function callIframe(iframe, number) {
      // Send a message to the iframe window to initialize configuration
      iframe.contentWindow.postMessage(
        {
          type: 'zp-init-config',
          data: {
            enableSavingaLog: false,
            enableAutoLog: false,
            enableContactSearching: false,
            enableContactMatching: false
          }
        },
        'https://applications.zoom.us'
      );
    var delayInMilliseconds = 2000; //2 seconds
    setTimeout(function() {
        iframe.contentWindow.postMessage(
        {
          type: 'zp-make-call',
          data: {
            number: number
          }
        },
        'https://applications.zoom.us'
      );
    }, delayInMilliseconds);
      
    }