We are looking for documentation on how to use the SDK option for Zoom Phone Smart Embed

Hi, we are looking for documentation on how to use the zoom phone smart embed sdk in a website.

We do not want to use the iframe option because my boss does not want us using iframes in general and also because I found other posts on here indicating it is not fully supported. (See post Web Client Has Stopped Working When Embedded In An Iframe).

We do not want zoom meetings or video calls embedded in our site. We just want to be able to click a button and dial out from our user interface using one of our zoom phone numbers we have.

I found the zoom smart embed documentation that provides the iframe and the script for the sdk, but it only provides documentation on how to use the iframe, not on how to use the sdk. Is there documentation for this? We tried winging it, but got this error message in the console:

Uncaught TypeError: Cannot read properties of null (reading ‘appendChild’)
at sdk.js:2:251422
at sdk.js:2:251469
at sdk.js:2:251472

We wrote a support ticket and they said to ask here and tag @elisa.zoom

Thanks!

Hey @spencerc
Thanks for reaching out and welcome to the Zoom Developer Forum!
You should be able to embed Zoom Phone using a script:

<script src="https://vaapplicationscontent.zoom.us/phoneSdk/static/smart-embed/js/sdk.js"></script>

You can find both options (iFrame and script) in our Docs here:

Hi, those are the docs I was referring to that we have already read. They do not contain the information we need. They contain the script for the sdk and they contain the iframe, but they only contain instructions on how to use the iframe. There is not documentation there on how to actually use the sdk. Based on this documentation we had already tried that script you mentioned before asking here, but we got this error message:

Uncaught TypeError: Cannot read properties of null (reading ‘appendChild’)
at sdk.js:2:251422
at sdk.js:2:251469
at sdk.js:2:251472

Because the documentation is missing instructions on how to use the SDK we cannot correct it and so we reached out here for help. Please have a look at our original post.

Thanks

Hey @spencerc
I am able to use the script to embed the widget.
I have it working in a react app .

I am creating an element and assigning the script as the source

 const script = document.createElement("script");
    script.src = "https://vaapplicationscontent.zoom.us/phoneSdk/static/smart-embed/js/sdk.js";
    script.async = true;

    script.onload = () => {
      console.log("Zoom Phone Smart Embed SDK loaded");
      setTimeout(() => {
        setIsIframeLoaded(true);
      }, 3000);
    };

    document.body.appendChild(script);

I can run that and not getting any errors, let me know if this helps

Hi, we are not using a react app. We have placed this in the head of our html:

<script src="https://vaapplicationscontent.zoom.us/phoneSdk/static/smart-embed/js/sdk.js"></script>

How would you recommend adding this into an html page?

Also, once it’s embedded how do you use it? The documentation only covers how to use the iframe.

Thanks,

Hey @spencerc
Sorry for not communicating this effectively earlier in our conversation.

The ZP Smart Embed is basically a component that allows you to integrate Zoom Phone’s functionality into your web apps and as you know now it can be loaded either through a script or iframe tag, which dynamically injects an iframe into the page ant that iframe hosts the Smart Embed UI and interacts with the Zoom Phone SDK behind the scenes.

So yes, the docs only cover how to use the iframe, since that’s what it is and what you see in the docs is the only way to use it.

Although, ZPSE it is fully supported by us and we do offer support and guidance with this product

Going back to your question, I would add the script in my index.html so the widget is available throughout your web app.

Let me know if that helps