Issues with Zoom Smart Embed when using 'zp-make-call'

Phone
,
1

API Endpoint(s) and/or Zoom API Event(s)
I am unable to attach a link to this post, but it is the zoom phone smart embed guide, under the click-to-dial-from-a-third-party-app section

I am currently using Zoom Smart Embed along with Zoom Phone in a VueJS product. I already have it integrated, and on its own works great. You are able to type a phone number into it to make calls, it will show you when you are being called, and that works. Any functionality started from the iFrame properly sends to the desktop zoom app. However, when I attempt to use the click to dial options mentioned within the Zoom smart embed docs, it doesn’t seem to send the call to the zoom desktop app.
I use the following code exactly as explained in the docs:

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');

When I run the code above, the iFrame does actually receive it, and looks like it calls. However, it never actually calls to the zoom app, so no call actually happens.
One thing I noticed is that if I were to call regularly by typing in the phone number, and then calling, it will actually call the “make-call” api endpoint, which actually sends to zoom, and I can see in the network tab of chrome dev tools. However, using the zp-make-call code above does not prompt that same api endpoint to be called at all.
Any tips or assistance would be greatly appreciated!

Error?
No error

How To Reproduce
Steps to reproduce the behavior:
*1. I have the iframe set up as such:

            <iframe id="zoom-embeddable-phone-iframe" src="https://applications.zoom.us/integration/phone/embeddablephone/home" allow="clipboard-read; clipboard-write https://applications.zoom.us"></iframe>

With a call method doing the following:

callNumber() {
                const zoomWidget = this.$root.placeholder.$refs.zoomWidget;

                 zoomWidget.$refs.zoomIframe.contentWindow.postMessage({
                     type: "zp-init-config",
                     data: {
                         enableSavingLog: false,
                         enableAutoLog: false,
                         enableContactSearching: false,
                         enableContactMatching: false
                     }
                 }, "https://applications.zoom.us");

                 setTimeout(() => {
                     zoomWidget.$refs.zoomIframe.contentWindow.postMessage({
                         type: "zp-make-call",
                         data: {
                             number: 1234567890,
                         }
                     }, "https://applications.zoom.us");
                }, 2000);
            }

2. No errors occur when this is ran

2 Likes
2

Hi Nathan,

A Zoom Solution Engineer this side. I ran into this same issue this week while helping to set up ZP Smart Embed for a customer using a TeleHealth Web Application on ASP. The iFrame manual dialling worked but Click to Call would not trigger the desktop client to launch a call. It would just stay in hung state with the phone number stuck in dialling mode within the iFrame.

One of Zoom’s Partners, Sygrate (and their dev team, particularly, Razal) found the issue. Sharing the solution here in best interest of everyone.

============================================================

The issue was that we were initializing the Zoom Phone Iframe API as soon as the website loaded, but the softphone wasn’t fully ready at that point. We need to wait until the softphone finishes loading before making any API calls. After updating the code to handle that part properly, it then worked.

1 Like