Angular integration of zoom on a specific div in a component

[Simon.B]

Hello, i need to integrate zoom web sdk on an angular application with child component etc not a SPA.
Specifically in a div on a child component of a page.
I have already looked a LOT of topic/samples of integration none of that worked.

Tried iframe first because that’s the perfect solution but we can’t go pass the username prompt who keep reseting (on chrome, firefox work but we need chrome), impossible to manage host with that, can’t bypass username and password…

Tried web sdk, that work on fullscreen and in the root of the app and have a lot of small css problem like menu who overlap etc… that’s completely not a use case possible for our application.

So after hours and days of reading a lot of things and trying to make it work in a working solution for our application (embed it in a div, in a child component), i’m here to ask if that’s really possible to embed your sdk in a child component on a specific div.

I have already tried the id=“zmmtg-root” or that sort of things and that don’t work and we don’t want a fullscreen integration.

Hope you can help me in solving and integrating your sdk.

Best regards !

Zoom version: 1.8.6
Angular version: 8.1.2

[MaxM]

Hey @Simon.B,

Thank you for reaching out to the Zoom Developer Forum. The Web SDK is currently designed to fill the browser window with the meeting. While this can be overridden with custom CSS and JS, that is not supported at this time and can cause further issues to the functionality or display of the Web SDK.

If you haven’t already, I recommend looking into our Sample Angular App for a little more information on how Angular can be used with the Web SDK. This won’t include styling examples though.

We are also working on making the Web SDK more customizable.

Thanks,
Max

[Simon.B]

Hi @MaxM ,

Thanks for the help, i have already done that. If the web sdk can only be used in fullscreen in that case it’s not possible to use it. So the only solution is the iframe version who work on browser (firefox, safari…) but not on chrome !
That block in the name/bot checking entry, keep resetting and redirecting in that.

Firefox screenshot → Working

Chrome not working

Errors on chrome

If you have a solution.

Thanks and have a nice day !

[MaxM]

Hey @Simon.B,

As you’ve seen, showing the Web SDK in an iframe is known to cause issues and has varied browser support. For this reason, we don’t recommend it. Instead, if you want to size the Web SDK, you may want to look into styling it with CSS and JS.

Thanks,
Max